Cum se folosește

Introdu o culoare de bază sau alege una. „Nouă bază aleatorie” alege una pentru tine.
Alege o armonie. „Nuanțe și tente” construiește o scară de 11 trepte de la foarte deschis la foarte închis.
Blochează orice culoare pe care vrei să o păstrezi, apoi continuă să explorezi alte culori de bază.
Alege HEX, proprietăți CSS personalizate sau JSON, setează un nume și copiază codul.

Cum funcționează

Armoniile sunt obținute prin rotirea nuanței în jurul roții culorilor: complementara adaugă nuanța opusă (180°), analoaga adaugă vecinele aflate la 30° și 60° de fiecare parte, triada folosește trei nuanțe aflate la 120° una de alta, tetrada patru nuanțe aflate la 90° una de alta, iar complementara divizată cele două nuanțe de lângă complementară (150° și 210°).

Rotirea are loc în OKLCH, nu în HSL. OKLCH menține luminozitatea percepută constantă, astfel că un galben și un albastru din aceeași paletă par la fel de luminoase, în loc ca galbenul să fie prea strident. Atunci când o culoare rotită ar ieși din gama pe care ecranele sRGB o pot afișa, croma acesteia este redusă până când se încadrează, păstrând luminozitatea și nuanța.

Scala de nuanțe și tonuri folosește trepte fixe de luminozitate OKLCH denumite de la 50 la 950, asemănător denumirilor folosite de Tailwind CSS, cu croma redusă în apropierea albului și negrului, astfel încât cele mai deschise tonuri să nu arate neon. Armoniile sunt un punct de plecare: verificați perechile de text și fundal cu un verificator de contrast înainte de a le folosi pentru conținut.

Exemple

O culoare de brand cu un accent

Baza #3366cc cu „Complementară” adaugă #8c6500, un ocru cald cu aceeași luminozitate OKLCH. Perechile de albastru și galben-portocaliu sunt o alegere obișnuită pentru accente lângă un brand albastru.

Tokenuri de design pentru o bibliotecă de componente

Alegeți „Nuanțe și tonuri”, setați numele la „primary” și exportați variabilele CSS. Obțineți --primary-50 până la --primary-950, gata pentru fundaluri (50–100), borduri (200–300) și text (700–900).

Păstrezi o culoare în timp ce explorezi

Blochează a doua culoare dintr-o paletă triadică, apoi încearcă diferite culori de bază. Eșantionul blocat își păstrează valoarea HEX, în timp ce celelalte se schimbă.

Întrebări frecvente

De ce diferă culorile mele față de un instrument cu roată de culori HSL?

Acest instrument rotește nuanța în OKLCH, un spațiu de culoare perceptual. Unghiurile sale de nuanță nu corespund exact cu cele din HSL, astfel încât „opusul” unei culori poate fi o nuanță ușor diferită față de cea oferită de un instrument HSL.

Pot folosi JSON-ul în Tailwind CSS?

JSON-ul mapează nume la valori HEX, aceeași structură pe care Tailwind o acceptă pentru o culoare în configurația temei sale. În Tailwind 4, poți să lipești și variabilele CSS într-un bloc @theme după ce le redenumești în --color-…

Sunt accesibile paletele generate?

Nu în mod automat. O armonie nu spune nimic despre contrastul dintre text și fundal. Verifică fiecare pereche pe care plănuiești să o folosești cu instrumentul Contrast Checker.

Confidențialitate

Paletele sunt generate în browserul tău. Culorile tale nu sunt trimise nicăieri și nu sunt stocate.