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

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

En varumärkesfärg räcker aldrig att designa med. Tints, toner och shades gör den till en hel familj, och en bra skala är det som låter en palett bära text, knappar, bakgrunder och diagram.

## The short version

- Tints, toner och shades är tre sätt att variera en färg: en tint tillför vitt, en ton tillför grått och en shade tillför svart.
- Tints känns ljusare och mjukare, toner känns lugnare och mer dämpade, och shades känns djupare och allvarligare.
- En färgskala är en rad av tints och shades av en nyans, oftast numrerad från 50 eller 100 för den ljusaste till 900 för den mörkaste.
- Att blanda i ett perceptuellt färgrum som OKLCH gör att skalans steg ser jämnt fördelade ut.
- En bra skala ger varje steg ett jobb, som bakgrunder, kanter, text och hovertillstånd, och kontrollerar kontrasten mellan de steg som kommer att mötas.

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

| Typ | Blandad med | Effekt | Exempel från #7c3aed |
| --- | --- | --- | --- |
| Tint | Vitt | Ljusare, mjukare, luftigare | `#b089f4` vid 40 procent vitt |
| Ton | Grått | Dämpad, lugnare, mer naturlig | `#7e64ac` vid 60 procent grått |
| Shade | Svart | Djupare, tyngre, allvarligare | `#4a238e` vid 40 procent svart |

Nyansen förblir violett i alla fall. Bara ljushet och mättnad ändras.

- Tint 90 %: #f2ebfd
- Tint 60 %: #cbb0f8
- Tint 20 %: #9661f1
- Basviolett: #7c3aed
- Shade 20 %: #632ebe
- Shade 60 %: #32175f
- Shade 80 %: #190c2f

Tints till vänster, shades till höger. Den här raden är redan det mesta av en användbar skala.

- Basviolett: #7c3aed
- Ton 20 %: #7d48d7
- Ton 40 %: #7e56c1
- Ton 60 %: #7e64ac
- Ton 80 %: #7f7296

Toner behåller ungefär samma ljushet och dränerar färg i stället, vilket är varför paletter byggda på toner känns lugna och vuxna.

## 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](https://gradiently.design/sv/guide/pastel-color-palettes) mest består av tints. Shades läses som rika, allvarliga och exklusiva, de [mörka palettenas](https://gradiently.design/sv/guide/dark-color-palettes) territorium. Toner läses som vuxna och naturliga, basen i nästan varje [dämpad palett](https://gradiently.design/sv/guide/muted-color-palettes).

- Tints: mjuka och öppna: `linear-gradient(135deg, #f2ebfd 0%, #cbb0f8 60%, #9661f1 100%)`
- Toner: lugna och vuxna: `linear-gradient(135deg, #b5a8cb 0%, #7e64ac 60%, #5f5079 100%)`
- Shades: djupa och allvarliga: `linear-gradient(135deg, #632ebe 0%, #32175f 60%, #190c2f 100%)`

Samma violett pressad åt tre håll. Tints lyfter stämningen, toner tystar den och shades ger den tyngd.

## 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. **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. **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. **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. **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. **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. **Kontrollera paren som kommer att mötas** Testa textsteg på bakgrundssteg för kontrast, med [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility) som guide.

| Steg | Hex | Typiskt jobb |
| --- | --- | --- |
| 50 | `#f2ebfd` | Sid- eller kortbakgrund |
| 100 | `#e5d8fb` | Diskreta fyllningar, markerade rader |
| 200 | `#cbb0f8` | Kanter, avdelare, inaktiverade tillstånd |
| 400 | `#9661f1` | Ikoner, stora dekorativa former |
| 500 | `#7c3aed` | Varumärkesfärg, primära knappar |
| 600 | `#632ebe` | Knapp vid hover, länkar |
| 700 | `#4a238e` | Rubriker på ljusa bakgrunder |
| 800 | `#32175f` | Brödtext på tints |
| 900 | `#190c2f` | Bakgrund i mörkt läge |

En violett skala med ett jobb för varje steg. Vitt på 500 är cirka 5,7:1 och steg 800 på steg 100 är cirka 10,9:1, båda över riktvärdet 4,5:1.

## 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](https://gradiently.design/sv/guide/oklch-explained). Webbläsarstödet är brett; se [color-mix() på MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) för 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);
}
```

Ändra `--brand` så uppdateras varje tint, shade och ton med den.

## 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](https://gradiently.design/sv/guide/monochromatic-color-scheme) använder samma idé för hela paletter.

- Violett, från tint till shade: `linear-gradient(160deg, #f2ebfd 0%, #9661f1 50%, #32175f 100%)`
- Violett, belyst uppifrån: `radial-gradient(circle at 30% 25%, #cbb0f8 0%, #7c3aed 45%, #190c2f 100%)`
- Terrakotta, från tint till shade: `linear-gradient(135deg, #fae8e1 0%, #e0663a 55%, #5a2917 100%)`
- Lila tint till violett ton: `linear-gradient(135deg, #e5d8fb 0%, #7f7296 100%)`

Gradienter med en nyans. Var och en lånar bara från sin egen skala.

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.

## FAQ

### Vad är skillnaden mellan en tint, en ton och en shade?

En tint är en färg blandad med vitt, en ton är en färg blandad med grått och en shade är en färg blandad med svart.

### Är en pastell en tint?

Ja. Pasteller är tints: färger som ljusats med mycket vitt, vilket gör dem mjuka och låga i intensitet.

### Hur många steg ska en färgskala ha?

De flesta designsystem använder nio till elva steg, numrerade 50 eller 100 till 900. Färre steg kan fungera för små projekt, så länge varje steg har ett tydligt jobb.

### Hur gör jag en mörkare shade av en färg i CSS?

Använd `color-mix(in oklch, dinfärg 70%, black)` och justera procenttalet. Lägre procenttal ger mörkare shades.

### Varför ser mina shades smutsiga ut?

Att blanda med ren svart dränerar också mättnad. Blanda i OKLCH och prova att knuffa de mörkaste stegen lite mot blått eller violett för att hålla dem rika.