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

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.

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 mest av dem. Mørke varianter virker rike, alvorlige og eksklusive, som mørke paletter. Dempede varianter virker voksne og naturlige og danner grunnlaget for nesten alle dempede fargepaletter.

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

   Sjekk parene som skal møtes

   Test teksttrinn mot bakgrunnstrinn med fargekontrast og tilgjengelighet som veiledning.

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. Nettleserstøtten er bred; se color-mix() hos 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);
}

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 bruker samme idé for hele paletter.

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.