Convertidor de HEX a RGB

Com funciona la conversió de HEX a RGB

Quan escriviu un codi de color hexadecimal com #4f46e5 al camp d'entrada, la pàgina el converteix instantàniament als valors RGB corresponents: tres nombres enters entre 0 i 255 que els monitors i pantalles utilitzen directament per barrejar llum vermella, verda i blava. La conversió és purament matemàtica: cada parell de dígits hexadecimals es transforma a base 10 mitjançant la fórmula 16^1 * primer_digit + 16^0 * segon_digit. Per exemple, 4f es descompon en 4 * 16 + 15 = 79, 46 en 4 * 16 + 6 = 70, i e5 en 14 * 16 + 5 = 229. El resultat és 79, 70, 229, sense cap arrodoniment ni retall de gamma perquè la conversió entre base 16 i base 10 és exacta i reversible.

El que fa diferent aquesta pàgina respecte a altres convertidors és que tracta el codi HEX com el que realment és: una representació compacta dels mateixos tres canals de 8 bits que l'RGB. Mentre que els codis HEX són omnipresents en CSS (color: #4f46e5), sovint cal el triplet numèric per treballar amb JavaScript, canvas, API gràfiques o programari de disseny que espera valors enters. La pàgina no fa re-sintetitzar colors ni aplica cap transformació creativa: agafa el valor hexadecimal textual i aplica l'aritmètica exacta per obtenir els canals.

Format d'entrada: sis dígits, tres dígits i el prefix

La pàgina accepta codis HEX en dos formats: el complet de sis dígits (#RRGGBB) i la forma abreujada de tres dígits (#RGB). En el format abreujat, cada dígit es duplica per expandir-lo a sis: #abc es converteix internament a #aabbcc abans de calcular els valors RGB. Així, #abc dona 170, 187, 204 perquè aa = 0xAA = 170, bb = 0xBB = 187, cc = 0xCC = 204. Aquesta expansió segueix la pràctica estàndard de CSS, on #rgb equival exactament a #rrggbb.

El prefix # és opcional. Podeu escriure 4f46e5 o #4f46e5, i la pàgina el tracta igual. Si introduïu un valor que no s'ajusta a cap dels dos formats —per exemple, un codi de vuit díxits que inclou canal alfa, o una cadena amb lletres no hexadecimals— la pàgina mostra el missatge d'error: "Enter a hex color like #4f46e5 or #abc.". No es fan suposicions ni conversions parcials: l'usuari rep una indicació clara del format esperat.

Tots els càlculs es fan al navegador de l'usuari. Res del que s'introdueix es puja a cap servidor ni s'emmagatzema. Això és rellevant per a desenvolupadors que treballen amb dades sensibles o simplement volen privacitat total.

Relació exacta entre HEX i RGB: per què cada parell de dígits correspon a un canal

El sistema hexadecimal utilitza base 16, amb dígits del 0 al 9 i les lletres A a F (majúscules o minúscules, indistintament). Un canal de 8 bits pot representar 256 valors (de 0 a 255). Com que 16 × 16 = 256, exactament dos dígits hexadecimals cobreixen tot el rang possible. Per tant, en un codi HEX de sis dígits, els dos primers corresponen al vermell, els dos del mig al verd i els dos últims al blau.

Per exemple:

• #FF0000 → vermell pur: FF = 255, 00 = 0, 00 = 0.
• #00FF00 → verd pur: 00 = 0, FF = 255, 00 = 0.
• #0000FF → blau pur: 00 = 0, 00 = 0, FF = 255.
• #FFFFFF → blanc: tots tres canals al màxim (255, 255, 255).
• #000000 → negre: tots tres canals a zero (0, 0, 0).

Els valors intermedis segueixen la mateixa lògica. #808080 (gris mitjà) correspon a 128, 128, 128 perquè 80 en hexadecimal = 8×16 + 0 = 128. Observeu que #808080 té els tres canals iguals, cosa que produeix un to de gris neutre. Aquesta correspondència directa permet fer comprovacions ràpides: si el codi HEX té els tres parells iguals, el color resultant serà un gris (o blanc/negre en els extrems).

Com s'actualitzen tots els formats de color simultàniament

La pàgina no mostra només l'RGB, sinó que actualitza a la vegada els valors HSL, HSV, CMYK i LAB. Qualsevol canvi en un camp (ja sigui HEX, RGB o un altre) es propaga automàticament a la resta. Això és útil per a dissenyadors que necessiten veure el mateix color expressat en diferents models per a diferents contextos: HSL per a ajustos intuïtius de to, saturació i lluminositat; CMYK per a impressió; LAB per a espais de color perceptivament uniformes.

La conversió a HSL, per exemple, parteix dels valors RGB normalitzats a l'interval i aplica les fórmules estàndard. Per a #4f46e5 (RGB 79, 70, 229), la normalització dona aproximadament 0.3098, 0.2745, 0.8980. El to resultant és 243.4°, la saturació 74.4% i la lluminositat 58.6%. Aquestes xifres permeten entendre millor la posició del color dins de la roda cromàtica que el simple triplet numèric.

Les conversions són internes al navegador i segueixen les especificacions CSS Color Level 4 per a espais com sRGB i sRGB lineal, sense cap pèrdua de precisió addicional. El valor CMYK es calcula a partir del RGB sense model de tinta específic (és una aproximació útil, no un valor de separació per a impressora real). De totes maneres, l'eina principal segueix sent la conversió HEX a RGB, que és immediata i exacta.

Errors comuns en introduir codis HEX

Tot i que el format sembla senzill, hi ha errors freqüents que la pàgina detecta:

1. Utilitzar vuit dígits amb canal alfa (#RRGGBBAA). Aquesta pàgina no el processa perquè els canals RGB no inclouen alfa. L'usuari ha d'eliminar els dos últims dígits o usar un altre convertidor específic per a RGBA.
2. Oblidar-se del prefix # o posar-lo malament. La pàgina accepta amb o sense #, però no accepta caràcters com & o espais.
3. Confondre lletres majúscules i minúscules. No hi ha problema: #ABCDEF i #abcdef són equivalents. La pàgina tracta les lletres de manera insensible a majúscules.
4. Escriure un número decimal en lloc d'hexadecimal. Per exemple, escriure 255,0,0 no és un codi HEX vàlid. La pàgina mostrarà l'error.
5. Introduir un codi de sis dígits però amb caràcters no hexadecimals (com #GGHHIJ). Les lletres fora del rang A-F produeixen l'error.

Totes aquestes situacions són gestionades amb el mateix missatge d'error, sense cap interpretació creativa. Això evita sorpreses i assegura que l'usuari corregeixi el format abans de continuar.

Per què fer la conversió manual si ja existeix l'HEX?

El codi HEX és compacte (6 caràcters) i es pot copiar fàcilment des d'un fitxer de disseny o d'un navegador. Però moltes eines de programació no l'accepten directament. Per exemple, l'API Canvas de JavaScript espera fillStyle = "rgb(79,70,229)" o fillStyle = "rgba(79,70,229,0.5)". Altres llibreries, com D3.js o Processing, requereixen arrays de nombres. Fins i tot alguns programes de disseny com Adobe Photoshop permeten introduir valors HEX, però sovint el panell de color treballa millor amb valors RGB lliscants.

A més, entendre la relació numèrica entre els canals ajuda a predir el comportament del color: per exemple, per a #4f46e5, el blau (229) és molt més alt que el vermell (79) i el verd (70), de manera que el color és dominantment blau-violaci. Si volem un to més clar, podem augmentar els tres canals proporcionalment, cosa que és fàcil de fer si coneixem els valors RGB.

L'eina també és útil per a estudiants d'informàtica o disseny que volen veure com el sistema hexadecimal codifica la informació de color. Cada parell de dígits representa 8 bits, i la gamma completa de 16,7 milions de colors (256³) es pot expressar amb només 6 dígits hexadecimals. Això és un exemple elegant de compactació de dades.

Preguntes freqüents (FAQ)

1. Per què el codi #abc no és el mateix que #aabbcc en alguns convertidors?
En aquesta pàgina, #abc s'expandeix exactament a #aabbcc abans de la conversió. Això és el comportament estàndard de CSS. Altres eines podrien interpretar #abc com un color diferent, però aquí seguim la regla de duplicar cada dígit.

2. Puc introduir un codi HEX sense el símbol #?
Sí. Tant #4f46e5 com 4f46e5 funcionen. La pàgina ignora el # si el detecta al principi.

3. Què passa si introdueixo un codi de vuit dígits com #4f46e5ff?
La pàgina no el processa. Mostrarà l'error demanant un codi de sis o tres dígits. Per a colors amb alfa, cal una eina específica HEX a RGBA.

4. Per què els valors RGB sempre surten sencers?
Perquè la conversió de hexadecimal a decimal sempre dona un enter, ja que cada parell de dígits es mapeja directament a un nombre enter de 0 a 255. No hi ha decimals ni arrodoniment.

5. La pàgina guarda algun dels colors que introdueixo?
No. Tots els càlculs es fan al navegador i no s'envia res a cap servidor. No hi ha emmagatzematge de cap mena.

6. Puc fer la conversió inversa (RGB a HEX) amb la mateixa pàgina?
Aquesta pàgina està dissenyada per a HEX → RGB. La conversió inversa es troba a l'eina RGB a HEX, que aplica el procés contrari: convertir cada canal (0–255) a dos dígits hexadecimals i concatenar-los. Les dues pàgines són complementàries però independents.

---

Taula de referència ràpida: exemples de codis HEX comuns i els seus RGB

Per a desenvolupadors: notar que #1E90FF té canal vermell baix (30), canal verd mitjà (144) i canal blau molt alt (255), resultant en un blau viu. En canvi, #4f46e5 té vermell i verd similars (79 i 70) i blau alt (229), produint un to més porpra. Aquesta observació directa dels números ajuda a triar colors per contrast o harmonia sense necessitat de veure'l en pantalla.

La pàgina, doncs, resol una operació senzilla de manera exacta i transparent, sense cap capa de complicació innecessària, i proporciona totes les dades addicionals que puguin ser útils en un flux de treball real.