# Tailwind-kleuren: het palet gebruiken en uitbreiden

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

Het standaardpalet is een goed beginpunt en een slecht eindpunt, omdat duizenden sites het delen. Zo werken Tailwind-kleuren in v4 en zo voeg je je eigen toe zonder iets te breken.

## The short version

- Tailwind-kleuren zijn benoemde families zoals blue, violet en slate, elk met tinten van 50 voor de lichtste tot 950 voor de donkerste.
- In Tailwind v4 is elke kleur een css-variabele zoals `--color-blue-500`, gedefinieerd in OKLCH, en voeg je kleuren toe of vervang je ze in een `@theme`-blok in je css.
- Elke variabele die je `--color-something` noemt in `@theme` wordt een complete set utilities, waaronder `bg-something`, `text-something` en `border-something`.
- De dekkingsmodifier, zoals in `bg-sky-500/50`, werkt ook met eigen kleuren, omdat v4 de transparantie meemengt met `color-mix()`.
- Contrast hangt af van het paar, niet van het tintnummer, dus controleer combinaties van tekst en achtergrond in plaats van aan te nemen dat 500 op wit leesbaar is.

**Tailwind-kleuren** zijn een set benoemde families, van red tot rose plus een set grijzen zoals slate, gray, zinc, neutral en stone, elk met elf tinten genummerd 50, 100 tot 900 in honderdtallen en 950. Je past ze toe met utilities zoals `bg-blue-600`, `text-slate-900` en `border-rose-300`. In Tailwind v4 is het hele palet in OKLCH gedefinieerd als css-variabelen, die je uitbreidt of vervangt in een `@theme`-blok in plaats van in een JavaScript-configbestand.

## Hoe het standaardpalet is georganiseerd

Elke familie volgt dezelfde ladder. 50 tot 200 zijn tinten voor achtergronden en hover-vullingen, 300 en 400 zijn zachte accenten, 500 en 600 zijn het verzadigde midden en 700 tot 950 zijn voor tekst, randen en donkere vlakken. Omdat elke familie dezelfde stappen gebruikt, werkt `blue` vervangen door `violet` in een component meestal gewoon.

- 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

De blue-familie als sRGB-hex, uit het v3-palet. De v4-waarden zijn in OKLCH geschreven en iets levendiger op schermen met een breed kleurbereik, maar de ladder is dezelfde.

| Groep | Families | Typisch gebruik |
| --- | --- | --- |
| Grijzen | slate, gray, zinc, neutral, stone | Tekst, randen, vlakken |
| Warm | red, orange, amber, yellow | Meldingen, waarschuwingen, energie |
| Groenen | lime, green, emerald, teal | Succes, natuur, rust |
| Blauwen | cyan, sky, blue, indigo | Links, primaire acties |
| Paarsen en roze | violet, purple, fuchsia, pink, rose | Accenten, creatieve merken |

De standaardfamilies gegroepeerd op temperatuur. Slate en zinc neigen naar koel, stone naar warm en neutral heeft helemaal geen tint.

Kies één grijs en houd je eraan. `gray-500`-tekst combineren met `slate-200`-randen geeft een licht vuile uitstraling die moeilijk te benoemen en makkelijk te vermijden is.

## Tailwind-kleuren gebruiken in je opmaak

Er zijn kleurutilities voor bijna elke eigenschap die een kleur aanneemt: `bg-*`, `text-*`, `border-*`, `ring-*`, `fill-*`, `stroke-*`, `decoration-*`, `shadow-*`, `accent-*`, `caret-*` en de kleurstops van het kleurverloop `from-*`, `via-*` en `to-*`. Voeg een schuine streep en een getal toe om de dekking in te stellen.

```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>
```

Een donkere kaart uit één grijze familie plus één accent met 15% dekking. Willekeurige waarden tussen vierkante haken dekken de zeldzame uitzondering.

In v4 is elke tint ook een variabele die je in gewone css kunt gebruiken: `color: var(--color-slate-400)`. Zo styl je makkelijk widgets van derden, SVG of een canvas met dezelfde kleuren als je utilities.

## Eigen kleuren toevoegen in Tailwind v4

In v4 configureer je het thema in css. Elke variabele die begint met `--color-` binnen `@theme` wordt een kleur, met voor elke kleur alle utilities gegenereerd. Noem kleuren naar rol of merk en geef ze een volledige ladder als je tinten nodig hebt.

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

Nu bestaan `bg-ember-500`, `text-ink`, `border-ember-200/60` en `from-ember-400` allemaal.

- 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

De ember-ladder hierboven, omgezet naar hex. De tint op 45 houden en de helderheid stapsgewijs veranderen laat elke tint herkenbaar dezelfde kleur blijven.

De ladder in OKLCH bouwen is de reden dat dit werkt. Helderheid in OKLCH komt overeen met hoe helder een kleur eruitziet, dus gelijke stappen lijken gelijk, wat HSL niet kan beloven. [OKLCH uitgelegd](https://gradiently.design/nl/guide/oklch-explained) gaat dieper en [oklch.com](https://oklch.com) is een goede plek om waarden te proberen.

### Het palet helemaal vervangen

Om de standaardwaarden te verwijderen en alleen je eigen kleuren te houden, reset je eerst de namespace met `--color-*: initial;` bovenaan `@theme`. Utilities als `bg-blue-500` bestaan dan niet meer, wat een nuttige bescherming is bij een project met een strikt merk.

## Eigen kleuren in Tailwind v3

Oudere projecten configureren kleuren nog in JavaScript. Gebruik `extend` om kleuren naast de standaardwaarden toe te voegen, of stel `colors` rechtstreeks in om ze te vervangen.

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

De v3-manier. Als je upgradet, verhuizen deze naar `@theme` als `--color-ember-500` enzovoort.

## Contrast: welke tinten zijn veilig voor tekst

Tintnummers zijn geen contrastschaal. Witte tekst op `blue-600` haalt de 4,5:1 die WCAG voor lopende tekst vraagt, terwijl wit op `blue-500` dat niet haalt. Controleer het echte paar met de verhoudingen hieronder of een tool van [WebAIM](https://webaim.org/resources/contrastchecker/), en lees [kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility) voor de regels.

| Tekst op achtergrond | Contrast | Lopende tekst |
| --- | --- | --- |
| slate-900 op wit | 17,85:1 | Voldoet |
| gray-500 op wit | 4,83:1 | Voldoet nipt |
| gray-400 op wit | 2,54:1 | Voldoet niet |
| wit op blue-600 | 5,17:1 | Voldoet |
| wit op blue-500 | 3,68:1 | Alleen grote tekst |
| slate-400 op slate-900 | 6,96:1 | Voldoet |

Verhoudingen berekend uit de v3-hexwaarden. Reken ze opnieuw uit voor je exacte v4-kleuren, die iets verschillen.

## Maak het palet van jou

Het standaardpalet wordt op ontzettend veel sites gebruikt, en daarom delen zoveel producten dezelfde `indigo-600`-knop en `slate-50`-achtergrond. Die gelijkheid is de webversie van [waarom elke feed er hetzelfde uitziet](https://gradiently.design/nl/guide/why-every-feed-looks-the-same).

### Ziet eruit als elke andere site

- Standaard indigo of blauw als merkkleur
- Meerdere grijze families door elkaar
- Accentkleur op alles gebruikt
- Kleuren van het lichte thema hergebruikt in de donkere modus

### Ziet eruit als jij

- Eén eigen ladder op je eigen tint
- Eén grijs, getint naar de merktint
- Accent bewaard voor acties en één highlight
- Een apart gekozen donkere set, zie [kleurverlopen voor donkere modus](https://gradiently.design/nl/guide/dark-mode-gradients)

1. **Kies een tint** Begin bij je merkkleur en lees de tint af in OKLCH. [Kleurschema’s voor websites](https://gradiently.design/nl/guide/website-color-scheme) helpt als je er nog geen hebt.
2. **Bouw de ladder** Houd de tint vast, laat de helderheid van ongeveer 97% naar 22% lopen en verlaag de chroma aan beide uiteinden.
3. **Benoem ook rollen** Voeg `--color-ink`, `--color-paper` en vergelijkbare toe, zodat componenten zeggen waarvoor een kleur dient.
4. **Houd één bron aan** Behandel het `@theme`-blok als je [designtokens](https://gradiently.design/nl/guide/design-tokens) en hergebruik dezelfde waarden in je graphics.

De laatste stap is waar merken meestal afdwalen: de site krijgt de nieuwe ladder terwijl socialposts en slides de kleuren van vorig jaar houden. Een Gradiently-merkkit bewaart je paletten naast je lettertypen en logo’s, zodat de Designer posts indeelt in dezelfde kleuren als je Tailwind-thema, en een Mark geeft het merk een kleurverloopuitstraling die geen andere site deelt.

## FAQ

### Welke kleuren zitten standaard in Tailwind?

Families van red, orange, amber en yellow via groenen, blauwen, paarsen en roze tot rose, plus grijzen waaronder slate, gray, zinc, neutral en stone. Elk heeft tinten 50, 100 tot 900 en 950, plus zwart en wit.

### Hoe voeg ik eigen kleuren toe in Tailwind v4?

Definieer variabelen zoals `--color-brand-500` binnen een `@theme`-blok in je css. Tailwind genereert daaruit `bg-brand-500`, `text-brand-500` en elke andere kleurutility.

### Gebruikt Tailwind OKLCH?

Ja. Sinds v4 is het standaardpalet in OKLCH gedefinieerd en kun je je eigen kleuren schrijven in OKLCH, hex, RGB of een ander css-kleurformaat.

### Hoe gebruik ik een Tailwind-kleur in gewone css?

Gebruik in v4 de variabele rechtstreeks, bijvoorbeeld `var(--color-slate-400)`. Gebruik in v3 de functie `theme()`, zoals `theme(colors.slate.400)`.

### Welke Tailwind-tinten zijn toegankelijk voor tekst?

Dat hangt van het paar af. Op wit voldoen gray-500 en donkerder voor lopende tekst, en witte tekst voldoet op blue-600 maar niet op blue-500, dus controleer altijd de specifieke combinatie.