# Toning, tone og skygge: sådan bygger du en farveskala

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

Én brandfarve er aldrig nok at designe med. Toninger, toner og skygger gør den til en hel familie, og en god skala er det, der lader en palet bære tekst, knapper, baggrunde og diagrammer.

## The short version

- Toninger, toner og skygger er tre måder at variere én farve på: en toning tilsætter hvid, en tone tilsætter grå, og en skygge tilsætter sort.
- Toninger føles lettere og blødere, toner føles roligere og mere dæmpede, og skygger føles dybere og mere alvorlige.
- En farveskala er en række toninger og skygger af én kulør, typisk nummereret fra 50 eller 100 for den lyseste til 900 for den mørkeste.
- Blanding i et perceptuelt farverum som OKLCH får trinnene i en skala til at se jævnt fordelte ud.
- En god skala giver hvert trin en opgave, som baggrunde, kanter, tekst og hover-tilstande, og tjekker kontrasten mellem de trin, der skal mødes.

**Toninger, toner og skygger** er de tre måder at ændre en farve på uden at ændre dens kulør. En **toning** er farven blandet med hvid, så den bliver lysere og blødere. En **skygge** er farven blandet med sort, så den bliver dybere. En **tone** er farven blandet med grå, så den bliver stillere og mere dæmpet. Tænk på toninger, toner og skygger som hvid, grå og sort tilsat én kulør. Sæt en række toninger og skygger i orden, og du har en farveskala: det værktøj, der gør en enkelt brandfarve til noget, du faktisk kan designe med.

## Toning, tone og skygge side om side

Den nemmeste måde at se forskellen på er at starte med én farve og skubbe den i tre retninger. Her er udgangspunktet en violet, `#7c3aed`, blandet i trin på 20 procent.

| Type | Blandet med | Virkning | Eksempel ud fra #7c3aed |
| --- | --- | --- | --- |
| Toning | Hvid | Lysere, blødere, luftigere | `#b089f4` ved 40 procent hvid |
| Tone | Grå | Dæmpet, roligere, mere naturlig | `#7e64ac` ved 60 procent grå |
| Skygge | Sort | Dybere, tungere, mere alvorlig | `#4a238e` ved 40 procent sort |

Kuløren forbliver violet i alle tilfælde. Kun lyshed og mætning ændrer sig.

- Toning 90 %: #f2ebfd
- Toning 60 %: #cbb0f8
- Toning 20 %: #9661f1
- Grundviolet: #7c3aed
- Skygge 20 %: #632ebe
- Skygge 60 %: #32175f
- Skygge 80 %: #190c2f

Toninger til venstre, skygger til højre. Denne række er allerede det meste af en brugbar skala.

- Grundviolet: #7c3aed
- Tone 20 %: #7d48d7
- Tone 40 %: #7e56c1
- Tone 60 %: #7e64ac
- Tone 80 %: #7f7296

Toner bevarer nogenlunde samme lyshed og dræner i stedet farven, og derfor føles paletter bygget på toner rolige og voksne.

## Hvad toninger, toner og skygger gør ved et design

Hver retning ændrer stemningen lige så meget som farven. Toninger læses som blide, unge og åbne, og derfor er [pastelfarvepaletter](https://gradiently.design/da/guide/pastel-color-palettes) mest toninger. Skygger læses som fyldige, alvorlige og eksklusive, [mørke farvepaletters](https://gradiently.design/da/guide/dark-color-palettes) territorium. Toner læses som voksne og naturlige, grundlaget for næsten enhver [dæmpet farvepalet](https://gradiently.design/da/guide/muted-color-palettes).

- Toninger: bløde og åbne: `linear-gradient(135deg, #f2ebfd 0%, #cbb0f8 60%, #9661f1 100%)`
- Toner: rolige og voksne: `linear-gradient(135deg, #b5a8cb 0%, #7e64ac 60%, #5f5079 100%)`
- Skygger: dybe og alvorlige: `linear-gradient(135deg, #632ebe 0%, #32175f 60%, #190c2f 100%)`

Samme violet skubbet i tre retninger. Toninger løfter stemningen, toner dæmper den, og skygger giver den tyngde.

## Sådan bygger du en farveskala ud fra én hexkode

De fleste designsystemer nummererer deres skala fra 50 eller 100 (lysest) til 900 (mørkest), med brandfarven et sted omkring 500. Konsekvens betyder mere end tallene: alle farver i dit system bør have de samme trin, så `200` altid betyder en lys baggrund og `700` altid betyder tekst. Fem velvalgte trin slår elleve, som ingen kan skelne fra hinanden, og du kan tilføje mellemtrinnene, når rigtige design viser, hvor de mangler.

1. **Placer din brandfarve** Beslut, hvilket trin den hører til. En mellemfarve som `#7c3aed` sidder ved 500; en meget mørk marineblå brandfarve kan sidde ved 800.
2. **Lav den lyse ende** Bland mod hvid for 400 ned til 50. Det lyseste trin skal næsten ikke have farve, lyst nok til en sidebaggrund.
3. **Lav den mørke ende** Bland mod sort for 600 op til 900. Det mørkeste trin skal være mørkt nok til brødtekst på det lyseste.
4. **Jævn trinnene ud** Se på rækken på afstand. Ligner to naboer næsten hinanden, og ligner et andet mellemrum et spring, så juster dem efter øjemål.
5. **Skub kuløren lidt i enderne** Ren sort kan få skygger til at se beskidte ud. Mange designere skubber de mørke trin et par grader mod blå eller violet og de lyse mod varmt.
6. **Tjek de par, der skal mødes** Test teksttrin på baggrundstrin for kontrast, med [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) som rettesnor.

| Trin | Hex | Typisk opgave |
| --- | --- | --- |
| 50 | `#f2ebfd` | Side- eller kortbaggrund |
| 100 | `#e5d8fb` | Diskrete udfyldninger, valgte rækker |
| 200 | `#cbb0f8` | Kanter, skillelinjer, deaktiverede tilstande |
| 400 | `#9661f1` | Ikoner, store dekorative former |
| 500 | `#7c3aed` | Brandfarve, primære knapper |
| 600 | `#632ebe` | Knap ved hover, links |
| 700 | `#4a238e` | Overskrifter på lyse baggrunde |
| 800 | `#32175f` | Brødtekst på toninger |
| 900 | `#190c2f` | Baggrund i mørk tilstand |

En violet skala med en opgave til hvert trin. Hvid på 500 er cirka 5,7:1, og trin 800 på trin 100 er cirka 10,9:1, begge over retningslinjen på 4,5:1.

## Lav toninger og skygger i CSS

Du behøver ikke længere at beregne hvert trin i hånden. CSS `color-mix()` blander to farver i et valgt farverum, så en hel skala kan følge én variabel. Blanding i OKLCH holder trinnene mere jævne for øjet end almindelig sRGB, en pointe, der gennemgås i [OKLCH forklaret](https://gradiently.design/da/guide/oklch-explained). Browserunderstøttelsen er bred; se [color-mix() på 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);
}
```

Skift `--brand`, og alle toninger, skygger og toner opdateres med den.

## Toninger og skygger i gradienter

De reneste gradienter er ofte bare én kulør, der bevæger sig fra toning til skygge. Fordi intet krydser farvecirklen, er der intet gråt bånd i midten, og resultatet læses som lys, der falder på ét enkelt materiale. [Monokromatiske farveskemaer](https://gradiently.design/da/guide/monochromatic-color-scheme) bruger samme idé til hele paletter.

- Violet, toning til skygge: `linear-gradient(160deg, #f2ebfd 0%, #9661f1 50%, #32175f 100%)`
- Violet, belyst ovenfra: `radial-gradient(circle at 30% 25%, #cbb0f8 0%, #7c3aed 45%, #190c2f 100%)`
- Terrakotta, toning til skygge: `linear-gradient(135deg, #fae8e1 0%, #e0663a 55%, #5a2917 100%)`
- Syrenfarvet toning til violet tone: `linear-gradient(135deg, #e5d8fb 0%, #7f7296 100%)`

Blandinger i én kulør. Hver låner kun fra sin egen skala.

En Gradiently Mark virker på lignende måde: en opskrift på beslægtede farver med lys, der løber igennem den. Når du designer på en, bliver farverne nær dine ord dybere eller lysere, så teksten forbliver læsbar uden en boks bagved.

## FAQ

### Hvad er forskellen på en toning, en tone og en skygge?

En toning er en farve blandet med hvid, en tone er en farve blandet med grå, og en skygge er en farve blandet med sort.

### Er en pastelfarve en toning?

Ja. Pastelfarver er toninger: farver lysnet med meget hvid, hvilket gør dem bløde og lave i intensitet.

### Hvor mange trin skal en farveskala have?

De fleste designsystemer bruger ni til elleve trin, nummereret 50 eller 100 til 900. Færre trin kan fungere i små projekter, så længe hvert trin har en klar opgave.

### Hvordan laver jeg en mørkere nuance af en farve i CSS?

Brug `color-mix(in oklch, yourcolour 70%, black)`, og juster procenten. Lavere procenter giver mørkere skygger.

### Hvorfor ser mine skygger mudrede ud?

Blanding med ren sort dræner også mætningen. Bland i OKLCH, og prøv at skubbe de mørkeste trin en smule mod blå eller violet for at holde dem fyldige.