Vad är OKLCH och varför ska jag använda det istället för HEX eller HSL?

OKLCH (Ljushet, Chroma, Färgton) är ett perceptuellt enhetligt färgrymd baserat på Oklab-modellen. Till skillnad från HEX eller HSL ger lika stora numeriska förändringar i OKLCH lika stora upplevda skillnader. Detta gör det idealiskt för att designa tillgängliga färgpaletter, skapa jämna gradienter och generera konsekventa Tailwind v4-färgskalor.

Hur konverterar jag HEX till OKLCH?

Klistra in ditt HEX-värde (t.ex. #3b82f6) i HEX-inmatningsfältet och OKLCH-fältet uppdateras omedelbart med den ekvivalenta oklch(0.6 0.18 250)-notationen. Alla andra format – OKLab, RGB och HSL – synkroniseras också samtidigt, vilket ger dig ett komplett och korrekt resultat direkt.

Vad betyder 'utanför sRGB-gamut' och vad händer med färgen?

Vissa OKLCH-färger – särskilt värden med hög chroma – överskrider sRGB-färgrymden som de flesta skärmar använder. När detta inträffar tillämpar verktyget CSS Color 4 toGamut-algoritmen för att hitta den närmaste visningsbara sRGB-färgen. En gul varningsbanner visas med det ursprungliga värdet utanför gamut bredvid det mappade resultatet, så du alltid vet vad som händer med din färg.

Hur fungerar Tailwind v4 OKLCH-paletgeneratorn?

Generatorn använder Tailwind v4:s officiella ljussättningsschema (50=0.971, 100=0.945, upp till 950=0.238) tillämpat på din aktuella färgton och chroma. Den producerar 11 färgsteg från ljust till mörkt och exporterar dem som ett @theme { --color-brand-50: oklch(...); }-kodblock redo att klistra in i din CSS.

Varför ser OKLCH-interpolation bättre ut än HSL för gradienter?

HSL interpolerar genom ett cylindriskt koordinatsystem som inte matchar mänsklig uppfattning, vilket ofta orsakar gråa dalar eller oväntade färgtonsskiften mitt i en gradient. OKLCH interpolerar i det perceptuellt enhetliga Oklab-rymden, så ljushet och chroma övergår smidigt utan oväntade färgkaster eller förvrängningar i gradientens mittparti.

Är den här OKLCH-konverteraren gratis och privat?

Ja. Verktyget är helt gratis och körs helt i din webbläsare med hjälp av culori-biblioteket. Inga färgvärden laddas upp till en server, och all bearbetning sker lokalt på din enhet för fullständig integritet.

Fungerar CSS Color 4 OKLCH i alla webbläsare?

OKLCH-färgsyntaxen (oklch()) stöds i alla moderna webbläsare från och med 2023, inklusive Chrome 111+, Firefox 113+, Safari 15.4+ och Edge 111+. För äldre webbläsare, använd de HEX- eller RGB-reservvärden som den här konverteraren tillhandahåller för fullständig bakåtkompatibilitet.

Färgverktyg

OKLCH-färgkonverterare – CSS Color 4, Tailwind v4 paletgenerator

Gratis OKLCH-färgkonverterare med realtidssynkronisering för OKLCH, OKLab, RGB, HSL och HEX. Inkluderar L/C/H/alfa-skjutreglage, CSS Color 4 gamut-mappning och Tailwind v4 paletexport.

OKLCH (Ljushet, Chroma, Färgton) är ett perceptuellt enhetligt färgrymd byggt på Oklab-modellen och officiellt antaget i CSS Color Level 4. Till skillnad från RGB eller HSL håller OKLCH den upplevda ljusheten konsekvent över alla färgtoner, vilket gör det idealiskt för tillgängliga färgsystem, Tailwind v4-paletter och jämna gradienter.

Så här använder du OKLCH-färgkonverteraren

1
Ange ett färgvärde
Skriv eller klistra in ett värde i ett format som stöds: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) eller oklab(0.6 -0.056 -0.169). Verktyget synkroniserar alla andra format omedelbart.
2
Finjustera med L/C/H/Alfa-skjutreglage
Dra skjutreglagen för Ljushet (L), Chroma (C), Färgton (H) eller Alfa. Chroma-skjutreglaget visar sRGB-gamutgränsmarkören så att du alltid vet när en färg överskrider standardvisningsområdet.
3
Kontrollera gamut-varningen om den visas
Om din OKLCH-färg är utanför sRGB-gamut visas en gul varningsbanner med det ursprungliga värdet och det CSS Color 4 toGamut-mappade resultatet som används för visning.
4
Generera en Tailwind v4-palett
Tailwind v4 OKLCH-paletsektionen genererar automatiskt 50–950 färgsteg för din aktuella färgton, baserat på Tailwinds officiella ljussättningsschema. Klicka på Kopiera för att klistra in @theme-blocket direkt i din CSS.

Referenser

W3C CSS Color Level 4 – oklch()
W3C-specifikationen som definierar OKLCH-färgnotationen och gamut-mappningsalgoritmer.
Culori – JavaScript-färgbibliotek
Det öppen källkodsbibliotek som driver OKLCH-konvertering, toGamut-mappning och perceptuell interpolation i det här verktyget.
Evil Martians – OKLCH i CSS: Varför sluta med RGB och HSL?
En omfattande guide som förklarar fördelarna med OKLCH jämfört med RGB och HSL för modernt färgarbete.
Tailwind CSS v4 – Standardpalett
Tailwinds officiella färgpalettdokumentation, inklusive OKLCH-ljushetsvärden som används i den här paletgeneratorn.

Relaterade verktyg

Färgkonverterare

Konvertera mellan RGB, RGBA, HEX, HSL, HSV och CMYK med dubbelriktad realtidssynkronisering.

CSS-minifierare

Minifiera CSS som använder dina OKLCH-färgvärden.

SVG-visare

Förhandsgranska och inspektera SVG-grafik som använder OKLCH-fyllnings- och streckningsvärden.

Vanliga frågor

Vad är OKLCH och varför ska jag använda det istället för HEX eller HSL?: OKLCH (Ljushet, Chroma, Färgton) är ett perceptuellt enhetligt färgrymd baserat på Oklab-modellen. Till skillnad från HEX eller HSL ger lika stora numeriska förändringar i OKLCH lika stora upplevda skillnader. Detta gör det idealiskt för att designa tillgängliga färgpaletter, skapa jämna gradienter och generera konsekventa Tailwind v4-färgskalor.
Hur konverterar jag HEX till OKLCH?: Klistra in ditt HEX-värde (t.ex. #3b82f6) i HEX-inmatningsfältet och OKLCH-fältet uppdateras omedelbart med den ekvivalenta oklch(0.6 0.18 250)-notationen. Alla andra format – OKLab, RGB och HSL – synkroniseras också samtidigt, vilket ger dig ett komplett och korrekt resultat direkt.
Vad betyder 'utanför sRGB-gamut' och vad händer med färgen?: Vissa OKLCH-färger – särskilt värden med hög chroma – överskrider sRGB-färgrymden som de flesta skärmar använder. När detta inträffar tillämpar verktyget CSS Color 4 toGamut-algoritmen för att hitta den närmaste visningsbara sRGB-färgen. En gul varningsbanner visas med det ursprungliga värdet utanför gamut bredvid det mappade resultatet, så du alltid vet vad som händer med din färg.
Hur fungerar Tailwind v4 OKLCH-paletgeneratorn?: Generatorn använder Tailwind v4:s officiella ljussättningsschema (50=0.971, 100=0.945, upp till 950=0.238) tillämpat på din aktuella färgton och chroma. Den producerar 11 färgsteg från ljust till mörkt och exporterar dem som ett @theme { --color-brand-50: oklch(...); }-kodblock redo att klistra in i din CSS.
Varför ser OKLCH-interpolation bättre ut än HSL för gradienter?: HSL interpolerar genom ett cylindriskt koordinatsystem som inte matchar mänsklig uppfattning, vilket ofta orsakar gråa dalar eller oväntade färgtonsskiften mitt i en gradient. OKLCH interpolerar i det perceptuellt enhetliga Oklab-rymden, så ljushet och chroma övergår smidigt utan oväntade färgkaster eller förvrängningar i gradientens mittparti.
Är den här OKLCH-konverteraren gratis och privat?: Ja. Verktyget är helt gratis och körs helt i din webbläsare med hjälp av culori-biblioteket. Inga färgvärden laddas upp till en server, och all bearbetning sker lokalt på din enhet för fullständig integritet.
Fungerar CSS Color 4 OKLCH i alla webbläsare?: OKLCH-färgsyntaxen (oklch()) stöds i alla moderna webbläsare från och med 2023, inklusive Chrome 111+, Firefox 113+, Safari 15.4+ och Edge 111+. För äldre webbläsare, använd de HEX- eller RGB-reservvärden som den här konverteraren tillhandahåller för fullständig bakåtkompatibilitet.