Què fa aquesta pàgina i per què existeix
Aquesta pàgina rep un codi de color hexadecimal (de sis dígits o de tres) i el converteix instantàniament al seu equivalent HSL (matís en graus, saturació i lluminositat en percentatge). Al mateix temps mostra el color en tots els altres formats compatibles (RGB, HSV, CMYK, LAB), de manera que en puguis copiar el que necessitis. La conversió és bidireccional: en editar qualsevol valor, tots els camps s’actualitzen alhora.
Allò que distingeix aquesta eina d’un simple convertidor genèric és que posa l’accent en la diferència fonamental entre HEX i HSL. HEX és una notació RGB crua: sis dígits hexadecimals (o la forma abreujada de tres) que codifiquen directament els valors de vermell, verd i blau (cada parell representa un valor de 0 a 255 en base 16). És compacte i omnipresent en CSS i eines de disseny, però no és intuïtiva per fer ajustos humans. HSL, en canvi, està construït per al raonament humà: el matís es mesura en graus (0–360), mentre que la saturació i la lluminositat són percentatges. Canviar només la lluminositat manté el matís inalterable, cosa que fa que HSL sigui el format preferit per generar paletes de colors, sistemes de temes i variants de botons o fons.
Cal remarcar que el codi HEX estàndard (de sis o tres dígits) no porta informació de transparència (canal alfa), i HSL tampoc n’inclou. La conversió, per tant, sempre treballa amb colors completament opacs.
Com s’estructura un codi HEX i un color HSL
HEX – codi hexadecimal de sis o tres dígits
Un codi HEX com #4f46e5 es desglossa en tres parells: 4f (vermell), 46 (verd), e5 (blau). Cada parell és un valor de 0 a 255 en base 16. La forma abreujada de tres dígits (#abc) es converteix automàticament en sis repetint cada dígit: #abc esdevé #aabbcc. Per tant, #abc és equivalent a #aabbcc. La pàgina admet ambdues formes, amb o sense el símbol # al davant.
HSL – matís, saturació, lluminositat
- Matís (Hue): valor angular en una roda de colors. 0° o 360° és vermell, 120° és verd, 240° és blau.
- Saturació (Saturation): percentatge que indica la intensitat del color. 0% és gris total, 100% és el color pur.
- Lluminositat (Lightness): percentatge de brillantor. 0% és negre, 100% és blanc, 50% és el color pur (sense addició de blanc ni negre).
Aquesta tripleta fa que sigui molt natural ajustar la lluminositat per crear variants d’un botó (fons, hover, actiu) mantenint el mateix matís i saturació. Amb HEX o RGB, en canvi, has de modificar tres valors sense una intuïció clara de com afecten la percepció.
El procés de conversió – de HEX a HSL
Internament, la pàgina segueix el camí estàndard: HEX → RGB → HSL. No hi ha càlcul directe HEX→HSL perquè HEX no és més que una representació de RGB.
-
De HEX a RGB: els parells hexadecimals es converteixen a decimals. Per exemple,
#1E90FF:1E₁₆= 30 decimal (vermell)90₁₆= 144 decimal (verd)FF₁₆= 255 decimal (blau) Per tant, RGB(30, 144, 255).
-
De RGB a HSL: les fórmules estàndard (basades en la norma CSS) normalitzen els valors de RGB a intervals, troben el màxim i mínim, i calculen:
- Lluminositat L = (max + min) / 2
- Saturació S = 0 si max = min; si L ≤ 0.5, S = (max – min) / (max + min); si L > 0.5, S = (max – min) / (2 – max – min)
- Matís H: depèn de quin sigui el valor màxim (vermell, verd o blau) i la diferència entre els altres dos.
Per a l’exemple RGB(30, 144, 255):
- max = 255, min = 30 → L = (255+30)/2 / 255 = 0.5588 → 55.88%
- S = (255-30) / (2 – 255/255 – 30/255?) millor amb decimals: (225/255) / (2 – 1 – 0.1176) = 0.8824 / 0.8824 = 1 → 100%
- H: el màxim és blau (255), i verd > vermell → H = 60 * ( (144-30)/(225) ) + 240 = 60*(114/225)+240 = 60*0.5067+240 = 30.4+240 = 270.4° → aproximadament 270°.
Així, #1E90FF es converteix en HSL(270°, 100%, 56%). La pàgina mostrarà aquests valors amb una o dues xifres decimals.
Casos límit i errors que cal conèixer
Entrada no vàlida
Si s’introdueix un text que no sigui un codi HEX vàlid de sis o tres dígits (per exemple, #xyz o 12345), la pàgina mostra el missatge d’error: “Introduïu un codi hex com #4f46e5 o #abc.” No es permeten valors fora del rang 0-9, a-f ni caràcters extra.
Tres dígits vs. sis
El codi de tres dígits s’expandeix automàticament: #abc → #aabbcc. Això significa que la paleta de colors possibles amb tres dígits és molt més limitada (4096 colors) que amb sis (16,7 milions). La pàgina converteix de manera correcta, però l’usuari ha de saber que #abc no és el mateix que #aabbcc (són exactament iguals).
Fora de gama (out‑of‑gamut)
Quan es treballa amb espais de color com LAB o CMYK, és possible entrar un valor que, tot i ser vàlid en aquell espai, no sigui reproduïble en una pantalla RGB. En aquests casos, la pàgina ajusta el color al més proper visible. Si després es torna a convertir a HEX, pot aparèixer una lleugera diferència respecte al valor original. Això és inherent a la diferència de gama entre espais de color.
CMYK és una estimació
Els valors CMYK que mostra la pàgina són una estimació per a pantalla, basada en la conversió des de RGB. No s’han d’utilitzar per a impressió professional sense calibratge previ. La impressió real depèn del perfil de color de la impressora, del paper i de la tinta.
Per a qui és útil aquesta eina
- Desenvolupadors front‑end: sovint reben codis HEX d’un disseny en Figma o Sketch i necessiten HSL per a CSS custom properties (
--color-primary: hsl(270, 100%, 56%)). Amb HSL és trivial crear variants:--color-primary-light: hsl(270, 100%, 66%)per a hover o--color-primary-dark: hsl(270, 100%, 36%)per a text. - Dissenyadors UI/UX: pensen en termes de matís, saturació i lluminositat. Tenir un color de marca donat en HEX i voler explorar variacions és molt més ràpid si el converteixen a HSL i ajusten un sol paràmetre.
- Creadors de paletes: HSL facilita la generació de combinacions complementàries (girar 180° el matís), anàlogues (girar ±30°) o monocromàtiques (mantenir matís, variar saturació i lluminositat).
- Auditors d’accessibilitat web: han de verificar contrastos segons WCAG. Amb HSL, augmentar la lluminositat d’un fons o del text mentre es manté el matís és directe. Per exemple, per assegurar una relació de contrast de 4.5:1 es pot enfosquir o aclarir el color mantenint la mateixa tonalitat.
Preguntes freqüents (FAQ)
Puc introduir un codi HEX sense el símbol #?
Sí, la pàgina accepta tant #4f46e5 com 4f46e5. També accepta la forma de tres dígits amb o sense #.
Quina diferència hi ha entre HSL i HSV?
Ambdós comparteixen el matís (H), però la saturació i el valor/lluminositat es calculen de manera diferent. HSV (o HSB) usa Brightness (valor màxim de RGB) mentre que HSL usa Lightness (mitjana dels màxims i mínims). Per a colors purs, HSL sempre té lluminositat 50%, mentre que HSV té saturació 100% i valor 100%. La pàgina mostra també HSV, així que pots comparar.
Si passo un color de HEX a HSL i després torno a HEX, obtinc el mateix codi?
Sí, si el valor HSL és dins la gama RGB (que és el cas de qualsevol HEX vàlid). La conversió és bijectiva: HEX → RGB → HSL → RGB → HEX retorna l’original. Ara bé, si entres un RGB amb decimals (ex. via editor) o un LAB fora de gama, pot haver-hi arrodoniment.
Per què no es mostra cap canal alfa?
Perquè el codi HEX estàndard (de sis o tres dígits) no conté cap informació de transparència. Per a colors amb transparència es necessita l’extensió de vuit dígits (RGBA), i en HSL normalment s’afegeix un paràmetre opcional (HSLA). Aquesta pàgina treballa exclusivament amb colors opacs.
Els valors CMYK que veig són fiables per a impressió?
No. Són estimacions basades en la conversió genèrica de RGB a CMYK. Per a impressió professional cal utilitzar perfils ICC específics i eines de prepressa.
Què passa si introdueixo un valor HEX no vàlid com #GGG?
La pàgina mostra l’error “Introduïu un codi hex com #4f46e5 o #abc.” No realitza cap conversió fins que el codi sigui correcte.
Aquest convertidor HEX a HSL és una eina senzilla però potent per a qualsevol persona que treballi amb color en entorns digitals. Totes les conversions es fan al navegador: no s’envia ni s’emmagatzema cap dada a cap servidor.