Què fa aquesta pàgina i per què és diferent
En una eina de conversió de colors hi ha moltes pàgines semblants, però aquesta no és una més. La pàgina rgb-to-hsl accepta tres números enters entre 0 i 255 que representen la intensitat de llum vermella, verda i blava d’un píxel en una pantalla, i mostra a l’instant l’equivalent en HSL (hue, saturation, lightness): un matís en graus (0–360), una saturació en percentatge i una lluminositat en percentatge. A més, calcula automàticament els altres formats habituals: HEX, HSV, CMYK (estimació per pantalla) i LAB. L’usuari pot editar qualsevol camp i tots s’actualitzen en temps real. Tot el processament es fa al navegador; no es puja res a cap servidor.
El que realment distingeix aquesta pàgina és que converteix des del model nadiu de les pantalles (RGB) cap al model dissenyat per a la raó humana (HSL). En RGB, canviar un sol canal (per exemple, apujar el verd) sovint altera el matís percebut de manera impredictible. En canvi, HSL permet ajustar la lluminositat de manera independent mentre el matís es manté constant. Això la converteix en l’eina idònia per generar paletes de colors, temes clars/foscos i variants accessibles sense perdre la identitat cromàtica. Mentre que RGB expressa valors crus d’intensitat de llum, HSL descriu el color tal com el percebem: quin to és, com de pur és i com de clar o fosc resulta.
Com funciona la conversió RGB → HSL
La transformació matemàtica de RGB a HSL és relativament senzilla, però cal seguir uns passos precisos. Primer, els tres valors de RGB (cada un 0–255) es normalitzen a l’interval dividint per 255. Per exemple, el color 79, 70, 229 es converteix en R′ = 79/255 ≈ 0,310, G′ = 70/255 ≈ 0,275, B′ = 229/255 ≈ 0,898.
A continuació es calculen el valor mínim i màxim del triplet normalitzat:
- Màxim (M) = 0,898 (el blau)
- Mínim (m) = 0,275 (el verd)
- Rang (C) = M − m = 0,898 − 0,275 = 0,623
La lluminositat (Lightness) és la mitjana entre M i m:
L = (M + m) / 2 = (0,898 + 0,275) / 2 = 0,5865 → en percentatge: 58,65 %.
La saturació (Saturation) depèn de la lluminositat. Si M = m, el color és gris i la saturació és 0. Altrament:
- Si L ≤ 0,5:
S = C / (M + m) - Si L > 0,5:
S = C / (2 − M − m)
Com que L = 0,5865 > 0,5:
S = 0,623 / (2 − 0,898 − 0,275) = 0,623 / 0,827 ≈ 0,753 → 75,3 %.
El matís (Hue) es calcula en funció de quin canal és el màxim:
- Si M = R′:
H = (G′ − B′) / C, normalitzat mòdul 6. - Si M = G′:
H = (B′ − R′) / C + 2 - Si M = B′:
H = (R′ − G′) / C + 4
En el nostre exemple, M = B′:
H = (0,310 − 0,275) / 0,623 + 4 ≈ 0,056 + 4 = 4,056
Es multiplica per 60 per passar a graus: H = 4,056 × 60 ≈ 243,4°. Arrodonint, obtenim matís 243°, saturació 75%, lluminositat 59% — que coincideix amb el resultat que mostra l’eina.
La transformació inversa (HSL → RGB) també està implementada. L’eina permet teclejar directament un valor HSL (p. ex. 243, 75%, 59%) i obté el RGB corresponent, juntament amb la resta de formats. Totes les conversions són instantànies i no requereixen cap acció addicional.
Regles d’ús i casos límit
L’eina imposa unes poques regles senzilles per evitar errors d’entrada:
- RGB: cal introduir exactament tres números enters de 0 a 255 separats per comes o espais. Si l’entrada no compleix aquest format, es mostra el missatge: “Introduïu RGB com tres números 0–255, per exemple 79, 70, 229.” No s’accepten decimals, percentatges ni lletres.
- HSL: es pot introduir directament un valor HSL: matís de 0 a 360 graus, saturació i lluminositat com a percentatges (p. ex.
243, 75%, 59%). Una entrada no vàlida mostra: “Introduïu HSL com matís 0–360 amb dos percentatges, per exemple 243, 75%, 59%.” - LAB i CMYK: quan s’entra un valor LAB o CMYK que mapeja fora de l’espai RGB visible, l’eina l’ajusta al color més proper que es pot mostrar en una pantalla. Per tant, si es converteix aquest color ajustat de tornada a LAB o CMYK, pot aparèixer una lleugera diferència. Això és inevitable perquè l’espai LAB és més ampli que l’espai RGB.
- CMYK: l’estimació que dóna l’eina és orientativa per a pantalla. No s’ha d’utilitzar per a impressió professional sense verificar amb un perfil de color real.
Cap dada introduïda surt del navegador. L’eina no requereix connexió a internet per funcionar (un cop carregada la pàgina).
Per a qui és útil aquesta eina
La majoria d’eines de conversió serveixen per a qualsevol ús, però aquesta és especialment valuosa per a perfils concrets:
- Dissenyadors d’interfícies (UI/UX) que necessiten crear paletes accessibles. Amb HSL es pot ajustar la lluminositat sense tocar el matís, cosa fonamental per generar variants que compleixin ràtios de contrast WCAG. Per exemple, es pot enfosquir un color sense que el to es desplaci cap a un altre.
- Desenvolupadors front‑end que tradueixen tokens de disseny (sovint donats en RGB o HEX) a funcions CSS
hsl(). Molts frameworks CSS moderns treballen millor amb HSL per a canvis dinàmics. - Creadors de temes que generen variants clares i fosques d’un color de marca. Ajustant només la lluminositat es conserva la identitat de la marca.
- Dissenyadors de visualització de dades que necessiten escales de color perceptivament ordenades. La lluminositat d’HSL és intuïtiva per a esquemes seqüencials on els valors més alts es corresponen amb colors més clars.
El fet que l’eina mostri tots els formats alhora (HEX, HSV, CMYK, LAB) evita haver d’obrir múltines pestanyes o eines.
Limitacions de l’HSL i alternatives
Tot i que HSL és molt útil per a la manipulació de paletes, no és perceptivament uniforme. Això vol dir que dos colors amb la mateixa lluminositat numèrica poden semblar de brillantor molt diferent. Per exemple, un groc pur (hue 60°) amb lightness 50% es veu molt més clar que un blau pur (hue 240°) amb la mateixa lightness. Això passa perquè l’ull humà percep diferent la lluminositat dels diferents tons.
Per a aplicacions on es necessita uniformitat perceptiva —com en mapes de calor o escales de dades— hi ha models alternatius com LAB (CIE Lab*). LAB separa la lluminositat real (L) de les oponències de colors (a i b) i és més fidel a com l’ull humà distingeix diferències. L’eina ofereix precisament LAB com a format de sortida, i l’usuari pot veure les diferències respecte a HSL.
Una altra limitació és que tant RGB com HSL estan lligats a un espai de color concret, normalment sRGB. Això vol que si es treballa amb pantalles de gamut ampli (DCI‑P3, Adobe RGB), els valors RGB aquí són relatius a sRGB i la correspondència no és directa. Per a professionals de la imatge, es recomana usar espais de color independents del dispositiu com LAB.
Preguntes freqüents (FAQ)
Puc introduir HSL sense percentatges?
No. L’eina espera que la saturació i la lluminositat portin el símbol % per diferenciar-les del matís. Si intenteu 243, 75, 59, l’eina ho rebutjarà amb el missatge d’error corresponent.
Per què el CMYK que surt no coincideix amb el que veig imprès?
L’estimació CMYK és només per a pantalla, sense tenir en compte el perfil de la impressora ni el paper. Convertir de sRGB a CMYK sense perfil és una aproximació. Per a treball professional d’impressió, cal utilitzar eines que permetin gestionar perfils ICC.
Si introdueixo un valor LAB que està fora del rang RGB, quin color es mostra?
L’eina ajusta el color al més proper dins de l’espai RGB visible. Això pot provocar que el color mostrat sigui lleugerament diferent del que esperàveu, i convertir-lo de tornada a LAB donarà un valor diferent de l’original.
Puc utilitzar decimals per al RGB?
No. RGB només accepta enters enters de 0 a 255. Si necessiteu valors decimals (com en certs càlculs), convertiu-los primer a enters arrodonits.
L’eina funciona sense connexió?
Un cop carregada la pàgina, sí. Tot el codi JavaScript s’executa al vostre navegador. Cap dada surt del vostre ordinador.
Per què el matís de vegades és diferent si en lloc d’RGB introdueixo HEX?
En realitat, l’eina fa la mateixa conversió independentment del format d’entrada. Si introduïu HEX que correspon a un RGB, el matís hauria de ser idèntic. Si observeu diferències, pot ser per arrodoniments en la visualització dels decimals.