Farveskemaer til websites: sådan vælger du farver til en side

Et godt farveskema til et website er ikke et moodboard med fem yndlingsfarver. Det er en kort liste af roller, hver udfyldt af én farve: sidens bund, hævede flader, brødtekst, mere afdæmpet tekst, kanter, én accent til handlinger og rød, rav og grøn til status. Vælg din brandaccent først, byg rolige neutrale farver omkring den, tjek kontrasten i hver tekstkombination, og gem så resultatet som CSS-variabler, så hele siden bruger de samme værdier.

De roller, ethvert website har brug for

Sådan vælger du farver til et website

1. 1

   Start med én accent

   Din brandfarve, eller den, du vil have folk til at forbinde med dig. Har du ikke en, hjælper sådan vælger du brandfarver.

2. 2

   Tone de neutrale farver mod den

   Grå med et strejf af accentens kulør føles beslægtet med den. Et petrolfarvet brand får kølige, let blålige grå; et terrakottabrand får varme, cremede.

3. 3

   Vælg lyst, mørkt eller begge

   Vælg det tema, de fleste besøgende ser først, og design det færdigt, før du begynder på det andet.

4. 4

   Tjek hver tekstkombination

   Tekst på bund, tekst på flade, dæmpet tekst på begge, hvid på accentknappen. Ret alt under 4,5:1.

5. 5

   Brug 60, 30, 10

   Cirka 60 % bund, 30 % flader og tekst, 10 % accent. 60 30 10-reglen forklarer balancen.

Tre farvepaletter til websites at starte fra

Kontrastregler, der holder et website læsbart

WCAG’s retningslinjer for kontrast sætter minimum: 4,5:1 for normal tekst, 3:1 for stor tekst (omkring 24 px, eller 19 px fed) og 3:1 for komponenter i brugerfladen som kanter på inputfelter og ikoner, der bærer betydning. WebAIM’s kontrasttjek tester ethvert par. Vores guide til farvekontrast dækker begrundelserne og grænsetilfældene.

Sådan koder du dit farveskema som tokens

Gem hver rolle én gang som en CSS custom property, og brug kun de variabler i dine styles. Så er et mørkt tema, en sæsonkampagne eller et rebrand en ændring i én blok værdier, ikke en søgning gennem hver fil. Det er kerneideen i design tokens.

:root {
  --ground: #f7f9fb;
  --surface: #ffffff;
  --text: #14202b;
  --text-muted: #52606d;
  --border-input: #8a96a3;
  --accent: #0f766e;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f0e17;
    --surface: #1a1926;
    --text: #ecebf3;
    --text-muted: #a5a3b8;
    --border-input: #6e6b85;
    --accent: #a78bfa;
    --on-accent: #0f0e17;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }

Dark mode er sit eget skema

Det virker sjældent at vende en lys palet om. Mættede accenter gløder for kraftigt på sort, skygger forsvinder, og helt hvid tekst blænder. Byg dark mode som et andet sæt værdier: en næsten sort bund med et strejf af kulør, flader, der bliver lysere, jo højere de ligger, blødere tekst og en accent, der er gjort lysere, til den når kontrasten. Design til dark mode går dybere.

Hvor brandfarven rækker ud over knapperne

Bruges accenten kun på knapper, kan siden føles generisk. Svaret er ikke mere accent overalt, men ét sted, hvor brandet får lov at være udtryksfuldt: hero-sektionen, et featurebånd eller footeren. En fyldig gradient i brandets farvefamilie virker godt der, mens resten af siden forbliver rolig og læsbar.

En Mark fra Gradiently kan være det udtryksfulde lag: en baggrund, ingen andre har, som vælger en skriftfarve fra sin egen palet til hver linje, så overskrifterne forbliver læsbare. Mere om kombinationer finder du i farveharmoni og design af hero-sektioner.