Convertidor de HSL a RGB

Conversió d'HSL a RGB: Per què és única i com funciona

L'eina de conversió HSL a RGB d'aquest lloc resol una necessitat concreta: passar d'un model de color dissenyat per al raonament humà (HSL) als números exactes que un monitor utilitza per emetre llum (RGB). Si has intentat generar paletes de colors mantenint un to constant o ajustar la lluminositat sense alterar la saturació, sabràs que HSL és l'opció natural. Però el teu codi CSS, el teu programari de disseny o el teu motor gràfic espera tripletes RGB de 0 a 255. Aquí és on aquesta eina és essencial: et mostra la correspondència exacta, sense pèrdua i sense retallades de gamma.

Què fa aquesta pàgina i per què és diferent

L'usuari introdueix un color en format HSL —to (hue) en graus (0–360), saturació i lluminositat en percentatges— i l'eina retorna instantàniament els valors RGB equivalents, juntament amb HEX, HSV, CMYK i LAB. La principal diferència respecte a altres convertidors és triple:

1. HSL està dissenyat per al raonament humà. Canviar la lluminositat en HSL manté el to intacte. Per exemple, si parteixes d'un blau pur (to 240°, saturació 100%, lluminositat 50%) i augmentes la lluminositat al 80%, obtens un blau pastel amb el mateix to. En RGB, aquesta operació no és directa; requereix càlculs que ajusten els tres canals simultàniament. Per això els dissenyadors utilitzen HSL per generar paletes i temes: pots variar la lluminositat o la saturació sense canviar la percepció de color base.

2. La conversió és sense pèrdua. Cada triplet HSL vàlid (dins del rang 0–360, 0–100%, 0–100%) es mapeja a un únic triplet RGB dins del rang 0–255. No hi ha ambigüitats ni arrodoniments que generin valors fora de límit. Això és important perquè, a diferència de conversions des de LAB o CMYK a RGB, aquí no es produeix cap retallada de gamma (out‑of‑gamut clipping). Si converteixes un color HSL a RGB i després tornes a RGB a HSL, obtens exactament el mateix valor original. No hi ha canvi de color en el camí d'anada i tornada.

3. No hi ha retallada de gamma. Quan convertiu des de LAB (un espai de color que cobreix un rang més ampli que el monitor) o des de CMYK (que depèn de la tinta i el paper), alguns colors poden caure fora de la gamma del dispositiu. Llavors el programari ha de retallar o apropar el color, provocant una desviació visible. En HSL a RGB, tots els colors possibles de HSL estan dins de la gamma RGB estàndard (sRGB). Per tant, el que veus a la pantalla és exactament el que obtens.

Entrades i sortides: com funciona la interfície

L'eina espera una entrada en el format to, saturació%, lluminositat%. Per exemple: 243, 75%, 59%. Un cop introduït, tots els camps s'actualitzen a l'instant: HEX (p. ex. #4F46E5), RGB (79, 70, 229), HSL (243°, 75%, 59%), HSV (241°, 69%, 90%), CMYK (66%, 69%, 0%, 10%) i LAB (32, 27, -62). No cal prémer cap botó; la conversió es produeix en temps real mentre escrius.

Què passa si l'entrada no és vàlida? Si l'usuari escriu un valor incorrecte —per exemple, un to fora del rang 0–360, o percentatges sense el símbol %, o una coma mal posada— l'eina mostra un missatge d'error clar: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%." Això evita confusions: no es mostren resultats parcials ni valors inventats.

Nota sobre CMYK: el valor mostrat és una estimació en pantalla. Pot diferir dels valors utilitzats en impressió professional a causa de les variacions de paper, tinta i perfils d'impressora. Per a treballs d'impressió exactes, cal fer servir perfils ICC específics.

Qui necessita aquesta eina i per a què

• Dissenyadors que construeixen paletes de colors. Quan utilitzes HSL per generar una paleta d'accessibilitat (per exemple, variants de blau per a botons primaris i secundaris) necessites els valors RGB per codificar els estils al teu framework CSS. Amb aquesta eina, pots ajustar la lluminositat en HSL i veure immediatament el RGB que hauràs d'escriure al codi.
• Desenvolupadors front‑end. Les eines de disseny sovint expressen colors en HSL. Però CSS accepta tant HSL com RGB. Si treballes amb un equip que prefereix RGB per consistència, o si necessites passar valors a una llibreria de gràfics que només accepta tripletes 0–255, aquí tens la conversió sense càlculs manuals.
• Qualsevol que prefereixi raonar sobre color en termes humans. El to (què fa que un color sigui blau o verd), la saturació (intensitat) i la lluminositat (claror) són conceptes intuïtius. Però la pantalla funciona amb llum vermella, verda i blava. Aquesta eina fa de pont entre ambdós mons.

Models de color: què representen i quan usar-los

La pàgina mostra sis espais de color. Entendre per a què serveix cadascun ajuda a triar la conversió adequada:

• HEX: notació hexadecimal compacta de RGB, molt utilitzada en disseny web per la seva brevetat. El valor HEX de l'exemple és #4F46E5.
• RGB: model additiu de llum. Cada canal representa la intensitat de llum vermella, verda o blava. És el model natiu de totes les pantalles digitals. Quan escrius color: rgb(79, 70, 229); a CSS, estàs dient al navegador exactament quina quantitat de cada color de llum ha d'emetre.
• HSL: model perceptiu que separa to, saturació i lluminositat. Ideal per a paletes perquè canviar L manté H constant.
• HSV (o HSB): similar a HSL, però amb valor (brightness) en lloc de lluminositat. HSV és útil en eines de selecció de color on es vol controlar la intensitat màxima.
• CMYK: model subtractiu per a impressió. Els colors es creen restant llum blanca amb cian, magenta, groc i negre. Com que la conversió des de RGB a CMYK depèn del perfil d'impressió, el valor mostrat aquí és només una aproximació.
• LAB: espai de color perceptivament uniforme, basat en la visió humana. LAB cobreix un rang més ampli que RGB, per això la conversió de LAB a RGB pot requerir retallada. En aquesta eina, LAB es calcula a partir de RGB, i per tant sempre estarà dins de la gamma RGB.

Conceptes clau: additiu vs. subtractiu, gamma de color i limitacions

Additiu (RGB): el color es forma sumant llum de tres fonts. Si les tres estan al màxim (255, 255, 255), obtenim blanc. Si cap emet llum (0, 0, 0), negre. Això és com funcionen els monitors, televisors i pantalles de telèfon.

Subtractiu (CMYK): el color es forma restant llum blanca mitjançant pigments. El blanc és la superfície sense tinta; el negre s'aconsegueix amb tots els pigments. Per això la conversió RGB→CMYK no és directa: depèn de la tinta, el paper i la il·luminació. L'estimació d'aquesta eina és vàlida per a proves, no per a impressió final.

Gamma de color: el conjunt de colors que un dispositiu pot reproduir. sRGB, l'espai estàndard per a la web, té una gamma limitada. Quan un color LAB o CMYK està fora d'aquesta gamma, la pantalla no pot mostrar-lo exactament. En canvi, com que tot el rang HSL cau dins de sRGB (si S i L estan entre 0% i 100% i H entre 0–360), no hi ha pèrdua en la conversió cap a RGB.

Errors freqüents i bones pràctiques en l'ús d'HSL

• Oblidar el símbol de percentatge. L'entrada correcta és 120, 100%, 50%, no 120, 100, 50. El missatge d'error t'ho recorda.
• Confondre saturació i lluminositat. Una saturació del 0% dona gris, independentment del to. Una lluminositat del 0% dona negre absolut. Canviar L al 100% dona blanc.
• Pensar que el to 0 i 360 són diferents. En realitat, to=0 i to=360 representen el mateix color (vermell). La convenció matemàtica és que el to es pren mòdul 360. L'eina accepta qualsevol dins del rang.
• Utilitzar CMYK de pantalla per a impressió. No ho facis. El valor CMYK que veus aquí és una estimació basada en un model genèric (generalment, el perfil de conversió de sRGB a CMYK del programari del navegador). Per a treballs professionals, consulta amb el teu servei d'impressió o utilitza un programa de disseny que permeti perfils específics (com Adobe InDesign amb perfils ICC).

Preguntes freqüents (FAQ)

P: Per què la conversió HSL a RGB no té pèrdua?
R: Perquè HSL i RGB estan dins del mateix espai de color sRGB. Tots els valors HSL possibles corresponen a tripletes RGB dins del rang 0–255, i l'algorisme de conversió és bijectiu (invertible). No hi ha colors fora de gamma.

P: Puc introduir un to amb decimals, com 243.5?
R: Sí, el to accepta valors decimals (per exemple, 243.5°). L'eina farà la conversió correcta. Recorda mantenir saturació i lluminositat com a percentatges enters o decimals (p. ex., 75.5%).

P: El valor CMYK que veig servirà per a la meva impressora?
R: No exactament. És una estimació genèrica. Les impressores tenen perfils de color propis i el resultat final depèn del paper i la tinta. Utilitza aquest valor només com a referència, no com a valor definitiu.

P: Què és el LAB i per què apareix si només demano HSL?
R: LAB és un espai de color perceptivament uniforme que es calcula a partir de RGB. L'eina el mostra per completesa, perquè molts dissenyadors l'utilitzen per avaluar diferències de color. Tanmateix, la conversió de LAB a RGB pot retallar colors fora de gamma; en aquest sentit, el LAB que veus aquí sempre estarà dins de sRGB.

P: Les dades que introdueixo s'envien a cap servidor?
R: No. Totes les conversions es fan directament al teu navegador, amb JavaScript. Res del que escriguis surt del teu ordinador.