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

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.

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 mest toninger. Skygger læses som fyldige, alvorlige og eksklusive, mørke farvepaletters territorium. Toner læses som voksne og naturlige, grundlaget for næsten enhver dæmpet farvepalet.

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. 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. 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. 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. 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. 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. 6

   Tjek de par, der skal mødes

   Test teksttrin på baggrundstrin for kontrast, med farvekontrast og tilgængelighed som rettesnor.

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. Browserunderstøttelsen er bred; se color-mix() på MDN for detaljer.

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

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 bruger samme idé til hele paletter.

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.