# Tailwind-farver: sådan bruger og udvider du paletten

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

Standardpaletten er et godt sted at starte og et dårligt sted at slutte, fordi tusindvis af sites deler den. Her er, hvordan Tailwind-farver fungerer i v4, og hvordan du tilføjer dine egne uden at ødelægge noget.

## The short version

- Tailwind-farver er navngivne familier som blue, violet og slate, hver med nuancer fra 50 for den lyseste til 950 for den mørkeste.
- I Tailwind v4 er hver farve en CSS-variabel som `--color-blue-500`, defineret i OKLCH, og du tilføjer eller erstatter farver i en `@theme`-blok i din CSS.
- Enhver variabel, du kalder `--color-noget` i `@theme`, bliver til et fuldt sæt utilities, blandt andet `bg-noget`, `text-noget` og `border-noget`.
- Opacitetsmodifikatoren, som i `bg-sky-500/50`, virker også med egne farver, fordi v4 blander gennemsigtigheden ind med `color-mix()`.
- Kontrast afhænger af parret, ikke af nuancenummeret, så tjek kombinationer af tekst og baggrund i stedet for at gå ud fra, at 500 på hvid er læsbar.

**Tailwind-farver** er et sæt navngivne familier fra red til rose plus en række grå som slate, gray, zinc, neutral og stone, hver med elleve nuancer nummereret 50, 100 til 900 i hundreder og 950. Du bruger dem med utilities som `bg-blue-600`, `text-slate-900` og `border-rose-300`. I Tailwind v4 er hele paletten defineret i OKLCH som CSS-variabler, som du udvider eller erstatter i en `@theme`-blok i stedet for en JavaScript-konfigurationsfil.

## Sådan er standardpaletten organiseret

Hver familie følger den samme trappe. 50 til 200 er lyse toner til baggrunde og hover-flader, 300 og 400 er bløde accenter, 500 og 600 er den mættede midte, og 700 til 950 er til tekst, kanter og mørke flader. Fordi alle familier bruger de samme trin, virker det som regel bare at bytte `blue` ud med `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

Den blå familie som sRGB-hex fra v3-paletten. Værdierne i v4 er skrevet i OKLCH og er en anelse mere klare på skærme med bredt farverum, men trappen er den samme.

| Gruppe | Familier | Typisk brug |
| --- | --- | --- |
| Grå | slate, gray, zinc, neutral, stone | Tekst, kanter, flader |
| Varme | red, orange, amber, yellow | Advarsler, alarmer, energi |
| Grønne | lime, green, emerald, teal | Succes, natur, ro |
| Blå | cyan, sky, blue, indigo | Links, primære handlinger |
| Lilla og pink | violet, purple, fuchsia, pink, rose | Accenter, kreative brands |

Standardfamilierne grupperet efter temperatur. Slate og zinc trækker mod koldt, stone mod varmt, og neutral har slet ingen tone.

Vælg én grå, og hold dig til den. Blander du tekst i `gray-500` med kanter i `slate-200`, får du et svagt beskidt udtryk, der er svært at sætte navn på og nemt at undgå.

## Sådan bruger du Tailwind-farver i din markup

Der findes farveutilities til næsten alle egenskaber, der tager en farve: `bg-*`, `text-*`, `border-*`, `ring-*`, `fill-*`, `stroke-*`, `decoration-*`, `shadow-*`, `accent-*`, `caret-*` og gradientstoppene `from-*`, `via-*` og `to-*`. Tilføj en skråstreg og et tal for at sætte opaciteten.

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

Et mørkt kort af én grå familie plus én accent med 15 % opacitet. Vilkårlige værdier i firkantede parenteser dækker de sjældne undtagelser.

I v4 er hver nuance også en variabel, du kan bruge i almindelig CSS: `color: var(--color-slate-400)`. Det gør det nemt at style widgets fra tredjepart, SVG eller et canvas med de samme farver som dine utilities.

## Sådan tilføjer du egne farver i Tailwind v4

I v4 konfigurerer du temaet i CSS. Enhver variabel, der starter med `--color-` inde i `@theme`, bliver til en farve med alle utilities genereret. Navngiv farver efter rolle eller brand, og giv dem en fuld trappe, hvis du får brug for lyse 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 findes `bg-ember-500`, `text-ink`, `border-ember-200/60` og `from-ember-400` alle sammen.

- 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-trappen ovenfor omregnet til hex. Når farvetonen holdes på 45 og lysheden trappes, forbliver hver nuance genkendeligt den samme farve.

At bygge trappen i OKLCH er grunden til, at det virker. Lysheden i OKLCH svarer til, hvor lys en farve ser ud, så lige store trin ser lige store ud, hvilket HSL ikke kan love. [OKLCH forklaret](https://gradiently.design/da/guide/oklch-explained) går mere i dybden, og [oklch.com](https://oklch.com) er et godt sted at afprøve værdier.

### Sådan erstatter du hele paletten

Vil du fjerne standardfarverne og kun beholde dine egne, så nulstil først navnerummet med `--color-*: initial;` øverst i `@theme`. Utilities som `bg-blue-500` holder så op med at eksistere, hvilket er et nyttigt værn i et projekt med et stramt brand.

## Egne farver i Tailwind v3

Ældre projekter konfigurerer stadig farver i JavaScript. Brug `extend` til at tilføje farver ved siden af standardfarverne, eller sæt `colors` direkte for at erstatte dem.

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

Måden i v3. Når du opgraderer, flytter de ind i `@theme` som `--color-ember-500` og så videre.

## Kontrast: hvilke nuancer er sikre til tekst

Nuancenumre er ikke en kontrastskala. Hvid tekst på `blue-600` klarer de 4,5:1, som WCAG kræver til brødtekst, mens hvid på `blue-500` ikke gør. Tjek det konkrete par med forholdstallene nedenfor eller et værktøj fra [WebAIM](https://webaim.org/resources/contrastchecker/), og læs [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) for reglerne.

| Tekst på baggrund | Kontrast | Brødtekst |
| --- | --- | --- |
| slate-900 på hvid | 17,85:1 | Bestået |
| gray-500 på hvid | 4,83:1 | Bestået, lige akkurat |
| gray-400 på hvid | 2,54:1 | Dumpet |
| hvid på blue-600 | 5,17:1 | Bestået |
| hvid på blue-500 | 3,68:1 | Kun stor tekst |
| slate-400 på slate-900 | 6,96:1 | Bestået |

Forholdstallene er beregnet ud fra hexværdierne i v3. Beregn dem igen for dine præcise v4-farver, som afviger en smule.

## Gør paletten til din egen

Standardpaletten bruges på et enormt antal sites, og derfor deler så mange produkter den samme `indigo-600`-knap og `slate-50`-baggrund. Den ensartethed er webudgaven af [hvorfor alle feeds ligner hinanden](https://gradiently.design/da/guide/why-every-feed-looks-the-same).

### Ligner alle andre sites

- Standard indigo eller blå som brandfarve
- Flere grå familier blandet sammen
- Accentfarven brugt på alt
- Farverne fra det lyse tema genbrugt i mørk tilstand

### Ligner dig

- Én egen trappe på din egen farvetone
- Én grå, tonet mod brandets farvetone
- Accenten gemt til handlinger og ét højdepunkt
- Et mørkt sæt valgt for sig, se [gradienter til mørk tilstand](https://gradiently.design/da/guide/dark-mode-gradients)

1. **Vælg en farvetone** Start med din brandfarve, og aflæs dens farvetone i OKLCH. [Farveskemaer til websites](https://gradiently.design/da/guide/website-color-scheme) hjælper, hvis du ikke har en endnu.
2. **Byg trappen** Hold farvetonen, træd lysheden fra omkring 97 % ned til 22 %, og sænk chroma i begge ender.
3. **Navngiv også roller** Tilføj `--color-ink`, `--color-paper` og lignende, så komponenterne siger, hvad en farve er til.
4. **Hold én kilde** Behandl `@theme`-blokken som dine [design tokens](https://gradiently.design/da/guide/design-tokens), og genbrug de samme værdier i din grafik.

Det sidste trin er der, hvor brands typisk glider: sitet får den nye trappe, mens opslag på sociale medier og slides beholder sidste års farver. Et brandkit i Gradiently gemmer dine paletter sammen med dine skrifttyper og logoer, så Designer opsætter opslag i de samme farver, som dit Tailwind-tema bruger, og en Mark giver brandet et gradientlook, som intet andet site deler.

## FAQ

### Hvilke farver har Tailwind som standard?

Familier fra red, orange, amber og yellow over grønne, blå, lilla og pink nuancer til rose, plus grå som slate, gray, zinc, neutral og stone. Hver har nuancerne 50, 100 til 900 og 950, plus black og white.

### Hvordan tilføjer jeg egne farver i Tailwind v4?

Definer variabler som `--color-brand-500` i en `@theme`-blok i din CSS. Tailwind genererer `bg-brand-500`, `text-brand-500` og alle andre farveutilities ud fra den.

### Bruger Tailwind OKLCH?

Ja. Siden v4 er standardpaletten defineret i OKLCH, og du kan skrive dine egne farver i OKLCH, hex, RGB eller et hvilket som helst andet CSS-farveformat.

### Hvordan bruger jeg en Tailwind-farve i almindelig CSS?

I v4 bruger du variablen direkte, for eksempel `var(--color-slate-400)`. I v3 bruger du funktionen `theme()`, som `theme(colors.slate.400)`.

### Hvilke Tailwind-nuancer er tilgængelige til tekst?

Det afhænger af parret. På hvid klarer gray-500 og mørkere sig som brødtekst, og hvid tekst klarer sig på blue-600 men ikke på blue-500, så tjek altid den konkrete kombination.