Aceeași culoare, cinci moduri de a o scrie. Albastrul #3B82F6 este rgb(59, 130, 246) pentru browser, hsl(217, 91%, 60%) pentru un designer și cmyk(76%, 47%, 0%, 4%) pentru o imprimantă. Acest convertor traduce instantaneu între toate aceste formate, direct în browserul tău, fără ca alegerea ta de culoare să ajungă pe vreun server.
Modele de culoare: aceeași culoare, perspective diferite
O culoare digitală poate fi descrisă prin mai multe modele, fiecare cu rostul lui. Nu există un model „corect” – alegi formatul potrivit pentru sarcina ta: HEX sau RGB pentru web, HSL pentru ajustări intuitive, CMYK pentru tipar. Convertorul le afișează pe toate odată, ca să nu fii nevoit să le calculezi manual.
RGB și HEX: limbajul ecranelor
RGB este un model aditiv: culoarea se naște din amestecul a trei lumini – roșie, verde și albastră. Fiecare canal are o valoare între 0 și 255. Toate ecranele funcționează așa, combinând cele trei lumini în fiecare pixel.
HEX este pur și simplu o scriere mai compactă a aceleiași valori RGB, în sistem hexazecimal. Codul #RRGGBB conține trei perechi de cifre hexazecimale, câte una pentru fiecare canal:
| Canal | Zecimal | Hexazecimal |
|---|---|---|
| Roșu | 59 | 3B |
| Verde | 130 | 82 |
| Albastru | 246 | F6 |
Astfel, #3B82F6 și rgb(59, 130, 246) sunt exact aceeași culoare.
HSL și HSV: mai aproape de percepția umană
Pentru oameni este greu să intuiești cum arată rgb(59, 130, 246) fără să o vezi. HSL și HSV rezolvă această problemă descriind culoarea prin caracteristici percepute:
- Nuanța (Hue) – poziția pe cercul cromatic, de la 0 la 360 de grade (roșu, galben, verde, cyan, albastru, magenta).
- Saturația – cât de „vie” sau de „spălăcită” este culoarea.
- Luminozitatea (HSL) sau valoarea (HSV) – cât de deschisă sau de întunecată este.
Marele avantaj practic: poți schimba luminozitatea fără să atingi nuanța. Astfel obții ușor o paletă de nuanțe coerente – exact ce-ți trebuie pentru stările de hover, focus sau pentru un sistem de design.
CMYK: lumea tiparului
CMYK este un model substractiv: pe hârtie, culoarea se formează prin absorbția luminii de către cernelurile cyan, magenta, galben și negru (litera K vine de la „key”). Cu cât pui mai multă cerneală, cu atât se reflectă mai puțină lumină.
Deoarece ecranul emite lumină, iar hârtia o reflectă, gama de culori reproductibile diferă. De aceea conversia RGB→CMYK este întotdeauna o aproximare: unele culori vii de pe ecran (de exemplu un verde neon strălucitor) pur și simplu nu pot fi tipărite identic. Pentru tipar profesional, conversia se face cu un profil ICC calibrat pe imprimanta și hârtia concrete.
Cum se face conversia
Trecerea între HEX și RGB este directă: fiecare pereche hexazecimală se transformă într-un număr de la 0 la 255 și invers. Conversia spre HSL pornește de la valorile RGB normalizate (împărțite la 255): se determină valoarea maximă și minimă dintre canale, din care rezultă luminozitatea și saturația, iar nuanța se calculează în funcție de care canal este dominant. Convertorul face toate aceste calcule automat, instantaneu, la fiecare modificare.
Formatele, pe scurt
| Format | Exemplu | Unde se folosește |
|---|---|---|
| HEX | #3B82F6 | Web, CSS – notație scurtă |
| RGB | rgb(59, 130, 246) | Web, CSS, canvas, programare |
| HSL | hsl(217, 91%, 60%) | Web – ajustare manuală intuitivă |
| HSV | hsv(217, 76%, 96%) | Roata de culori din software de design |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Tipar (cerneluri) |
Sfaturi pentru web și design
- Pentru CSS modern, HSL este adesea cea mai bună alegere: îți permite să creezi sisteme de culori coerente schimbând doar luminozitatea.
- Pentru culori de brand, păstrează valoarea HEX ca sursă unică de adevăr și convertește la nevoie.
- Pentru contrast și accesibilitate, începe de la valoarea exactă a culorii, apoi verifică raportul de contrast al textului.
- Pentru tipar, tratează valoarea CMYK de aici doar ca punct de plecare și cere o probă de tipar reală.
Capcane frecvente
- A confunda HSV cu HSL. Ambele încep cu nuanța, dar al treilea parametru diferă: luminozitatea (HSL) și valoarea (HSV) nu sunt identice, deci nu interschimba numerele.
- A aștepta potrivire perfectă RGB↔CMYK. Este imposibilă fără profil de culoare; unele culori de ecran nu există la tipar.
- Prescurtarea HEX.
#39Feste forma scurtă a lui#3399FF, nu a oricărei culori – fiecare cifră se dublează.
Confidențialitate: totul rămâne local
Toate conversiile rulează în browserul tău, prin JavaScript. Poți deschide panoul de rețea din instrumentele de dezvoltator și vei vedea că nu pleacă nicio cerere atunci când alegi o culoare. Nimic nu este trimis, salvat sau înregistrat – poți lucra în siguranță și cu culorile de brand confidențiale ale unui proiect nepublicat.
Instrumente înrudite
- Verificator de Contrast WCAG — verifică dacă textul are contrast suficient pentru accesibilitate
- Generator de Gradient CSS — creează gradiente liniare și radiale cu cod CSS gata de copiat
- Convertor Baze Numerice — binar, octal, zecimal și hexazecimal în timp real