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

[Canonical HTML page](https://gradiently.design/sv/guide/website-color-scheme)

En sajt behöver färre färger än du tror, och varje färg behöver en uppgift. Ge dem roller, kontrollera dem mot varandra, så håller sig hela sajten enhetlig när den växer.

## The short version

- Ett färgschema för en webbplats fungerar bäst som en kort lista med roller: sidans botten, yta, text, dämpad text, kantlinje, accent och statusfärger.
- De flesta sajter behöver en varumärkesaccent, som främst används till knappar och länkar, medan neutrala toner gör resten av jobbet.
- WCAG kräver ett kontrastförhållande på minst 4,5:1 för normal text och 3:1 för stor text och gränssnittsdelar som kantlinjer på inmatningsfält.
- Att lagra färger som CSS-variabler, eller designtokens, låter en hel sajt byta tema genom att byta en uppsättning värden.
- Ett mörkt tema är en separat uppsättning värden för samma roller, inte en inversion av det ljusa.

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

| Roll | Används till | Tumregel |
| --- | --- | --- |
| Botten | Sidans bakgrund | Svagt tonad i stället för rent vitt eller svart känns mjukare |
| Yta | Kort, paneler, menyer | Ett steg ljusare (ljust tema) eller ännu ljusare (mörkt tema) än botten |
| Text | Rubriker och brödtext | Mycket hög kontrast mot botten och yta |
| Dämpad text | Bildtexter, etiketter, metadata | Fortfarande minst 4,5:1 mot botten |
| Kantlinje | Avdelare och ramar på inmatningsfält | Dekorativa avdelare kan vara svaga; kantlinjer på fält behöver 3:1 |
| Accent | Knappar, länkar, valda tillstånd | Din varumärkesfärg, sparsamt använd så att den betyder ”agera här” |
| Status | Fel, varningar, lyckat | Rött, gult, grönt, avstämda så att de passar din accent |

Sju roller täcker de flesta sajter. Namnge färger efter roll, inte nyans, så att en ändring av varumärkesfärgen senare blir en enda redigering.

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

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](https://gradiently.design/sv/guide/how-to-choose-brand-colors).
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. **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. **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. **Tillämpa 60, 30, 10** Ungefär 60 % botten, 30 % ytor och text, 10 % accent. [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule) förklarar balansen.

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

- Botten: #f7f9fb
- Yta: #ffffff
- Text: #14202b
- Dämpad text: #52606d
- Kantlinje på fält: #8a96a3
- Petrolaccent: #0f766e

Lugn klinik, ljus. Text på botten är ungefär 15,7:1, dämpad text 6,1:1, vitt på den petrolfärgade knappen 5,5:1 och kantlinjen på fältet når precis 3:1 mot vitt.

- Gräddbotten: #fbf6ef
- Havreyta: #efe4d6
- Espressotext: #2a1f17
- Dämpad text: #635e68
- Terrakottaaccent: #b4441c

Varmt kafé, ljust. Espresso på grädde är ungefär 15:1; vitt på terrakotta ungefär 5,5:1, så knappetiketterna förblir läsbara.

- Nattbotten: #0f0e17
- Upphöjd yta: #1a1926
- Text: #ecebf3
- Dämpad text: #a5a3b8
- Lilaaccent: #a78bfa

Nattstudio, mörk. Off white-text i stället för rent vit minskar bländning; lilaaccenten är ungefär 7:1 mot botten, så använd mörk text på lila knappar.

## Kontrastregler som håller en sajt läsbar

[WCAG:s riktlinjer för kontrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) 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](https://webaim.org/resources/contrastchecker/) testar vilket par som helst. Vår [guide till färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility) tar upp skälen och gränsfallen.

### Vanliga misstag

- Ljusgrå platshållartext som enda etikett
- Vit text på en blek varumärkesfärg som gult eller himmelsblått
- Länkar som skiljer sig från brödtexten bara genom färg
- En blek kantlinje som enda ram runt ett formulärfält
- Felmeddelanden som bara visas i rött

### Lösningar

- Riktiga etiketter ovanför fälten, dämpad text på 4,5:1
- Mörk text på ljusa accenter, eller en djupare nyans av accenten
- Understrukna länkar i brödtext, eller gör dem feta
- Kantlinjer på fält på 3:1 mot sin bakgrund
- En ikon eller ord vid sidan av färgen

## 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](https://gradiently.design/sv/guide/design-tokens).

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

Roller, inte nyanser. Notera att `--on-accent` byter från vitt till nästan svart, eftersom en ljuslila knapp behöver mörk text.

## 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](https://gradiently.design/sv/guide/dark-mode-design) 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 bred hjältebild för en sjukgymnastikklinik med en kort rubrik på en rik gradient

Ett uttrycksfullt band i 1920×1080 bär varumärket; resten av sajten använder de lugna rollerna ovan.

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](https://gradiently.design/sv/guide/color-harmony) och [design av hjältesektion](https://gradiently.design/sv/guide/hero-section-design).

## FAQ

### Hur många färger ska en webbplats ha?

Oftast en varumärkesaccent, tre till fem neutrala toner för botten, ytor, text och kantlinjer och tre statusfärger. Fler än en accent gör det svårare att se vad som går att klicka på.

### Hur väljer jag ett färgschema till min webbplats?

Börja med din varumärkesaccent, tona neutrala gråtoner mot dess nyans, bestäm om temat ska vara ljust eller mörkt och kontrollera att varje textpar har minst 4,5:1 i kontrast.

### Vilket kontrastförhållande behöver text på en webbplats?

WCAG kräver minst 4,5:1 för normal text och 3:1 för stor text och gränssnittsdelar som kantlinjer på inmatningsfält.

### Ska en webbplatsbakgrund vara helt vit?

Det behöver den inte. Ett mycket svagt tonat off white känns ofta lugnare och låter vita kort framträda som ytor.

### Hur lägger jag till mörkt läge i mitt färgschema?

Definiera varje färgroll som en CSS-variabel och ange sedan en andra uppsättning värden i en mediefråga med `prefers-color-scheme: dark`.