Tints, toner och shades: så bygger du en färgskala

Tints, toner och shades är de tre sätten att ändra en färg utan att ändra dess nyans (hue). En tint är färgen blandad med vitt, så den blir ljusare och mjukare. En shade är färgen blandad med svart, så den blir djupare. En ton är färgen blandad med grått, så den blir tystare och mer dämpad. Tänk på tints, toner och shades som vitt, grått och svart tillsatt en nyans. Lägg en rad tints och shades i ordning och du har en färgskala: verktyget som gör en enda varumärkesfärg till något du faktiskt kan designa med.

Tint, ton och shade sida vid sida

Det enklaste sättet att se skillnaden är att utgå från en färg och pressa den åt tre håll. Här är basen en violett, #7c3aed, blandad i steg om 20 procent.

Vad tints, toner och shades gör med en design

Varje riktning ändrar stämningen lika mycket som färgen. Tints läses som milda, unga och öppna, vilket är varför pastellpaletter mest består av tints. Shades läses som rika, allvarliga och exklusiva, de mörka palettenas territorium. Toner läses som vuxna och naturliga, basen i nästan varje dämpad palett.

Så bygger du en färgskala av en hex

De flesta designsystem numrerar sin skala från 50 eller 100 (ljusast) till 900 (mörkast), med varumärkesfärgen någonstans nära 500. Konsekvens betyder mer än numren: varje färg i ditt system ska ha samma steg, så att 200 alltid betyder en ljus bakgrund och 700 alltid betyder text. Fem väl valda steg slår elva som ingen kan skilja åt, och du kan lägga till mellansteg när riktiga designer visar var de saknas.

1. 1

   Placera din varumärkesfärg

   Bestäm vilket steg den hör till. En mellanfärg som #7c3aed sitter på 500; en mycket mörk marinblå varumärkesfärg kan sitta på 800.

2. 2

   Gör den ljusa änden

   Blanda mot vitt för 400 ner till 50. Det ljusaste steget ska vara knappt färgat, ljust nog för en sidbakgrund.

3. 3

   Gör den mörka änden

   Blanda mot svart för 600 upp till 900. Det mörkaste steget ska vara mörkt nog för brödtext på det ljusaste.

4. 4

   Jämna ut stegen

   Titta på raden på avstånd. Om två grannar ser nästan identiska ut och ett annat gap ser ut som ett hopp, justera dem efter ögat.

5. 5

   Förskjut nyansen något i ändarna

   Ren svart kan få shades att se smutsiga ut. Många designers knuffar de mörka stegen några grader mot blått eller violett och de ljusa mot varmt.

6. 6

   Kontrollera paren som kommer att mötas

   Testa textsteg på bakgrundssteg för kontrast, med färgkontrast och tillgänglighet som guide.

Gör tints och shades i CSS

Du behöver inte längre räkna ut varje steg för hand. CSS color-mix() blandar två färger i ett valt färgrum, så en hel skala kan följa en variabel. Att blanda i OKLCH håller stegen jämnare för ögat än vanlig sRGB, en punkt som tas upp i OKLCH förklarat. Webbläsarstödet är brett; se color-mix() på MDN för 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);
}

Tints och shades i gradienter

De renaste gradienterna är ofta bara en nyans som rör sig från tint till shade. Eftersom inget korsar färghjulet finns det inget grått band i mitten, och resultatet läses som ljus som faller på ett enda material. Monokromatiska färgscheman använder samma idé för hela paletter.

En Gradiently-Mark fungerar på liknande sätt: ett recept av besläktade färger med ljus som löper genom. När du designar på en fördjupas eller ljusnar färgerna nära dina ord så att texten förblir läsbar utan en ruta bakom.