# Tailwind-värit: paletin käyttö ja laajentaminen

[Canonical HTML page](https://gradiently.design/fi/guide/tailwind-colors)

Oletuspaletti on hyvä lähtökohta mutta huono lopputulos, sillä tuhannet sivustot käyttävät sitä. Näin Tailwind-värit toimivat v4:ssä ja näin lisäät omasi rikkomatta mitään.

## The short version

- Tailwind-värit ovat nimettyjä väriperheitä, kuten blue, violet ja slate. Jokaisessa on sävyjä vaaleimmasta 50:stä tummimpaan 950:een.
- Tailwind v4:ssä jokainen väri on OKLCH-muodossa määritelty CSS-muuttuja, kuten `--color-blue-500`. Värit lisätään tai korvataan CSS:n `@theme`-lohkossa.
- Jokainen `@theme`-lohkossa nimeämäsi `--color-something`-muuttuja tuottaa täyden joukon apuluokkia, kuten `bg-something`, `text-something` ja `border-something`.
- Peittävyyden muokkain, kuten `bg-sky-500/50`, toimii myös omilla väreillä, sillä v4 sekoittaa läpinäkyvyyden mukaan `color-mix()`-funktiolla.
- Kontrasti riippuu väriparista, ei sävyn numerosta. Tarkista tekstin ja taustan yhdistelmät sen sijaan, että olettaisit arvon 500 erottuvan valkoisella.

**Tailwind-värit** ovat joukko nimettyjä perheitä redistä roseen sekä harmaita, kuten slate, gray, zinc, neutral ja stone. Jokaisessa on yksitoista sävyä: 50, sadan välein 100:sta 900:aan sekä 950. Käytät niitä apuluokilla, kuten `bg-blue-600`, `text-slate-900` ja `border-rose-300`. Tailwind v4:ssä koko paletti määritellään OKLCH-muotoisina CSS-muuttujina, joita laajennat tai korvaat `@theme`-lohkossa JavaScript-asetustiedoston sijaan.

## Miten oletuspaletti rakentuu

Jokainen perhe noudattaa samaa asteikkoa. Arvot 50:stä 200:aan ovat vaaleita sävyjä taustoihin ja osoittimen alla näkyviin täyttöihin. 300 ja 400 ovat pehmeitä tehosteita, 500 ja 600 kylläinen keskialue ja 700:sta 950:een sopivat tekstiin, reunuksiin ja tummiin pintoihin. Koska perheissä on samat portaat, `blue`-arvon vaihtaminen komponentissa `violet`-arvoksi yleensä toimii suoraan.

- blue-100: #dbeafe
- blue-200: #bfdbfe
- blue-300: #93c5fd
- blue-400: #60a5fa
- blue-500: #3b82f6
- blue-600: #2563eb
- blue-700: #1d4ed8
- blue-800: #1e40af
- blue-900: #1e3a8a
- blue-950: #172554

blue-perhe v3-paletin sRGB-hex-arvoina. v4:n arvot kirjoitetaan OKLCH-muodossa ja ovat hieman elävämpiä laajan väriavaruuden näytöillä, mutta asteikko on sama.

| Ryhmä | Perheet | Tyypillinen käyttö |
| --- | --- | --- |
| Harmaat | slate, gray, zinc, neutral, stone | Teksti, reunukset, pinnat |
| Lämpimät | red, orange, amber, yellow | Hälytykset, varoitukset, energia |
| Vihreät | lime, green, emerald, teal | Onnistuminen, luonto, rauhallisuus |
| Siniset | cyan, sky, blue, indigo | Linkit, ensisijaiset toiminnot |
| Violetit ja pinkit | violet, purple, fuchsia, pink, rose | Tehosteet, luovat brändit |

Oletusperheet ryhmiteltyinä lämpötilan mukaan. Slate ja zinc ovat viileitä, stone lämpimään taittava ja neutral täysin sävytön.

Valitse yksi harmaa ja pysy siinä. `gray-500`-tekstin ja `slate-200`-reunusten yhdistäminen tuottaa hieman likaisen vaikutelman, jota on vaikea nimetä mutta helppo välttää.

## Tailwind-värien käyttö merkintäkielessä

Väriapuluokkia on lähes jokaiselle väriä käyttävälle ominaisuudelle: `bg-*`, `text-*`, `border-*`, `ring-*`, `fill-*`, `stroke-*`, `decoration-*`, `shadow-*`, `accent-*`, `caret-*` sekä liukuvärin pisteet `from-*`, `via-*` ja `to-*`. Lisää kauttaviiva ja luku peittävyyden asettamiseksi.

```html
<div class="rounded-xl bg-slate-900 p-6 text-slate-100">
  <p class="text-sm text-slate-400">Status</p>
  <p class="text-2xl font-semibold">All systems normal</p>
  <span class="mt-4 inline-flex rounded-full bg-emerald-500/15 px-3 py-1 text-emerald-300">
    Live
  </span>
</div>

<!-- One off values when nothing in the palette fits -->
<button class="bg-[#0b5c4a] text-[oklch(97%_0.02_160)]">Book a table</button>
```

Tumma kortti yhdestä harmaaperheestä ja yhdestä tehosteesta 15% peittävyydellä. Hakasulkeissa olevat omat arvot kattavat harvinaiset poikkeukset.

v4:ssä jokainen sävy on myös muuttuja, jota voit käyttää tavallisessa CSS:ssä: `color: var(--color-slate-400)`. Sillä on helppo tyylitellä kolmansien osapuolten pienoisohjelmia, SVG:tä tai canvasia samoilla väreillä kuin apuluokkasi.

## Omien värien lisääminen Tailwind v4:ään

v4:ssä teema määritellään CSS:llä. Jokainen `@theme`-lohkon `--color-`-alkuinen muuttuja muuttuu väriksi, jolle luodaan kaikki apuluokat. Nimeä värit tehtävän tai brändin mukaan ja anna niille täysi asteikko, jos tarvitset vaaleita sävyjä.

```css
@import "tailwindcss";

@theme {
  /* A brand ramp on one hue, written in OKLCH */
  --color-ember-50: oklch(97% 0.02 45);
  --color-ember-100: oklch(94% 0.04 45);
  --color-ember-200: oklch(88% 0.07 45);
  --color-ember-300: oklch(80% 0.11 45);
  --color-ember-400: oklch(71% 0.15 45);
  --color-ember-500: oklch(63% 0.17 45);
  --color-ember-600: oklch(55% 0.16 45);
  --color-ember-700: oklch(47% 0.14 45);
  --color-ember-800: oklch(39% 0.11 45);
  --color-ember-900: oklch(31% 0.08 45);
  --color-ember-950: oklch(22% 0.05 45);

  /* Single role colours */
  --color-ink: oklch(18% 0.02 270);
  --color-paper: oklch(98% 0.01 85);
}
```

Nyt `bg-ember-500`, `text-ink`, `border-ember-200/60` ja `from-ember-400` ovat kaikki käytettävissä.

- ember-50: #fff1ea
- ember-200: #ffcab2
- ember-300: #f9a782
- ember-400: #ec7f4b
- ember-500: #d95f19
- ember-600: #b94a00
- ember-700: #973900
- ember-900: #502007
- ember-950: #2d1205

Yllä oleva ember-asteikko hex-muotoon muunnettuna. Sävykulman pitäminen arvossa 45 ja vaaleuden porrastaminen pitää jokaisen sävyn tunnistettavasti samana värinä.

Asteikon rakentaminen OKLCH:lla saa tämän toimimaan. OKLCH:n vaaleus vastaa sitä, kuinka kirkkaalta väri näyttää. Siksi yhtä suuret askeleet näyttävät yhtä suurilta, mitä HSL ei voi luvata. [OKLCH selitettynä](https://gradiently.design/fi/guide/oklch-explained) syventää aihetta, ja [oklch.com](https://oklch.com) sopii arvojen kokeiluun.

### Koko paletin korvaaminen

Poista oletukset ja säilytä vain omat värisi nollaamalla nimiavaruus ensin rivillä `--color-*: initial;` `@theme`-lohkon alussa. Silloin `bg-blue-500`-tyyppiset apuluokat lakkaavat olemasta, mikä on hyödyllinen suojakeino tiukkaa brändiä noudattavassa projektissa.

## Omat värit Tailwind v3:ssa

Vanhemmat projektit määrittelevät värit yhä JavaScriptillä. Lisää värejä oletusten rinnalle `extend`-avaimella tai korvaa oletukset määrittämällä `colors` suoraan.

```js
// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        ember: {
          50: '#fff1ea',
          500: '#d95f19',
          900: '#502007',
        },
        ink: '#14121f',
      },
    },
  },
}
```

v3:n tapa. Päivityksessä nämä siirtyvät `@theme`-lohkoon muodossa `--color-ember-500` ja niin edelleen.

## Kontrasti: mitkä sävyt sopivat tekstiin

Sävynumerot eivät ole kontrastiasteikko. Valkoinen teksti `blue-600`-taustalla täyttää WCAG:n leipätekstiltä vaatiman 4,5:1-suhteen, valkoinen `blue-500`-taustalla ei. Tarkista todellinen pari alla olevilla suhteilla tai [WebAIMin](https://webaim.org/resources/contrastchecker/) työkalulla. Säännöt löydät artikkelista [värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility).

| Teksti taustalla | Kontrasti | Leipäteksti |
| --- | --- | --- |
| slate-900 valkoisella | 17,85:1 | Täyttää vaatimuksen |
| gray-500 valkoisella | 4,83:1 | Täyttää juuri vaatimuksen |
| gray-400 valkoisella | 2,54:1 | Ei täytä vaatimusta |
| Valkoinen blue-600-taustalla | 5,17:1 | Täyttää vaatimuksen |
| Valkoinen blue-500-taustalla | 3,68:1 | Vain suurelle tekstille |
| slate-400 slate-900-taustalla | 6,96:1 | Täyttää vaatimuksen |

Suhteet on laskettu v3:n hex-arvoista. Laske ne uudelleen omille v4-väreillesi, jotka eroavat hieman.

## Tee paletista omasi

Oletuspalettia käytetään valtavalla määrällä sivustoja. Siksi niin monessa tuotteessa on sama `indigo-600`-painike ja `slate-50`-tausta. Tämä samankaltaisuus on verkkoversio ilmiöstä [miksi jokainen syöte näyttää samalta](https://gradiently.design/fi/guide/why-every-feed-looks-the-same).

### Näyttää kaikilta muilta sivustoilta

- Oletusindigo tai -sininen brändivärinä
- Useita harmaaperheitä sekaisin
- Tehosteväri kaikessa
- Vaalean teeman värit uudelleen tummassa tilassa

### Näyttää omaltasi

- Yksi oma asteikko omalla sävykulmallasi
- Yksi harmaa, joka taittuu brändin sävyyn
- Tehoste vain toiminnoissa ja yhdessä korostuksessa
- Erikseen valittu tumma värijoukko, katso [tumman tilan liukuvärit](https://gradiently.design/fi/guide/dark-mode-gradients)

1. **Valitse sävykulma** Aloita brändiväristäsi ja lue sen sävykulma OKLCH:ssa. [Verkkosivun värimaailmat](https://gradiently.design/fi/guide/website-color-scheme) auttaa, jos sinulla ei vielä ole sellaista.
2. **Rakenna asteikko** Pidä sävykulma samana, porrasta vaaleus noin 97%:sta 22%:iin ja laske värikylläisyyttä molemmissa päissä.
3. **Nimeä myös tehtävät** Lisää `--color-ink`, `--color-paper` ja vastaavia, jotta komponentit kertovat, mihin väriä käytetään.
4. **Pidä yksi lähde** Käsittele `@theme`-lohkoa [design-tokeneinasi](https://gradiently.design/fi/guide/design-tokens) ja käytä samoja arvoja grafiikassasi.

Viimeisessä vaiheessa brändi yleensä alkaa hajota: sivusto saa uuden asteikon, mutta somejulkaisut ja diat säilyttävät viime vuoden värit. Gradientlyn brändipaketti tallentaa palettisi fonttien ja logojen rinnalle, joten Designer asettelee julkaisut samoilla väreillä kuin Tailwind-teemasi. Mark antaa brändille liukuväri-ilmeen, jota mikään muu sivusto ei jaa.

## FAQ

### Mitä värejä Tailwindissa on oletuksena?

Perheet red, orange, amber ja yellow, niiden jälkeen vihreät, siniset, violetit ja pinkit roseen asti sekä harmaat slate, gray, zinc, neutral ja stone. Jokaisessa on sävyt 50, 100:sta 900:aan ja 950, ja lisäksi ovat musta ja valkoinen.

### Miten lisään omia värejä Tailwind v4:ään?

Määrittele CSS:n `@theme`-lohkoon muuttujia, kuten `--color-brand-500`. Tailwind luo siitä `bg-brand-500`-, `text-brand-500`- ja kaikki muut väriapuluokat.

### Käyttääkö Tailwind OKLCH:ta?

Kyllä. v4:stä lähtien oletuspaletti on määritelty OKLCH:lla. Voit kirjoittaa omat värisi OKLCH-, hex-, RGB- tai millä tahansa muulla CSS-värimuodolla.

### Miten käytän Tailwind-väriä tavallisessa CSS:ssä?

Käytä v4:ssä muuttujaa suoraan, esimerkiksi `var(--color-slate-400)`. Käytä v3:ssa `theme()`-funktiota, kuten `theme(colors.slate.400)`.

### Mitkä Tailwind-sävyt sopivat saavutettavaan tekstiin?

Se riippuu parista. Valkoisella gray-500 ja tummemmat täyttävät leipätekstin vaatimuksen, ja valkoinen teksti täyttää sen blue-600-taustalla mutta ei blue-500-taustalla. Tarkista siis aina tietty yhdistelmä.