Tailwind-kleuren: het palet gebruiken en uitbreiden

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.

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.

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

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.

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

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 gaat dieper en 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.

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

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, en lees kleurcontrast en toegankelijkheid voor de regels.

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.

1. 1

   Kies een tint

   Begin bij je merkkleur en lees de tint af in OKLCH. Kleurschema’s voor websites helpt als je er nog geen hebt.

2. 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. 3

   Benoem ook rollen

   Voeg --color-ink, --color-paper en vergelijkbare toe, zodat componenten zeggen waarvoor een kleur dient.

4. 4

   Houd één bron aan

   Behandel het @theme-blok als je designtokens 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.