Selector Culori Online
Alegeți o culoare pe roată, ajustați-o fin pe canvasul de saturație și citiți-o înapoi în orice format vorbește proiectul dumneavoastră — de la #RRGGBB la oklch(). Acest selector face și lucrurile pe care alte instrumente le omit: trei geometrii de roată, inclusiv roata pictorilor RYB, suprapuneri de armonie care construiesc o paletă pentru dumneavoastră, un canal alfa și export cu un click al întregii palete ca variabile CSS, SCSS sau JSON. Totul calculat local, în browserul dumneavoastră.
Trei roți, nu una singură
Selectorul Mod roată schimbă geometria roții în sine:
- HSV și HSL sunt roțile digitale — nuanțele sunt distribuite așa cum le amestecă lumina pe ecranele RGB. Diferă în modul în care se comportă canvasul pătrat: în HSV colțul cel mai luminos este nuanța pură, în HSL nuanțele pure sunt plasate la 50% luminozitate, cu alb deasupra.
- RYB (a pictorilor) aranjează nuanțele așa cum le-au învățat artiștii: roșu, galben și albastru ca primare, cu portocaliu, verde și mov între ele. Valoarea sa practică se vede în armonii — pe roata RYB, complementara roșului este verde, iar complementara albastrului este portocaliu, perechile clasice din pictură, în timp ce o roată digitală asociază roșul cu cyan. Dacă o paletă „complementară” dintr-un selector obișnuit v-a părut vreodată greșită, aceasta este explicația.
Armonii care construiesc paleta pentru dumneavoastră
Alegeți o regulă sub Armonie de culori, iar roata marchează culorile asociate, care apar ca o paletă gata făcută:
- Complementară — o singură culoare opusă. Cel mai puternic contrast; folosiți-o pentru un accent unic pe fundalul unei culori de brand dominante.
- Split-complementară — cei doi vecini ai complementarei. Aproape la fel de mult contrast, mult mai ușor de echilibrat.
- Triadică — trei nuanțe distribuite uniform. Vie, dar stabilă; lăsați una să domine și folosiți-le pe celelalte două cu măsură.
- Tetradică (pătrat) — patru nuanțe. Scheme bogate pentru ilustrații și vizualizare de date; greu de echilibrat în interfețe.
- Analogă — vecinii imediați. Tensiune redusă, potrivită pentru fundaluri și gradiente.
- Monocromatică — o singură nuanță în trepte de luminozitate. Cea mai sigură alegere pentru stările unei interfețe (hover, activ, dezactivat).
Panoul de paletă copiază întregul set dintr-un click, în formatul ales de dumneavoastră: simplu HEX, RGB, HSL, OKLCH, proprietăți custom CSS gata de lipit (--color-1: …), variabile SCSS sau JSON pentru a le preda direct în cod.
Lipiți orice, citiți totul
Câmpurile de introducere acceptă practic orice notație de culoare: #f80, #ff8800, hex pe 8 cifre cu alfa, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 sau nume de culoare CSS precum rebeccapurple. Indiferent ce introduceți, primiți înapoi șapte rezultate sincronizate: HEX, RGB, HSL, HSV, LCH, OKLCH și CMYK, fiecare cu propriul buton de copiere.
Două etichete ajutătoare sub previzualizare denumesc culoarea pentru dumneavoastră: cea mai apropiată culoare CSS numită (utilă pentru prototipuri rapide și pentru a vorbi despre culori) și cel mai apropiat token Tailwind (de ex. orange-500), astfel încât să rămâneți în sistemul dumneavoastră de design în loc să inventați valori izolate.
Trageți cursorul de opacitate (alfa) de sub previzualizare, iar rezultatele trec la formele lor transparente — #RRGGBBAA, rgba(), hsla() — cu previzualizarea afișată pe un fundal în carouri, ca să puteți evalua transparența.
Ce format ar trebui să folosiți?
| Format | Nume complet | Când se folosește? |
|---|---|---|
| HEX | Hexazecimal | Standardul web. Compact, universal suportat, ușor de copiat. 8 cifre adaugă alfa. |
| RGB | Roșu, Verde, Albastru | Cum gândesc ecranele. Trei canale de lumină, 0–255. Formatul așteptat de majoritatea API-urilor și de codul canvas. |
| HSL | Hue, Saturation, Lightness | Pentru editare manuală de către oameni. „Puțin mai deschis” sau „mai puțin saturat” înseamnă schimbarea unui singur număr. |
| HSV | Hue, Saturation, Value | Software grafic. Modelul din spatele selectoarelor din Photoshop și GIMP. |
| LCH | Lightness, Chroma, Hue | Perceptual uniform. Pași numerici egali arată ca pași vizuali egali — ceea ce HSL doar pretinde că face. |
| OKLCH | OK Lightness, Chroma, Hue | Alegerea CSS modernă. Corectează schimbările de nuanță ale LCH în albastru; suportat în toate browserele actuale și ideal pentru sisteme de tokenuri de design. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientare pentru print. O conversie aproximativă utilă când discutați cu designeri de print — valorile finale depind mereu de profilul de culoare al imprimantei. |
Detalii mici care economisesc timp
- Istoricul se păstrează singur. Ultimele 24 de culori cu care ați lucrat supraviețuiesc unei reîmprospătări a paginii — stocate doar în localStorage-ul browserului dumneavoastră, nicăieri altundeva.
- Eyedropper. În browserele cu API-ul EyeDropper (Chrome și Edge) puteți alege o culoare de oriunde de pe ecran, chiar și din afara ferestrei browserului.
- Control de la tastatură. Roata și canvasul de saturație răspund la săgeți pentru ajustări precise, la nivel de pixel.
- Presetările acoperă culorile de bază obișnuite, pentru un punct de plecare rapid.
Întrebări frecvente (FAQ)
Este sigur să folosesc oklch() în CSS de producție?
Da. Toate versiunile actuale de Chrome, Edge, Firefox și Safari suportăoklch(), care a devenit notația preferată pentru tokenurile de design (Tailwind CSS 4 își definește întreaga paletă în acest format). Pentru browsere foarte vechi, oferiți pe rândul anterior o alternativă HEX — acest instrument vă dă ambele valori.