Färgscheman för webbplatser: välj färger till en sajt

Ett bra färgschema för en webbplats är inte en moodboard med fem favoritfärger. Det är en kort lista med roller, där varje roll fylls av en färg: sidans botten, upphöjda ytor, brödtext, tystare text, kantlinjer, en accent för handlingar samt rött, gult och grönt för status. Välj först din varumärkesaccent, bygg lugna neutrala toner runt den, kontrollera kontrasten för varje textpar och lagra sedan resultatet som CSS-variabler så att hela sajten använder samma värden.

Rollerna som varje sajt behöver

Så väljer du färger till en webbplats

1. 1

   Börja med en accent

   Din varumärkesfärg, eller den du vill att folk ska förknippa med dig. Om du inte har någon hjälper hur du väljer varumärkesfärger.

2. 2

   Tona de neutrala mot den

   Grått med en antydan av accentens nyans känns besläktat med den. Ett petrolfärgat varumärke får kalla, svagt blåaktiga gråtoner; ett terrakottafärgat varumärke får varma, gräddiga.

3. 3

   Bestäm ljust, mörkt eller båda

   Välj det tema som flest besökare ser först och designa det helt innan du börjar med det andra.

4. 4

   Kontrollera varje textpar

   Text på botten, text på yta, dämpad text på båda, vitt på accentknappen. Rätta allt under 4,5:1.

5. 5

   Tillämpa 60, 30, 10

   Ungefär 60 % botten, 30 % ytor och text, 10 % accent. 60-30-10-regeln förklarar balansen.

Tre färgpaletter för webbplatser att utgå från

Kontrastregler som håller en sajt läsbar

WCAG:s riktlinjer för kontrast sätter golvet: 4,5:1 för normal text, 3:1 för stor text (ungefär 24 px, eller 19 px fet) och 3:1 för gränssnittskomponenter som kantlinjer på fält och ikoner som bär mening. WebAIM:s kontrastkontroll testar vilket par som helst. Vår guide till färgkontrast tar upp skälen och gränsfallen.

Koda ditt färgschema som tokens

Lagra varje roll en gång som en CSS-variabel och använd bara de variablerna i dina stilar. Då är ett mörkt tema, en säsongskampanj eller en omprofilering en ändring av ett block med värden, inte en sökning genom varje fil. Det är kärnan i designtokens.

: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); }

Mörkt läge är ett eget schema

Att invertera en ljus palett fungerar sällan. Mättade accenter lyser för hårt på svart, skuggor försvinner och rent vit text ger bländning. Bygg mörkt läge som en andra uppsättning värden: en nästan svart botten med en antydan av nyans, ytor som blir ljusare ju högre de ligger, mjukare text och en accent som ljusats upp tills den når kontrast. Design för mörkt läge går djupare.

Där varumärkesfärgen går bortom knappar

Om accenten bara används på knappar kan sajten kännas generisk. Svaret är inte mer accent överallt, utan ett ställe där varumärket får vara uttrycksfullt: hjälteytan, ett funktionsband eller sidfoten. En rik gradient i varumärkets familj fungerar bra där, medan resten av sidan förblir lugn och läsbar.

En Mark i Gradiently kan vara det uttrycksfulla lagret: en bakgrund ingen annan har, som väljer en textfärg ur sin egen palett för varje rad så att rubrikerna förblir läsbara. För mer om par, se färgharmoni och design av hjältesektion.