Hex, RGB și HSL
Introdu culoarea în notația pe care o ai, iar celelalte se completează. Toate trei câmpurile rămân sincronizate.
Cum arată
Text pe alb · 3,89
Text pe negru · 5,39
- Hex#e0521f
- RGBrgb(224, 82, 31)
- HSLhsl(16, 76%, 50%)
Canale
- Roșu224
- Verde82
- Albastru31
- Nuanță16°
- Saturație76 %
- Luminozitate50 %
Scala de luminozitate
Aceeași nuanță și saturație, cu luminozitatea de la 10 la 90 %. Dă clic pe o mostră ca s-o alegi.
Cum funcționează
Hex este același lucru cu RGB, scris în hexazecimal. Fiecare pereche de caractere este un canal, de la 00 la ff, adică de la 0 la 255.
Forma scurtă, de trei caractere, dublează fiecare caracter. #f30 înseamnă #ff3300, motiv pentru care doar 4.096 dintre cele 16,7 milioane de culori pot fi scrise așa.
HSL descrie aceleași culori prin nuanță, saturație și luminozitate, în loc de trei surse de lumină. Nuanța este un unghi pe cercul culorilor, unde 0 este roșu, 120 verde și 240 albastru.
HSL este mai ușor de folosit când vrei variante ale unei culori. Păstrezi nuanța și saturația, schimbi doar luminozitatea și obții o scală coerentă.
Conversia între RGB și HSL este exactă în ambele sensuri, dar rotunjirea HSL la grade și procente întregi poate muta un canal cu o treaptă când mergi înainte și înapoi.
Cum convertește instrumentul
De la RGB la HSL, fiecare canal este mai întâi împărțit la 255. Luminozitatea L este media dintre cel mai mare și cel mai mic canal. Saturația S este diferența dintre ele împărțită la 1 − |2L − 1|. Nuanța H depinde de canalul cel mai mare și este dată în grade. Sensul invers folosește același cerc al culorilor cu șase sectoare, iar canalele sunt rotunjite la numere întregi. Rândurile hex, RGB și HSL arată numere întregi, în timp ce variantele de jos sunt calculate din valorile nerotunjite.
Exemplu de calcul
#1e90ff înseamnă roșu 30, verde 144 și albastru 255, adică 0,118, 0,565 și 1. Cel mai mare este 1, iar cel mai mic 0,118, așa că L = (1 + 0,118) / 2 = 0,559, adică 55,9 %. Diferența 0,882 împărțită la 1 − |2 × 0,559 − 1| = 0,882 dă S = 1, adică 100 %. Albastrul este cel mai mare, așa că H = 60 × ((0,118 − 0,565) / 0,882 + 4) = 209,6 grade.
Instrumentul scrie culoarea ca hsl(210, 100%, 56%). Dacă introduci acest text, primești înapoi #1f8fff, nu #1e90ff, pentru că rotunjirea la grade și procente întregi a mutat roșul și verdele cu câte o treaptă.
Luminozitatea HSL nu este luminozitatea percepută
CSS Color 4 arată că galbenul și albastrul au amândouă luminozitatea HSL de 50 %, și totuși galbenul pare mult mai deschis. Valorile de contrast ale instrumentului arată același lucru: hsl(60, 100%, 50%) dă un raport de 1,07 față de alb, iar hsl(240, 100%, 50%) dă 8,59. Variantele de sub culoare păstrează nuanța și saturația și schimbă doar luminozitatea, în pași de 10 puncte procentuale. Ele se potrivesc ca nuanță, dar pașii nu par egali.
Ce citește instrumentul
Câmpurile urmează CSS Color 4: hex cu trei, patru, șase sau opt caractere, rgb() cu numere sau procente, unde 100 % înseamnă 255, și hsl() cu nuanța în grade sau în unitățile deg, rad, grad și turn. Valorile pot fi despărțite prin virgule sau spații. Astfel rgb(50%, 50%, 50%) devine rgb(128, 128, 128), iar hsl(0.5turn, 100%, 50%) primește nuanța de 180 de grade, adică #00ffff.
Transparența, din hex cu patru sau opt caractere, ca a patra valoare sau după o bară oblică, este eliminată: instrumentul lucrează cu culori opace și spune câtă transparență era. Valorile din afara intervalelor lor, ca rgb(300, 0, 0), sunt respinse, ca o greșeală de tastare să se vadă, deși CSS le-ar aduce la limită.