# Lyse, dempede og mørke farger: bygg en fargeskala

[Canonical HTML page](https://gradiently.design/nb/guide/tints-tones-shades)

Én merkevarefarge er aldri nok å designe med. Lyse, dempede og mørke varianter gir en hel familie, og en god skala lar paletten bære tekst, knapper, bakgrunner og diagrammer.

## The short version

- En farge kan varieres på tre måter: en lys variant tilsetter hvitt, en dempet variant tilsetter grått og en mørk variant tilsetter svart.
- Lyse varianter virker mykere, dempede varianter roligere og mindre mettede, og mørke varianter dypere og mer alvorlige.
- En fargeskala er en rad lyse og mørke varianter av én fargetone, gjerne nummerert fra 50 eller 100 for lysest til 900 for mørkest.
- Blanding i et perseptuelt fargerom som OKLCH får trinnene til å virke jevnt fordelt.
- En god skala gir hvert trinn en oppgave, som bakgrunn, kanter, tekst og svevetilstander, og sjekker kontrast mellom trinnene som skal møtes.

**Lyse, dempede og mørke farger** er tre måter å endre en farge uten å bytte fargetone. En **lys variant**, eller tint, blander fargen med hvitt og gjør den lysere og mykere. En **mørk variant**, eller shade, blander den med svart og gir mer dybde. En **dempet variant**, eller tone, blander den med grått og gjør den roligere og mindre mettet. Tenk på dem som hvitt, grått og svart tilsatt én fargetone. Ordner du lyse og mørke varianter i rekkefølge, får du en fargeskala: verktøyet som gjør én merkevarefarge brukbar til design.

## Lyse, dempede og mørke varianter side om side

Enkleste måte å se forskjellen på er å starte med én farge og trekke den i tre retninger. Her er grunnfargen fiolett, `#7c3aed`, blandet i trinn på 20 prosent.

| Type | Blandet med | Effekt | Eksempel fra #7c3aed |
| --- | --- | --- | --- |
| Lys variant | Hvitt | Lysere, mykere, luftigere | `#b089f4` ved 40 prosent hvitt |
| Dempet variant | Grått | Dempet, roligere, mer naturlig | `#7e64ac` ved 60 prosent grått |
| Mørk variant | Svart | Dypere, tyngre, mer alvorlig | `#4a238e` ved 40 prosent svart |

Fargetonen forblir fiolett i alle tilfeller. Bare lyshet og metning endres.

- Lys 90 %: #f2ebfd
- Lys 60 %: #cbb0f8
- Lys 20 %: #9661f1
- Grunnfiolett: #7c3aed
- Mørk 20 %: #632ebe
- Mørk 60 %: #32175f
- Mørk 80 %: #190c2f

Lyse varianter til venstre, mørke til høyre. Raden er allerede det meste av en brukbar skala.

- Grunnfiolett: #7c3aed
- Dempet 20 %: #7d48d7
- Dempet 40 %: #7e56c1
- Dempet 60 %: #7e64ac
- Dempet 80 %: #7f7296

Dempede varianter holder omtrent samme lyshet og tapper heller farge. Derfor virker slike paletter rolige og voksne.

## Hva variantene gjør med et design

Hver retning endrer stemningen like mye som fargen. Lyse varianter virker milde, unge og åpne, derfor består [pastellpaletter](https://gradiently.design/nb/guide/pastel-color-palettes) mest av dem. Mørke varianter virker rike, alvorlige og eksklusive, som [mørke paletter](https://gradiently.design/nb/guide/dark-color-palettes). Dempede varianter virker voksne og naturlige og danner grunnlaget for nesten alle [dempede fargepaletter](https://gradiently.design/nb/guide/muted-color-palettes).

- Lyse: myke og åpne: `linear-gradient(135deg, #f2ebfd 0%, #cbb0f8 60%, #9661f1 100%)`
- Dempede: rolige og voksne: `linear-gradient(135deg, #b5a8cb 0%, #7e64ac 60%, #5f5079 100%)`
- Mørke: dype og alvorlige: `linear-gradient(135deg, #632ebe 0%, #32175f 60%, #190c2f 100%)`

Samme fiolett i tre retninger. Lyse varianter løfter stemningen, dempede roer den og mørke gir tyngde.

## Bygg en fargeskala fra én hex-kode

De fleste designsystemer nummererer skalaen fra 50 eller 100 (lysest) til 900 (mørkest), med merkevarefargen nær 500. Sammenheng betyr mer enn tallene: alle farger bør ha samme trinn, så `200` alltid betyr lys bakgrunn og `700` alltid betyr tekst. Fem gode trinn slår elleve ingen kan skille. Mellomtrinn kan legges til når ekte design viser hvor de mangler.

1. **Plasser merkevarefargen** Bestem hvilket trinn den tilhører. En mellomfarge som `#7c3aed` ligger på 500; svært mørk marineblå kan ligge på 800.
2. **Lag den lyse enden** Bland mot hvitt fra 400 ned til 50. Lyseste trinn bør knapt ha farge og være lyst nok som sidebakgrunn.
3. **Lag den mørke enden** Bland mot svart fra 600 opp til 900. Mørkeste trinn bør kunne brukes som brødtekst på det lyseste.
4. **Jevn ut trinnene** Se raden på avstand. Hvis naboer virker nesten like og et annet mellomrom er et hopp, juster på øyemål.
5. **Skift fargetone litt i endene** Rent svart kan gjøre mørke varianter skitne. Mange designere trekker de mørke trinnene noen grader mot blått eller fiolett og de lyse mot varme toner.
6. **Sjekk parene som skal møtes** Test teksttrinn mot bakgrunnstrinn med [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) som veiledning.

| Trinn | Hex | Vanlig oppgave |
| --- | --- | --- |
| 50 | `#f2ebfd` | Side- eller kortbakgrunn |
| 100 | `#e5d8fb` | Svake fyll, valgte rader |
| 200 | `#cbb0f8` | Kanter, skillelinjer, deaktiverte tilstander |
| 400 | `#9661f1` | Ikoner, store dekorative former |
| 500 | `#7c3aed` | Merkevarefarge, hovedknapper |
| 600 | `#632ebe` | Svevetilstand på knapper, lenker |
| 700 | `#4a238e` | Overskrifter på lyse bakgrunner |
| 800 | `#32175f` | Brødtekst på lyse varianter |
| 900 | `#190c2f` | Bakgrunn i mørk modus |

En fiolett skala med oppgave til hvert trinn. Hvitt på 500 er omtrent 5,7:1 og trinn 800 på 100 omtrent 10,9:1, begge over kravet på 4,5:1.

## Lag lyse og mørke varianter i CSS

Du trenger ikke lenger beregne hvert trinn for hånd. CSS `color-mix()` blander to farger i et valgt fargerom, så hele skalaen kan følge én variabel. Blanding i OKLCH gir visuelt jevnere trinn enn vanlig sRGB, som forklart i [OKLCH](https://gradiently.design/nb/guide/oklch-explained). Nettleserstøtten er bred; se [color-mix() hos MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) for detaljer.

```css
:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}
```

Endre `--brand`, og alle lyse, mørke og dempede varianter oppdateres.

## Lyse og mørke varianter i gradienter

De reneste gradientene er ofte én fargetone fra lys til mørk variant. Siden ingenting krysser fargesirkelen, får du ikke et grått bånd i midten. Resultatet ser ut som lys på ett materiale. [Monokromatiske fargeoppsett](https://gradiently.design/nb/guide/monochromatic-color-scheme) bruker samme idé for hele paletter.

- Fiolett, lyst til mørkt: `linear-gradient(160deg, #f2ebfd 0%, #9661f1 50%, #32175f 100%)`
- Fiolett, belyst ovenfra: `radial-gradient(circle at 30% 25%, #cbb0f8 0%, #7c3aed 45%, #190c2f 100%)`
- Terrakotta, lyst til mørkt: `linear-gradient(135deg, #fae8e1 0%, #e0663a 55%, #5a2917 100%)`
- Lys lilla til dempet fiolett: `linear-gradient(135deg, #e5d8fb 0%, #7f7296 100%)`

Blandinger med én fargetone. Hver bruker bare sin egen skala.

En Gradiently Mark fungerer lignende: en oppskrift av beslektede farger med lys gjennom. Når du designer på den, mørkner eller lysner fargene nær ordene så teksten forblir lesbar uten en boks bak.

## FAQ

### Hva er forskjellen mellom tint, tone og shade?

Tint er en farge blandet med hvitt, tone med grått og shade med svart: lys, dempet og mørk variant.

### Er en pastell en lys variant?

Ja. Pasteller er farger lysnet med mye hvitt, som gjør dem myke og lite intense.

### Hvor mange trinn bør en fargeskala ha?

De fleste designsystemer bruker ni til elleve trinn, nummerert 50 eller 100 til 900. Færre kan fungere i små prosjekter hvis hvert trinn har en tydelig oppgave.

### Hvordan lager jeg en mørkere fargevariant i CSS?

Bruk `color-mix(in oklch, yourcolour 70%, black)` og juster prosenten. Lavere prosent gir mørkere varianter.

### Hvorfor blir de mørke variantene grumsete?

Blanding med rent svart tapper også metning. Bland i OKLCH og prøv å trekke mørkeste trinn litt mot blått eller fiolett for å beholde fylden.