Tailwind-färger: använd och utöka paletten

Tailwind-färger är en uppsättning namngivna familjer, från red till rose plus en rad gråskalor som slate, gray, zinc, neutral och stone, var och en med elva nyanser numrerade 50, 100 till 900 i hundratal och 950. Du använder dem med verktygsklasser som bg-blue-600, text-slate-900 och border-rose-300. I Tailwind v4 är hela paletten definierad i OKLCH som CSS-variabler, som du utökar eller ersätter i ett @theme-block i stället för i en JavaScript-konfigurationsfil.

Så är standardpaletten organiserad

Varje familj följer samma stege. 50 till 200 är toner för bakgrunder och fyllning vid hovring, 300 och 400 är mjuka accenter, 500 och 600 är den mättade mitten och 700 till 950 är till text, kantlinjer och mörka ytor. Eftersom varje familj använder samma steg fungerar det oftast att byta blue mot violet i en komponent.

Välj en grå familj och håll dig till den. Om du blandar gray-500-text med slate-200-kantlinjer får du ett svagt smutsigt intryck som är svårt att sätta namn på och lätt att undvika.

Använda Tailwind-färger i din uppmärkning

Färgklasser finns för nästan varje egenskap som tar en färg: bg-*, text-*, border-*, ring-*, fill-*, stroke-*, decoration-*, shadow-*, accent-*, caret-* och gradientstoppen from-*, via-* och to-*. Lägg till ett snedstreck och ett tal för att ange opacitet.

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

I v4 är varje nyans också en variabel som du kan använda i vanlig CSS: color: var(--color-slate-400). Det gör det enkelt att formge tredjepartswidgetar, SVG eller en canvas med samma färger som dina klasser.

Lägga till egna färger i Tailwind v4

I v4 konfigurerar du temat i CSS. Varje variabel som börjar med --color- inuti @theme blir en färg, med varje verktygsklass genererad för den. Namnge färger efter roll eller varumärke och ge dem en hel stege om du behöver toner.

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

Att bygga stegen i OKLCH är anledningen till att det fungerar. Ljushet i OKLCH motsvarar hur ljus en färg ser ut, så lika steg ser lika ut, vilket HSL inte kan lova. OKLCH förklarat går djupare, och oklch.com är ett bra ställe att prova värden.

Ersätta paletten helt

För att ta bort standardfärgerna och bara behålla dina egna återställer du namnrymden först med --color-*: initial; överst i @theme. Klasser som bg-blue-500 slutar då finnas, vilket är ett användbart skydd i ett projekt med ett strikt varumärke.

Egna färger i Tailwind v3

Äldre projekt konfigurerar fortfarande färger i JavaScript. Använd extend för att lägga till färger vid sidan av standardfärgerna, eller sätt colors direkt för att ersätta dem.

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

Kontrast: vilka nyanser är säkra för text

Nyansnummer är ingen kontrastskala. Vit text på blue-600 klarar de 4,5:1 som WCAG kräver för brödtext, medan vitt på blue-500 inte gör det. Kontrollera det faktiska paret med kvoterna nedan eller ett verktyg från WebAIM, och läs färgkontrast och tillgänglighet för reglerna.

Gör paletten till din

Standardpaletten används på ett stort antal webbplatser, och därför delar så många produkter samma indigo-600-knapp och slate-50-bakgrund. Den likheten är webbens version av varför alla flöden ser likadana ut.

1. 1

   Välj en nyans

   Utgå från din varumärkesfärg och läs av dess nyans i OKLCH. Färgscheman för webbplatser hjälper om du inte har någon än.

2. 2

   Bygg stegen

   Håll nyansen, stega ljusheten från cirka 97 % till 22 % och sänk kromat i båda ändar.

3. 3

   Namnge roller också

   Lägg till --color-ink, --color-paper och liknande, så att komponenterna säger vad en färg är till för.

4. 4

   Ha en enda källa

   Behandla @theme-blocket som dina designtokens och återanvänd samma värden i din grafik.

Det sista steget är där varumärken oftast glider isär: webbplatsen får den nya stegen medan inlägg i sociala medier och bilder behåller förra årets färger. Ett varumärkeskit i Gradiently lagrar dina paletter tillsammans med dina typsnitt och logotyper, så att Designer lägger ut inlägg i samma färger som ditt Tailwind-tema, och en Mark ger varumärket en gradientlook som ingen annan webbplats delar.