Convertor culori și paletă
Scrie o culoare în HEX, rgb(), hsl(), hwb(), oklch() sau cu numele ei, ori alege-o: o primești în toate celelalte forme, cu nuanțe de la deschis la închis și culori care se potrivesc.
Previzualizare
Aa text alb —
Aa text negru —
—
Nuanțe, de la deschis la închis
Armonii
Complementară
Analoage
Triadă
Tetradă
Ce face
Citește o culoare scrisă în una dintre aceste forme din CSS Color 4: #rgb, #rrggbb (și cu transparență, #rrggbbaa), rgb(), hsl(), hwb(), oklab(), oklch() sau unul dintre cele 148 de nume de culori din CSS, ca tomato sau rebeccapurple. O scrie apoi în HEX, RGB, HSL, HWB și OKLCH, fiecare cu butonul ei de copiere.
Conversiile folosesc formulele din specificația CSS Color 4: sRGB cu albul D65 și OKLab. Previzualizarea arată culoarea cu text alb și cu text negru și raportul de contrast al fiecăruia, calculat ca în WCAG 2.2; pentru o verificare completă, cu pragurile AA și AAA, folosește verificatorul de contrast.
Nuanțe și armonii
Nuanțele păstrează tonul culorii și coboară treptat luminozitatea, de la 50 (foarte deschis) la 900 (foarte închis). Armoniile rotesc tonul: complementara cu 180°, analoagele cu ±30°, triada cu 120°, tetrada cu 90°. Clic pe orice mostră o face culoarea curentă.
Ambele se calculează în OKLCH, nu în HSL. Specificația CSS Color 4 arată de ce: în HSL, galbenul și albastrul cu aceeași „luminozitate” de 50% arată foarte diferit, iar în OKLCH luminozitatea urmărește ce vede ochiul. Când o culoare calculată nu încape în sRGB, îi micșorăm saturația (croma) până încape, cu aceeași luminozitate și același ton.
Variabile CSS pune culoarea și nuanțele ei ca proprietăți --color-50 … --color-900, gata de lipit într-o foaie de stil.
Culoarea rămâne la tine
Totul se calculează în browserul tău. Butonul Ia de pe ecran apare doar unde browserul îl oferă și citește doar pixelul pe care îl alegi.
Întrebări frecvente
Dacă lipesc o formă înapoi, primesc aceeași culoare?
Da, pentru culorile scrise în HEX sau RGB: HSL și HWB sunt scrise cu o zecimală, OKLCH cu până la cinci, cât să dea înapoi exact același HEX. Testele uneltei verifică asta pe 5.000 de culori. O culoare scrisă direct în HSL sau OKLCH cu mai multe zecimale e rotunjită la cea mai apropiată treaptă HEX (256 pe canal).
Ce e OKLCH?
Un fel de a scrie culorile din CSS Color 4: luminozitate (L), cromă (C, cât de vie e culoarea) și ton (H, un unghi). Exemplele din specificație arată că în OKLCH luminozitatea și tonul urmăresc mai bine ce vede ochiul decât în HSL.
Ce înseamnă „cel mai apropiat nume CSS”?
Când culoarea nu are un nume în CSS, căutăm numele cu cea mai mică distanță în spațiul OKLab, măsura de diferență între culori dată de CSS Color 4.