Articol

Instrumente de culoare pentru web: hex, palete și accesibilitate

Alegerea culorilor pentru un site pare simplă până când dați peste coduri hex, triplete RGB și unghiuri HSL care descriu toate același lucru în moduri diferite. Acest articol explică cum se leagă aceste formate între ele, cum transformați o singură culoare de brand într-o paletă utilizabilă și cum vă asigurați că rezultatul rămâne lizibil pentru oamenii care percep culoarea altfel.

Scris de Bastien Sulyan · Publicat pe 21 iunie 2026

Hex, RGB și HSL descriu aceeași culoare

O culoare pe ecran este obținută din amestecul de lumină roșie, verde și albastră. Notația hex scrie aceste trei canale sub forma unui cod de șase caractere precum #2563eb, unde fiecare pereche de caractere este un canal de la 00 la ff. RGB scrie aceleași trei numere în zecimal, de la 0 la 255, ceea ce este mai ușor de citit, dar nu spune nimic în plus. HSL abordează lucrurile dintr-un alt unghi: descrie o culoare prin nuanța ei (o poziție pe cercul cromatic de la 0 la 360 de grade), saturația (cât de vie este) și luminozitatea (cât de aproape este de alb sau de negru). HSL este formatul la care apelează designerii când vor să ajusteze o culoare, fiindcă mărirea luminozității sau deplasarea nuanței este o singură schimbare intuitivă, nu trei numere legate între ele. Un convertor vă permite să treceți între toate trei, ca să puteți citi o valoare într-un format și să o folosiți în altul.

Aceeași culoare chihlimbarie scrisă în trei moduri: hex #E8A33D, rgb(232, 163, 61) și hsl(36, 79%, 57%).

Transformarea unei culori într-o paletă

O singură culoare de brand este rareori suficientă. O paletă care funcționează are de obicei nevoie de o culoare principală, unul sau două accente și un set de griuri neutre pentru text și fundaluri. Relațiile dintre culori urmează reguli simple pe cercul cromatic: culorile complementare stau una în fața celeilalte, culorile analoge stau una lângă alta pentru un aspect calm, iar un set triadic distribuie trei culori uniform pentru contrast fără ca ele să se bată cap în cap. Un instrument de scheme de culori aplică aceste reguli culorii dumneavoastră de pornire și vă oferă codurile hex potrivite, ca să nu mai fie nevoie să calculați unghiurile de mână. Dacă aveți deja o imagine a cărei atmosferă vă place, un extractor de palete citește culorile dominante din ea, o cale rapidă de a baza un site pe o fotografie sau pe un logo.

Contrast și daltonism

O paletă care arată bine pe ecranul dumneavoastră poate totuși să le dea bătăi de cap cititorilor. Aproximativ unul din doisprezece bărbați și una din două sute de femei are o formă de deficiență a vederii culorilor, cel mai des dificultatea de a separa roșul de verde. Dacă singurul semnal de eroare pe care îl folosiți este text roșu pe un buton verde, acei cititori îl ratează. Remediul nu este să evitați culoarea, ci să nu vă bazați niciodată numai pe culoare: îmbinați-o cu o pictogramă, o etichetă sau o formă și păstrați un contrast de luminozitate suficient între text și fundalul lui. Un simulator de daltonism vă arată cum arată paleta dumneavoastră în tipurile obișnuite de vedere a culorilor, ca să prindeți o problemă înainte de publicare, nu după o reclamație.

Două mostre de text pe un card întunecat: text cu contrast redus care nu trece de WCAG AA sub 4,5:1, și text lizibil care trece la 4,5:1 sau mai mult.

Cum se fac toate acestea în browser

Niciunul dintre acești pași nu are nevoie de un server. Conversia unui cod hex, generarea unei scheme, citirea culorilor dintr-o imagine și simularea daltonismului sunt toate calcule mărunte pe care un browser le rezolvă instantaneu. Asta contează când imaginea pe care o eșantionați este un design nelansat sau logoul unui client: cu instrumentele de aici, fișierul rămâne pe dispozitivul dumneavoastră și nimic nu este încărcat. Obțineți același rezultat pe care l-ați obține de la un serviciu online, fără să predați lucrarea. Convertorul de culori, generatorul de scheme de culori, extractorul de palete și simulatorul de daltonism rulează toate local și funcționează la fel și offline, odată ce pagina s-a încărcat.

OKLCH și spații de culoare mai largi

Hex, RGB și HSL descriu toate culorile din gama sRGB pe care ecranele o folosesc de ani de zile. Afișajele mai noi pot arăta mai mult, iar CSS poate acum să ajungă acolo cu funcția color() și spațiul Display P3, care adaugă verzi și roșii vii pe care sRGB nu le poate reprezenta. Schimbarea mai importantă este OKLCH, o modalitate de a scrie culoarea ca luminozitate, cromă și nuanță care urmărește cum percepe ochiul efectiv luminozitatea. În HSL, un galben și un albastru la aceeași luminozitate de 50% nu arată deloc la fel: galbenul pare luminos, albastrul pare închis. În OKLCH, menținând luminozitatea fixă și schimbând doar nuanța, luminozitatea percepută rămâne constantă. Asta face practic să construiești o paletă în care fiecare ton atinge același nivel de contrast prin blocarea unui singur număr, în loc să ajustezi manual fiecare culoare.

Instrumente din acest articol

Întrebări frecvente

Care este diferența dintre hex și RGB?

Sunt două moduri de a scrie aceeași culoare. Hex împachetează canalele roșu, verde și albastru într-un cod de șase caractere în baza 16, în timp ce RGB enumeră aceleași trei canale ca numere zecimale de la 0 la 255. #ff0000 și rgb(255, 0, 0) sunt exact același roșu. Hex este compact și frecvent în CSS și în fișierele de design, RGB este mai ușor de citit dintr-o privire, iar conversia dintre ele nu schimbă nimic la culoarea în sine.

Cum știu dacă culorile mele sunt lizibile pentru utilizatorii daltonisti?

Treceți paleta printr-un simulator de daltonism, care vă redesenează culorile așa cum le-ar vedea cineva cu fiecare tip obișnuit de vedere a culorilor. Acordați atenție perechilor care se contopesc în aceeași nuanță, mai ales roșurile și verdele. Cel mai sigur obicei este să nu folosiți niciodată culoarea drept singurul indiciu: sprijiniți-o cu text, o pictogramă sau un model și păstrați o diferență clară de luminozitate între prim-plan și fundal, ca sensul să supraviețuiască chiar și atunci când nuanța nu o face.