CodeKitHubCe este acest instrument?
Culorile pe web sunt scrise în mai multe formate echivalente, toate definite de specificația CSS Color pe MDN. HEX (#4f46e5) este forma compactă folosită peste tot în CSS și transferuri de design. RGB (rgb(79, 70, 229)) indică direct componentele roșu, verde și albastru, de care codul are adesea nevoie. HSL (hsl(243, 75%, 59%)) descrie nuanța, saturația și luminozitatea — cel mai intuitiv format pentru ajustarea unei culori, precum a o face mai închisă sau mai puțin saturată.
Toate descriu aceeași culoare; acest instrument convertește exact între ele și afișează o previzualizare, astfel încât să confirmi că e culoarea pe care ai vrut-o.
De ce să-l folosești?
- Acceptă orice format la intrare — HEX (3 sau 6 cifre), RGB sau HSL — și oferă toate formatele la ieșire.
- Mostră de previzualizare live, astfel încât să vezi culoarea, nu doar cifre.
- Selector vizual de culoare pentru când preferi să alegi din ochi.
- Copiere dintr-un clic pentru fiecare format, gata pentru CSS sau cod.
- Gratuit, instant, fără încărcare.
Cum se folosește
- Scrie sau lipește o culoare: #4f46e5, rgb(79, 70, 229) sau hsl(243, 75%, 59%) funcționează toate.
- Sau apasă selectorul de culoare și alege vizual.
- Citește toate cele trei formate în rezultate și verifică mostra de previzualizare.
- Apasă „Copiază” lângă formatul de care ai nevoie.
Exemplu
Intrare
#4f46e5Rezultat
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Trei notații, o singură culoare identică.
Ce format ar trebui să folosești?
Toate cele trei descriu exact aceeași culoare — alegerea ține de care este cel mai ușor de folosit pentru sarcina la îndemână, nu de precizie.
| Format | Cel mai bun pentru | De ce |
|---|---|---|
| HEX (#4f46e5) | CSS, transferuri de design, copiere-lipire rapidă | Cel mai scurt de scris și lipit; formatul universal în instrumente de design precum Figma. |
| RGB (rgb(79,70,229)) | Cod care manipulează direct canalele, lucru cu canvas/imagini | Se potrivește cu modul în care API-urile grafice și datele de pixeli ale imaginilor stochează efectiv culoarea. |
| HSL (hsl(243,75%,59%)) | Ajustarea unei culori — mai deschis, mai închis, mai/mai puțin saturat | Luminozitatea și saturația sunt cifre separate pe care le poți regla direct, spre deosebire de HEX/RGB, unde fiecare canal se schimbă. |
Cazuri de utilizare frecvente
- Alegerea unei culori vizual într-un instrument de design, apoi convertirea ei în valoarea HEX sau RGB exactă necesară în CSS sau cod.
- Generarea unui set de nuanțe înrudite (variante mai deschise/mai închise), convertind în HSL, ajustând luminozitatea și convertind înapoi.
- Potrivirea unei culori de brand între diferite instrumente care așteaptă fiecare un format diferit — un fișier de logo în RGB, un ghid de stil în HEX, o variabilă CSS care are nevoie de HSL pentru teme.
- Verificarea faptului că o culoare extrasă dintr-o captură de ecran sau un fișier de design (adesea dată ca RGB) se potrivește cu valoarea HEX dintr-o foaie de stiluri.
Întrebări frecvente
Când ar trebui să folosesc HSL în loc de HEX sau RGB?
Când vrei să raționezi despre o culoare. A face o culoare cu 10% mai închisă în HSL înseamnă a scădea luminozitatea cu 10 puncte; în HEX sau RGB ar trebui să recalculezi toate canalele. Sistemele de design definesc adesea paletele în HSL exact din acest motiv.
Instrumentul suportă HEX cu 3 cifre precum #fff?
Da. #fff este prescurtarea pentru #ffffff — fiecare cifră este dublată. Ambele forme sunt acceptate, iar rezultatul arată forma completă cu 6 cifre.
Ce se întâmplă cu alfa (transparența)?
Acest instrument convertește culori opace (valorile RGB/HSL). Dacă ai nevoie de transparență, adaugă tu alfa: rgba(79, 70, 229, 0.5) sau #4f46e580 — partea de culoare rămâne aceeași.
De ce valorile mele HSL diferă cu 1 față de alt instrument?
Rotunjire. Conversia HSL↔RGB produce valori fracționale, iar instrumentele rotunjesc diferit. O diferență de ±1 în nuanță sau procent este invizibilă și normală.
Sunt suportate numele de culori precum 'red'?
Nu în Faza 1 — instrumentul se concentrează pe cele trei formate numerice pe care dezvoltatorii le convertesc cel mai mult. Introdu valoarea HEX/RGB/HSL a culorii, sau alege-o vizual cu selectorul.
Când ar trebui să folosesc HEX, RGB sau HSL?
Dacă ai nevoie de transparență, folosește HEX cu 8 cifre (#RRGGBBAA) sau rgba() — HEX cu 6 cifre nu are canal alfa. Dacă vrei variante mai deschise sau mai închise ale aceleiași culori, HSL este cel mai simplu: păstrează nuanța și saturația fixe și schimbă doar numărul de luminozitate. Pentru copiere-lipire simplă în CSS sau instrumente de design, HEX cu 6 cifre rămâne forma cea mai universal acceptată.