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

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

Standardpaletten är en bra startpunkt men ett dåligt slutresultat, eftersom tusentals webbplatser delar den. Så fungerar Tailwind-färger i v4, och så lägger du till dina egna utan att något går sönder.

## The short version

- Tailwind-färger är namngivna familjer som blue, violet och slate, var och en med nyanser från 50 för den ljusaste till 950 för den mörkaste.
- I Tailwind v4 är varje färg en CSS-variabel som `--color-blue-500`, definierad i OKLCH, och du lägger till eller ersätter färger i ett `@theme`-block i din CSS.
- Varje variabel du döper till `--color-något` i `@theme` blir en hel uppsättning verktygsklasser, bland annat `bg-något`, `text-något` och `border-något`.
- Opacitetsmodifieraren, som i `bg-sky-500/50`, fungerar också med egna färger, eftersom v4 blandar in genomskinligheten med `color-mix()`.
- Kontrasten beror på paret, inte på nyansnumret, så kontrollera kombinationerna av text och bakgrund i stället för att anta att 500 på vitt är läsbart.

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

- 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

Blå-familjen som sRGB-hex, från v3-paletten. Värdena i v4 är skrivna i OKLCH och är något mer levande på skärmar med bred färgrymd, men stegen är desamma.

| Grupp | Familjer | Typisk användning |
| --- | --- | --- |
| Gråskalor | slate, gray, zinc, neutral, stone | Text, kantlinjer, ytor |
| Varma | red, orange, amber, yellow | Varningar, larm, energi |
| Gröna | lime, green, emerald, teal | Framgång, natur, lugn |
| Blå | cyan, sky, blue, indigo | Länkar, primära åtgärder |
| Lila och rosa | violet, purple, fuchsia, pink, rose | Accenter, kreativa varumärken |

Standardfamiljerna grupperade efter temperatur. Slate och zinc lutar åt kallt, stone åt varmt och neutral har ingen ton alls.

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.

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

Ett mörkt kort av en grå familj plus en accent i 15 % opacitet. Godtyckliga värden inom hakparenteser täcker det sällsynta undantaget.

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.

```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 finns `bg-ember-500`, `text-ink`, `border-ember-200/60` och `from-ember-400` alla.

- 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

Ember-stegen ovan, omvandlad till hex. Om du håller nyansen vid 45 och stegar ljusheten förblir varje nyans igenkännbart samma färg.

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](https://gradiently.design/sv/guide/oklch-explained) går djupare, och [oklch.com](https://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.

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

Så görs det i v3. När du uppgraderar flyttas de in i `@theme` som `--color-ember-500` och så vidare.

## 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](https://webaim.org/resources/contrastchecker/), och läs [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility) för reglerna.

| Text på bakgrund | Kontrast | Brödtext |
| --- | --- | --- |
| slate-900 på vitt | 17,85:1 | Godkänd |
| gray-500 på vitt | 4,83:1 | Godkänd, knappt |
| gray-400 på vitt | 2,54:1 | Underkänd |
| vitt på blue-600 | 5,17:1 | Godkänd |
| vitt på blue-500 | 3,68:1 | Bara stor text |
| slate-400 på slate-900 | 6,96:1 | Godkänd |

Kvoter beräknade från hexvärdena i v3. Räkna om dem för dina exakta v4-färger, som skiljer sig något.

## 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](https://gradiently.design/sv/guide/why-every-feed-looks-the-same).

### Ser ut som alla andra webbplatser

- Standardindigo eller blått som varumärkesfärg
- Flera gråa familjer blandade
- Accentfärg som används på allt
- Färger från det ljusa temat återanvända i mörkt läge

### Ser ut som du

- En egen stege i din egen nyans
- En grå, tonad mot varumärkets nyans
- Accenten sparad till åtgärder och en höjdpunkt
- En mörk uppsättning som väljs separat, se [gradienter i mörkt läge](https://gradiently.design/sv/guide/dark-mode-gradients)

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](https://gradiently.design/sv/guide/website-color-scheme) hjälper om du inte har någon än.
2. **Bygg stegen** Håll nyansen, stega ljusheten från cirka 97 % till 22 % och sänk kromat i båda ändar.
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. **Ha en enda källa** Behandla `@theme`-blocket som dina [designtokens](https://gradiently.design/sv/guide/design-tokens) 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.

## FAQ

### Vilka färger finns i Tailwind som standard?

Familjer från red, orange, amber och yellow via gröna, blå och lila till rosa och rose, plus gråskalor som slate, gray, zinc, neutral och stone. Varje har nyanserna 50, 100 till 900 och 950, plus svart och vitt.

### Hur lägger jag till egna färger i Tailwind v4?

Definiera variabler som `--color-brand-500` i ett `@theme`-block i din CSS. Tailwind genererar `bg-brand-500`, `text-brand-500` och varje annan färgklass utifrån den.

### Använder Tailwind OKLCH?

Ja. Sedan v4 är standardpaletten definierad i OKLCH, och du kan skriva dina egna färger i OKLCH, hex, RGB eller vilket annat CSS-färgformat som helst.

### Hur använder jag en Tailwind-färg i vanlig CSS?

I v4 använder du variabeln direkt, till exempel `var(--color-slate-400)`. I v3 använder du funktionen `theme()`, till exempel `theme(colors.slate.400)`.

### Vilka Tailwind-nyanser är tillgängliga för text?

Det beror på paret. På vitt klarar gray-500 och mörkare kraven för brödtext, och vit text klarar blue-600 men inte blue-500, så kontrollera alltid den specifika kombinationen.