Convertidor de HSL a HEX

Què fa aquesta pàgina

Introduïu un color en format HSL — tonalitat en graus (0–360), saturació en percentatge i lluminositat en percentatge — i la pàgina us mostra instantàniament el codi hexadecimal (HEX) equivalent. El codi HEX és la notació de sis dígits (o la forma abreujada de tres dígits) que s’utilitza a tot arreu en CSS i en eines de disseny, com ara #1E90FF. A mesura que escriviu o seleccioneu un color, el valor HEX s’actualitza immediatament. No cal prémer cap botó: l’actualització és en temps real.

Per què aquesta pàgina és diferent

Aquesta pàgina està dedicada exclusivament a la conversió d'HSL a HEX. El model HSL està dissenyat per raonar sobre el color des d’una perspectiva humana: canviar la lluminositat manté intacta la tonalitat, cosa que el fa ideal per generar paletes i temes. L’HEX, en canvi, és una notació RGB de sis dígits (o de tres dígits en forma abreujada); no porta cap canal alfa tret que s’utilitzi la forma de vuit dígits. La conversió és directa i sense pèrdues dins del gamut sRGB, a diferència de les conversions que impliquen LAB o CMYK, que poden ajustar colors fora de gamut. Cap altra eina del nostre lloc fa exactament aquesta conversió amb la mateixa dedicació: aquí el focus és net i clar, evitant distraccions amb espais de color no lineals.

Entrades i sortides

Entrades: l’usuari proporciona un valor de tonalitat entre 0 i 360, un percentatge de saturació (0–100 %) i un percentatge de lluminositat (0–100 %). Exemple: 243, 75%, 59%.

Sortides: la sortida principal és un codi hexadecimal (p. ex., #4f46e5). Si cada canal RGB es pot representar amb un sol dígit hexadecimal, l’eina també mostra la forma abreujada de tres dígits (p. ex., #abc). Tots els altres camps de color (RGB, HSV, CMYK, LAB) s’actualitzen simultàniament, de manera que teniu una visió completa del color en diversos espais.

La taula següent resumeix els camps que apareixen a la interfície:

Regles i casos límit

Qualsevol edició en un camp actualitza instantàniament tots els altres camps. Si els valors HSL estan fora dels rangs vàlids (tonalitat 0–360, saturació 0–100 %, lluminositat 0–100 %) o no tenen el format correcte, l’eina mostra el missatge d’error:

Introduïu HSL com a tonalitat 0–360 amb dos percentatges, ex.: 243, 75%, 59%.

És important incloure el signe % als valors de saturació i lluminositat — si l’oblideu, el sistema considerarà l’entrada no vàlida.

La conversió d’HSL a HEX es manté sempre dins del rang visible RGB; no cal cap ajust per colors fora de gamut, perquè l’HSL i l’RGB comparteixen el mateix espai sRGB. El valor CMYK que es mostra és una estimació en pantalla i pot diferir dels valors d’impressió professional. Tot el processament es fa directament al navegador; res del que introduïu es puja a cap servidor.

Errors habituals que els usuaris comenten al nostre servei d’atenció:

• Escriure 100 en lloc de 100% per a la saturació o la lluminositat.
• Utilitzar una tonalitat de 360 (valor vàlid) sense adonar-se que és equivalent a 0.
• Confondre les comes amb punts en separadors decimals.

El model de color HSL

HSL significa Hue, Saturation, Lightness (tonalitat, saturació, lluminositat). La tonalitat es mesura en graus sobre una circumferència cromàtica: 0° és vermell, 120° verd, 240° blau, i 360° torna a ser vermell. La saturació és la intensitat del color, del 0 % (gris) al 100 % (color pur). La lluminositat va del 0 % (negre) al 100 % (blanc), passant pel 50 % com a color «normal».

Aquest model va ser popularitzat pels navegadors amb CSS3, perquè resulta molt més intuïtiu que el model RGB per crear gradients i paletes: ajustant només la lluminositat s’obtenen tons més clars o més foscos del mateix color base. Per exemple, per obtenir un blau més fosc per a un fons de botó sense canviar la tonalitat, simplement reduïu el valor de lluminositat.

L’estructura del codi hexadecimal

El codi hexadecimal (HEX) és una representació dels canals vermell, verd i blau de l’espai RGB, cadascun en el rang 0–255, escrit en base 16. Cada canal es converteix en dos dígits hexadecimals (00–FF). Per tant, un codi HEX complet té sis caràcters precedits de #. Per exemple, el vermell pur rgb(255,0,0) es converteix a #FF0000.

Quan tots tres canals es poden expressar amb un sol dígit hexadecimal (p. ex., rgb(17, 204, 255) es converteix en #11CCFF i es pot abreujar a #1CF), l’eina mostra també la forma abreujada. Aquesta forma és vàlida en CSS i alguns navegadors l’interpreten repetint cada dígit: #abc equival a #aabbcc.

La notació HEX no porta canal alfa en la seva forma de sis dígits. Per a transparència, CSS utilitza la forma de vuit dígits (p. ex., #rrggbbaa) o la funció rgba().

Manual de conversió: d’HSL a RGB a HEX

Per als curiosos, l’algorisme de conversió funciona en dues etapes:

1. HSL a RGB – Es normalitzen els valors: la tonalitat es divideix per 360, la saturació i la lluminositat per 100. Després s’aplica la fórmula estàndard de transformació (basada en la funció de càlcul de croma, el valor X, i els valors R, G, B). No hi ha pèrdua d’informació dins de sRGB.

2. RGB a HEX – Cada canal (0–255) es converteix a dos dígits hexadecimals. Per exemple, 79 en decimal esdevé 4F en hexadecimal, 70 esdevé 46, i 229 esdevé E5. Ajuntant-los obtenim #4F46E5.

Aquest procés és determinista i reversible: donat un HEX, sempre podreu recuperar l’HSL original dins de la precisió de la representació.

Casos d’ús pràctics i accessibilitat

Els dissenyadors construeixen paletes en HSL i necessiten el codi HEX per implementar-les en fitxers CSS o en eines com Figma, Sketch o Adobe XD. Els desenvolupadors front-end reben valors HSL dels dissenys i han de traduir-los a propietats CSS com color o background-color. En ambdós casos, aquesta eina proporciona la conversió immediata sense haver de recórrer a càlculs manuals.

Un ús específic és l’accessibilitat cromàtica. Les pautes WCAG demanen certes relacions de contrast entre text i fons. Amb HSL, podem modificar la lluminositat per augmentar el contrast tot conservant la tonalitat del color corporatiu. Un cop trobem el valor òptim, l’eigna ens dóna el HEX per al codi final.

Limitacions de l’HEX respecte a l’HSL

Tot i que la conversió és directa, l’HEX té limitacions inherents:

• Sense canal alfa en la forma de sis dígits: si necessiteu transparència, haureu d’usar #rrggbbaa o rgba().
• No té una dimensió de «lluminositat» explícita: per variar la claredat d’un HEX, heu de manipular els tres canals RGB, cosa menys intuïtiva que ajustar un sol paràmetre en HSL.
• No és un espai perceptualment uniforme: una mateixa variació en HEX no produeix el mateix canvi visual en tot el rang.

Malgrat això, l’HEX continua sent el format estàndard per als fulls d’estil web i per a la majoria d’eines gràfiques.

Preguntes freqüents

Per què el valor CMYK que es mostra no és exacte per a impressió?
La conversió a CMYK es fa mitjançant una aproximació genèrica per a pantalla, sense perfil de color específic de la impressora. Per a valors professionals d’impressió, cal utilitzar eines ICC.

Puc utilitzar un valor de tonalitat 360?
Sí, 360° és equivalent a 0° (vermell). L’eina accepta ambdós valors dins del rang 0–360.

Què significa el missatge «Introduïu HSL com a tonalitat 0–360 amb dos percentatges»?
Indica que els camps no estan ben formats. Assegureu-vos d’incloure el caràcter % darrere dels números de saturació i lluminositat, i separeu els tres valors amb comes o espais.

La conversió d’HSL a HEX pot donar un color fora de gamut?
No. Els models HSL i RGB comparteixen el mateix espai sRGB. Qualsevol color HSL dins dels rangs vàlids es pot representar exactament en HEX sense necessitat de retallar-lo.

Per què de vegades es mostra un HEX de tres dígits?
Perquè cada canal RGB (vermell, verd, blau) es pot expressar amb un sol dígit hexadecimal. La forma abreujada estalvia caràcters i és completament equivalent a la de sis dígits.

Puc enganxar un valor HEX per obtenir l’HSL corresponent?
Aquesta pàgina està dissenyada per convertir d’HSL a HEX. Per a la conversió inversa (HEX a HSL), teniu disponible una altra eina específica al nostre lloc.