Ce este OKLCH și de ce ar trebui să îl folosesc în locul HEX sau HSL?

OKLCH (Luminozitate, Cromă, Nuanță) este un spațiu de culoare perceptual uniform bazat pe modelul Oklab. Spre deosebire de HEX sau HSL, modificările numerice egale în OKLCH produc diferențe percepute egale. Acest lucru îl face ideal pentru proiectarea de palete de culori accesibile, crearea de degradeuri line și generarea de scale de culori Tailwind v4 coerente.

Cum convertesc HEX în OKLCH?

Lipiți valoarea dvs. HEX (de ex. #3b82f6) în câmpul de introducere HEX și câmpul OKLCH se actualizează instantaneu cu notația echivalentă oklch(0.6 0.18 250). Toate celelalte formate — OKLab, RGB și HSL — se sincronizează și ele simultan, oferindu-vă un rezultat complet și precis fără niciun efort suplimentar.

Ce înseamnă 'în afara gamutului sRGB' și ce se întâmplă cu culoarea?

Unele culori OKLCH — în special valorile cu cromă ridicată — depășesc spațiul de culoare sRGB pe care îl folosesc majoritatea afișajelor. Când se întâmplă acest lucru, instrumentul aplică algoritmul toGamut din CSS Color 4 pentru a găsi cea mai apropiată culoare sRGB afișabilă. Apare un banner de avertizare chihlimbar care arată valoarea originală în afara gamutului alături de rezultatul mapat, astfel încât să știți exact ce se întâmplă cu culoarea dvs.

Cum funcționează generatorul de paletă OKLCH Tailwind v4?

Generatorul folosește programul oficial de luminozitate Tailwind v4 (50=0.971, 100=0.945, până la 950=0.238) aplicat nuanței și cromei dvs. curente. Produce 11 pași de culoare de la deschis la închis și îi exportă ca bloc de cod @theme { --color-brand-50: oklch(...); } gata de lipit în CSS-ul dvs.

De ce interpolarea OKLCH arată mai bine decât HSL pentru degradeuri?

HSL interpolează printr-un sistem de coordonate cilindrice care nu corespunde percepției umane, provocând adesea scăderi de gri sau schimbări neașteptate de nuanță la mijlocul unui degradeu. OKLCH interpolează în spațiul perceptual uniform Oklab, astfel încât luminozitatea și croma tranzionează lin fără deformări de culoare neașteptate în porțiunea de mijloc a degradeului.

Acest convertor OKLCH este gratuit și privat?

Da. Instrumentul este complet gratuit și rulează în întregime în browserul dvs. folosind biblioteca culori. Nicio valoare de culoare nu este încărcată pe un server, iar toată procesarea are loc local pe dispozitivul dvs. pentru o confidențialitate deplină a datelor.

Funcționează CSS Color 4 OKLCH în toate browserele?

Sintaxa culorii OKLCH (oklch()) este acceptată în toate browserele moderne începând cu 2023, inclusiv Chrome 111+, Firefox 113+, Safari 15.4+ și Edge 111+. Pentru browserele mai vechi, utilizați valorile de rezervă HEX sau RGB pe care le oferă acest convertor pentru compatibilitate retroactivă completă.

Instrumente de culoare

Convertor de culori OKLCH – CSS Color 4, Generator de paletă Tailwind v4

Convertor gratuit de culori OKLCH cu sincronizare în timp real între OKLCH, OKLab, RGB, HSL și HEX. Include cursoare L/C/H/alfa, mapare gamut CSS Color 4 și export de paletă Tailwind v4.

OKLCH (Luminozitate, Cromă, Nuanță) este un spațiu de culoare perceptual uniform construit pe modelul Oklab și adoptat oficial în CSS Color Level 4. Spre deosebire de RGB sau HSL, OKLCH menține luminozitatea percepută constant între nuanțe, făcându-l ideal pentru sisteme de culori accesibile, palete Tailwind v4 și degradeuri line.

Cum să folosiți convertorul de culori OKLCH

1
Introduceți o valoare de culoare
Tastați sau lipiți o valoare în orice format acceptat: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) sau oklab(0.6 -0.056 -0.169). Instrumentul sincronizează instantaneu toate celelalte formate.
2
Ajustați cu precizie folosind cursoarele L/C/H/Alfa
Glisați cursoarele Luminozitate (L), Cromă (C), Nuanță (H) sau Alfa. Cursorul de cromă afișează marcatorul limită al gamutului sRGB, astfel încât să știți întotdeauna când o culoare depășește intervalul standard de afișare.
3
Verificați avertismentul de gamut dacă apare
Dacă culoarea dvs. OKLCH se află în afara gamutului sRGB, apare un banner de avertizare chihlimbar care arată valoarea originală și rezultatul mapat prin toGamut din CSS Color 4 utilizat pentru afișare.
4
Generați o paletă Tailwind v4
Secțiunea paletei OKLCH Tailwind v4 generează automat pașii de culoare 50–950 pentru nuanța dvs. curentă, urmând programul oficial de luminozitate Tailwind. Faceți clic pe Copiați pentru a lipi blocul @theme direct în CSS-ul dvs.

Referințe

W3C CSS Color Level 4 – oklch()
Specificația W3C care definește notația culorii OKLCH și algoritmii de mapare a gamutului.
Culori – Bibliotecă JavaScript pentru culori
Biblioteca open-source care alimentează conversia OKLCH, maparea toGamut și interpolarea perceptuală în acest instrument.
Evil Martians – OKLCH în CSS: De ce să renunțăm la RGB și HSL?
Un ghid cuprinzător care explică avantajele OKLCH față de RGB și HSL pentru lucrul modern cu culori.
Tailwind CSS v4 – Paleta implicită
Documentația oficială a paletei de culori Tailwind, inclusiv valorile de luminozitate OKLCH utilizate în acest generator de paletă.

Instrumente conexe

Convertor de culori

Convertiți între RGB, RGBA, HEX, HSL, HSV și CMYK cu sincronizare bidirecțională în timp real.

Minificator CSS

Minificați CSS care utilizează valorile dvs. de culoare OKLCH.

Vizualizator SVG

Previzualizați și inspectați grafice SVG care utilizează valori de umplere și contur OKLCH.

Întrebări frecvente

Ce este OKLCH și de ce ar trebui să îl folosesc în locul HEX sau HSL?: OKLCH (Luminozitate, Cromă, Nuanță) este un spațiu de culoare perceptual uniform bazat pe modelul Oklab. Spre deosebire de HEX sau HSL, modificările numerice egale în OKLCH produc diferențe percepute egale. Acest lucru îl face ideal pentru proiectarea de palete de culori accesibile, crearea de degradeuri line și generarea de scale de culori Tailwind v4 coerente.
Cum convertesc HEX în OKLCH?: Lipiți valoarea dvs. HEX (de ex. #3b82f6) în câmpul de introducere HEX și câmpul OKLCH se actualizează instantaneu cu notația echivalentă oklch(0.6 0.18 250). Toate celelalte formate — OKLab, RGB și HSL — se sincronizează și ele simultan, oferindu-vă un rezultat complet și precis fără niciun efort suplimentar.
Ce înseamnă 'în afara gamutului sRGB' și ce se întâmplă cu culoarea?: Unele culori OKLCH — în special valorile cu cromă ridicată — depășesc spațiul de culoare sRGB pe care îl folosesc majoritatea afișajelor. Când se întâmplă acest lucru, instrumentul aplică algoritmul toGamut din CSS Color 4 pentru a găsi cea mai apropiată culoare sRGB afișabilă. Apare un banner de avertizare chihlimbar care arată valoarea originală în afara gamutului alături de rezultatul mapat, astfel încât să știți exact ce se întâmplă cu culoarea dvs.
Cum funcționează generatorul de paletă OKLCH Tailwind v4?: Generatorul folosește programul oficial de luminozitate Tailwind v4 (50=0.971, 100=0.945, până la 950=0.238) aplicat nuanței și cromei dvs. curente. Produce 11 pași de culoare de la deschis la închis și îi exportă ca bloc de cod @theme { --color-brand-50: oklch(...); } gata de lipit în CSS-ul dvs.
De ce interpolarea OKLCH arată mai bine decât HSL pentru degradeuri?: HSL interpolează printr-un sistem de coordonate cilindrice care nu corespunde percepției umane, provocând adesea scăderi de gri sau schimbări neașteptate de nuanță la mijlocul unui degradeu. OKLCH interpolează în spațiul perceptual uniform Oklab, astfel încât luminozitatea și croma tranzionează lin fără deformări de culoare neașteptate în porțiunea de mijloc a degradeului.
Acest convertor OKLCH este gratuit și privat?: Da. Instrumentul este complet gratuit și rulează în întregime în browserul dvs. folosind biblioteca culori. Nicio valoare de culoare nu este încărcată pe un server, iar toată procesarea are loc local pe dispozitivul dvs. pentru o confidențialitate deplină a datelor.
Funcționează CSS Color 4 OKLCH în toate browserele?: Sintaxa culorii OKLCH (oklch()) este acceptată în toate browserele moderne începând cu 2023, inclusiv Chrome 111+, Firefox 113+, Safari 15.4+ și Edge 111+. Pentru browserele mai vechi, utilizați valorile de rezervă HEX sau RGB pe care le oferă acest convertor pentru compatibilitate retroactivă completă.