# Tailwind-farger: bruk og utvid paletten

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

Standardpaletten er et godt utgangspunkt og et dårlig sluttpunkt, fordi tusenvis av nettsteder deler den. Slik fungerer Tailwind-farger i v4, og slik legger du til dine egne uten å ødelegge noe.

## The short version

- Tailwind-farger er navngitte familier som blue, violet og slate, hver med toner fra 50 for den lyseste til 950 for den mørkeste.
- I Tailwind v4 er hver farge en CSS-variabel som `--color-blue-500`, definert i OKLCH. Du legger til eller erstatter farger i en `@theme`-blokk i CSS-en.
- Alle variabler du kaller `--color-something` i `@theme`, blir et komplett sett med hjelpeklasser, blant annet `bg-something`, `text-something` og `border-something`.
- Opasitetsmodifikatoren, som i `bg-sky-500/50`, fungerer også med egne farger, fordi v4 blander inn gjennomsiktighet med `color-mix()`.
- Kontrasten avhenger av paret, ikke tonenummeret. Sjekk derfor tekst og bakgrunn sammen fremfor å anta at 500 på hvitt er lesbart.

**Tailwind-farger** er et sett med navngitte familier, fra red til rose, og gråtoner som slate, gray, zinc, neutral og stone. Hver har elleve toner nummerert 50, 100 til 900 i hundrer og 950. Du bruker dem med hjelpeklasser som `bg-blue-600`, `text-slate-900` og `border-rose-300`. I Tailwind v4 er hele paletten definert i OKLCH som CSS-variabler, som du utvider eller erstatter i en `@theme`-blokk fremfor en JavaScript-konfigurasjonsfil.

## Slik er standardpaletten organisert

Hver familie følger samme trinn. 50 til 200 er lyse toner for bakgrunner og fyll når pekeren holdes over, 300 og 400 er myke aksenter, 500 og 600 er den mettede midten, og 700 til 950 brukes til tekst, kanter og mørke flater. Siden alle familier bruker samme trinn, fungerer det vanligvis fint å bytte `blue` 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

Blue-familien som sRGB-hex fra v3-paletten. v4-verdiene skrives i OKLCH og er litt mer livlige på skjermer med stort fargerom, men trinnene er de samme.

| Gruppe | Familier | Typisk bruk |
| --- | --- | --- |
| Gråtoner | slate, gray, zinc, neutral, stone | Tekst, kanter, flater |
| Varme | red, orange, amber, yellow | Varsler, advarsler, energi |
| Grønne | lime, green, emerald, teal | Suksess, natur, ro |
| Blå | cyan, sky, blue, indigo | Lenker, hovedhandlinger |
| Lilla og rosa | violet, purple, fuchsia, pink, rose | Aksenter, kreative merkevarer |

Standardfamiliene gruppert etter temperatur. Slate og zinc trekker kjølig, stone varmt, mens neutral ikke har noe fargeskjær.

Velg én gråfamilie og hold deg til den. Å blande `gray-500`-tekst med `slate-200`-kanter gir et svakt skittent uttrykk som er vanskelig å beskrive og enkelt å unngå.

## Bruk Tailwind-farger i markeringen

Fargeklasser finnes for nesten alle egenskaper som tar en farge: `bg-*`, `text-*`, `border-*`, `ring-*`, `fill-*`, `stroke-*`, `decoration-*`, `shadow-*`, `accent-*`, `caret-*` og gradientstoppene `from-*`, `via-*` og `to-*`. Legg til skråstrek og et tall for å angi opasitet.

```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 fra én gråfamilie med én aksent på 15 % opasitet. Vilkårlige verdier i hakeparenteser dekker sjeldne unntak.

I v4 er hver tone også en variabel du kan bruke i vanlig CSS: `color: var(--color-slate-400)`. Det gjør det enkelt å gi tredjepartswidgeter, SVG eller et lerret samme farger som hjelpeklassene.

## Legg til egne farger i Tailwind v4

I v4 konfigurerer du temaet i CSS. Alle variabler som begynner med `--color-` inne i `@theme`, blir en farge med alle hjelpeklasser generert. Navngi farger etter rolle eller merkevare, og gi dem en hel toneskala hvis du trenger lyse varianter.

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

Nå finnes både `bg-ember-500`, `text-ink`, `border-ember-200/60` og `from-ember-400`.

- 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-skalaen over, omregnet til hex. Ved å holde kuløren på 45 og endre lysheten trinnvis forblir alle toner tydelig samme farge.

Skalaen i OKLCH er grunnen til at dette fungerer. Lyshet i OKLCH samsvarer med hvor lys en farge virker, så like trinn ser like ut, noe HSL ikke kan love. [OKLCH forklart](https://gradiently.design/nb/guide/oklch-explained) går dypere, og [oklch.com](https://oklch.com) er et godt sted å prøve verdier.

### Erstatt hele paletten

For å fjerne standardfargene og beholde bare dine egne, nullstill navnerommet med `--color-*: initial;` øverst i `@theme`. Klasser som `bg-blue-500` slutter da å finnes, noe som er en nyttig sperre i et prosjekt med strenge merkevareregler.

## Egne farger i Tailwind v3

Eldre prosjekter konfigurerer fortsatt farger i JavaScript. Bruk `extend` for å legge farger ved siden av standardene, eller sett `colors` direkte for å erstatte dem.

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

Metoden i v3. Når du oppgraderer, flyttes disse til `@theme` som `--color-ember-500` og så videre.

## Kontrast: hvilke toner er trygge for tekst

Tonenummer er ingen kontrastskala. Hvit tekst på `blue-600` passerer kravet på 4,5:1 fra WCAG for brødtekst, mens hvitt på `blue-500` ikke gjør det. Sjekk det faktiske paret med forholdstallene nedenfor eller et verktøy fra [WebAIM](https://webaim.org/resources/contrastchecker/), og les [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) for reglene.

| Tekst på bakgrunn | Kontrast | Brødtekst |
| --- | --- | --- |
| slate-900 på hvitt | 17,85:1 | Godkjent |
| gray-500 på hvitt | 4,83:1 | Så vidt godkjent |
| gray-400 på hvitt | 2,54:1 | Ikke godkjent |
| hvitt på blue-600 | 5,17:1 | Godkjent |
| hvitt på blue-500 | 3,68:1 | Bare stor tekst |
| slate-400 på slate-900 | 6,96:1 | Godkjent |

Forholdstall beregnet fra hex-verdiene i v3. Beregn på nytt for dine nøyaktige v4-farger, som avviker litt.

## Gjør paletten til din

Standardpaletten brukes på svært mange nettsteder. Derfor deler så mange produkter samme `indigo-600`-knapp og `slate-50`-bakgrunn. Likheten er nettversjonen av [hvorfor alle bildestrømmer ser like ut](https://gradiently.design/nb/guide/why-every-feed-looks-the-same).

### Ser ut som alle andre nettsteder

- Standard indigo eller blå som merkevarefarge
- Flere gråfamilier blandet sammen
- Aksentfarge brukt på alt
- Farger fra lyst tema gjenbrukt i mørkt

### Ser ut som deg

- Én egen toneskala på din kulør
- Én gråfamilie tonet mot merkevarekuløren
- Aksent forbeholdt handlinger og ett høydepunkt
- Et mørkt sett valgt separat, se [gradienter i mørk modus](https://gradiently.design/nb/guide/dark-mode-gradients)

1. **Velg en kulør** Start med merkevarefargen og les av kuløren i OKLCH. [Fargepaletter for nettsteder](https://gradiently.design/nb/guide/website-color-scheme) hjelper hvis du ikke har en ennå.
2. **Bygg toneskalaen** Hold kuløren fast, senk lysheten fra omtrent 97 % til 22 %, og reduser kroma i begge ender.
3. **Navngi også roller** Legg til `--color-ink`, `--color-paper` og lignende, slik at komponentene sier hva fargen brukes til.
4. **Behold én kilde** Behandle `@theme`-blokken som [designtokenene](https://gradiently.design/nb/guide/design-tokens), og gjenbruk de samme verdiene i grafikken.

Det siste steget er der merkevarer ofte spriker: nettstedet får den nye skalaen mens sosiale innlegg og presentasjoner beholder fjorårets farger. Et merkevaresett i Gradiently lagrer paletter sammen med skrifter og logoer, så Designer setter opp innlegg i samme farger som Tailwind-temaet. En Mark gir merkevaren et gradientuttrykk ingen andre nettsteder deler.

## FAQ

### Hvilke farger finnes i Tailwind som standard?

Familier fra red, orange, amber og yellow gjennom grønt, blått, lilla og rosa til rose, pluss gråtoner som slate, gray, zinc, neutral og stone. Hver har toner på 50, 100 til 900 og 950, pluss svart og hvitt.

### Hvordan legger jeg til egne farger i Tailwind v4?

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

### Bruker Tailwind OKLCH?

Ja. Fra v4 er standardpaletten definert i OKLCH. Du kan skrive egne farger i OKLCH, hex, RGB eller andre CSS-fargeformater.

### Hvordan bruker jeg en Tailwind-farge i vanlig CSS?

I v4 bruker du variabelen direkte, for eksempel `var(--color-slate-400)`. I v3 bruker du funksjonen `theme()`, som `theme(colors.slate.400)`.

### Hvilke Tailwind-toner er tilgjengelige for tekst?

Det avhenger av paret. På hvitt er gray-500 og mørkere godkjent for brødtekst. Hvit tekst er godkjent på blue-600, men ikke blue-500, så sjekk alltid den konkrete kombinasjonen.