Convertidor de RGB a HEX

La conversió exacta entre RGB i hex: per què és diferent

Aquesta pàgina converteix valors RGB decimals (tres canals, 0–255) al seu equivalent hexadecimal de sis dígits (p. ex., #1E90FF). El que la fa diferent d’altres eines és que no hi ha cap pèrdua d’informació ni ajust de gamma de colors: RGB i hex representen exactament el mateix espai de color sRGB, el que utilitza la majoria de pantalles. Per tant, la conversió és reversible i exacta. No hi ha truncaments, aproximacions ni clippings de gamma. Cada valor decimal 0–255 es tradueix de forma biunívoca a un parell de dígits hexadecimals, i el codi resultant sempre comença amb # i té exactament sis dígits (llevat que es faci servir la forma de vuit dígits amb canal alfa, que aquesta eina no genera automàticament).

A més, l’eina no té cap botó de «convertir». En modificar qualsevol camp de color (RGB, hex, HSL, HSV, CMYK, LAB o el selector de color), tots els altres camps s’actualitzen a l’instant. Tot el processament es fa al navegador de l’usuari: no es puja cap dada a cap servidor. Això garanteix privacitat i resposta immediata.

El model de color RGB: decimals de 0 a 255

El model RGB és additiu: la llum de tres primaris (vermell, verd, blau) es combina per formar un color. Cada canal s’emmagatzema normalment com un valor enter de 8 bits, és a dir, de 0 a 255 (2⁸ – 1). El valor 0 significa que el canal està completament apagat; 255, que està al màxim. Per exemple, rgb(0, 0, 0) és negre (absència de llum) i rgb(255, 255, 255) és blanc (màxima llum dels tres canals). El vermell pur és rgb(255, 0, 0), el verd pur rgb(0, 255, 0), i el blau pur rgb(0, 0, 255).

L’escala de 0 a 255 no és arbitrària: prové de la representació digital habitual als ordinadors, on cada canal ocupa un byte. Això permet 16.777.216 combinacions possibles (256³), que és la gamma de colors que pot mostrar una pantalla típica dins de l’espai sRGB. La majoria de llenguatges de programació i editors gràfics (Photoshop, GIMP, eines de desenvolupador del navegador) treballen amb aquesta escala decimal.

L’eina accepta valors decimals d’entrada separats per comes o espais, com ara 79, 70, 229 o 79 70 229. Si s’introdueix un valor fora del rang 0–255 o un format no vàlid, es mostra el missatge d’error: “Enter RGB as three numbers 0–255, like 79, 70, 229.” No es permeten decimals ni percentatges en aquest camp (tot i que moltes eines CSS admeten rgb(31%, 27%, 90%), aquí l’entrada ha de ser enter de 0 a 255).

El codi hexadecimal de sis dígits: estructura i cas pràctic

El codi hexadecimal per a colors –també conegut com a hex triplet– és una forma de representar els tres canals RGB en base 16. L’estructura és #RRGGBB, on:

• RR són dos dígits hexadecimals per al vermell,
• GG per al verd,
• BB per al blau.

Cada parell pot anar de 00 (0 en decimal) a FF (255 en decimal). Per tant, #000000 és negre, #FFFFFF és blanc, #FF0000 és vermell pur. La lletra pot ser majúscula o minúscula; CSS accepta ambdues formes, tot i que és habitual usar majúscules per llegibilitat (#FF5733).

La conversió és directa: el valor decimal de cada canal es divideix entre 16. El quocient sencer (0–15) es converteix al primer dígit hex; el residu (0–15) al segon. Per exemple, el decimal 79:

• 79 ÷ 16 = 4 (quocient) i residu 15 → 4F (perquè 15 en hex és F).
• El decimal 70: 70 ÷ 16 = 4 i residu 6 → 46.
• El decimal 229: 229 ÷ 16 = 14 i residu 5 → E5.

Així, rgb(79, 70, 229) es converteix en #4F46E5. L’eina no contrau automàticament parells repetits a la forma de tres dígits (p. ex., #AABBCC no es mostra com #ABC), però el camp d’entrada hex sí que accepta la forma abreujada de tres dígits (#abc), que internament expandeix a sis (per a #abc, el vermell seria aa, verd bb, blau cc).

Les matemàtiques de la conversió: de decimal a hexadecimal

La conversió de decimal a hexadecimal és un procés senzill de canvi de base. Per a un nombre decimal entre 0 i 255:

1. Divideix el nombre per 16.
2. El quocient enter (0–15) és el primer dígit (més significatiu).
3. El residu (0–15) és el segon dígit (menys significatiu).
4. Converteix cada valor 10–15 a les lletres A–F (10 = A, 11 = B, 12 = C, 13 = D, 14 = E, 15 = F).

Per exemple, el valor 255 (màxim):

• 255 ÷ 16 = 15, residu 15 → FF (15 és F en hex). El codi és #FFFFFF per als tres canals.

El valor 0: 0 ÷ 16 = 0, residu 0 → 00.

Taula ràpida de conversions habituals:

Com que l’espai sRGB és el mateix tant per a RGB decimal com per a hex, no hi ha ajustos de gamma. La conversió és exacta i reversible: donat un codi hex, pots obtenir els valors decimals multiplicant el primer dígit per 16 i sumant el segon (p. ex., 4F → 4×16 + 15 = 79).

Ús del codi hex en CSS i disseny web

Al full d’estil CSS, els colors s’especifiquen normalment amb codis hex. Les propietats més comunes són color (color del text) i background-color. Per exemple:

body {
  background-color: #1E90FF; /* Dodger Blue */
  color: #FFFFFF; /* text blanc */
}

CSS també admet la forma abreujada de tres dígits per a colors on cada parell té els dos dígits iguals: #F00 equival a #FF0000 (vermell). L’eina accepta aquesta forma al camp d’entrada hex, però sempre mostra la versió de sis dígits a la sortida principal.

Una extensió menys comuna és el codi hex de vuit dígits (#RRGGBBAA), que afegeix un canal alfa (transparència). Aquesta eina no genera automàticament la forma de vuit dígits; només treballa amb els canals RGB sencers (sense alfa). Si es necessita transparència, caldrà afegir manualment dos dígits al final (p. ex., #4F46E5FF per a opacitat total).

L’ús de codi hex és preferible en CSS perquè és compacte, llegible i compatible amb tots els navegadors. Molts dissenyadors obtenen colors d’eines com Photoshop, que mostren tant RGB decimal com hex; aquesta pàgina serveix per unificar ambdós formats en un sol clic.

Errors comuns i com els evita aquesta eina

Un error freqüent és confondre l’escala de percentatge (0%–100%) amb la de 0–255. Per exemple, escriure 127, 0, 0 és correcte (vermell mitjà), però 50%, 0, 0 no és acceptat perquè el camp espera enters. L’eina rebutja qualsevol format no estàndard i mostra el missatge d’error corresponent.

Un altre error és oblidar el símbol # al camp hex. Molts navegadors el requereixen al CSS; l’eina l’afegeix automàticament a la sortida, però al camp d’entrada hex també l’accepta (amb o sense #). Si l’usuari escriu FF0000 sense #, l’eina l’interpreta correctament com a hex i mostra el resultat.

També és comú intentar escriure valors fora del rang (per exemple, 300, 0, 0). Això no és vàlid per als colors de pantalla, i l’eina ho detecta immediatament, tot i que alguns programes d’edició permeten valors extrems en espais de color més amplis (com ProPhoto). Com que aquí es treballa dins de l’espai sRGB, qualsevol valor fora de 0–255 es considera invàlid.

Finalment, algunes eines en línia mostren la forma abreujada de tres dígits (p. ex., #ABC). Aquesta eina no la fa servir automàticament per evitar ambigüitats: #ABC equival a #AABBCC, no a #0A0B0C. Si un usuari copia #ABC i l’enganxa al CSS, funcionarà, però pot ser confús si no es coneix la regla d’expansió. Per claredat, la sortida de l’eina sempre és de sis dígits.

Preguntes freqüents (FAQ)

Per què el codi hex sempre té sis dígits?

Perquè cada canal RGB (0–255) es representa exactament amb dos dígits hexadecimals. Tres canals × dos dígits = sis dígits. L’eina no contrau automàticament a la forma de tres dígits, tot i que accepta aquesta forma a l’entrada.

Puc introduir valors RGB amb decimals (com 127,5)?

No. L’escala de 8 bits només admet nombres enters de 0 a 255. Si necessiteu precisió decimal, hauríeu d’usar percentatges o un altre espai de color (com HSL). Aquesta eina només accepta enters.

Quin espai de color fan servir el RGB i l’hex?

Tots dos treballen dins l’espai sRGB, que és l’espai de color estàndard per a pantalles. No hi ha cap pèrdua ni ajust en la conversió; és exacta i reversible.

Com sé si un codi hex és correcte per a CSS?

Qualsevol codi de sis dígits amb # al davant i dígits hexavàlids (0–9, A–F) és vàlid. CSS també accepta tres dígits. La eina genera codis vàlids per a qualsevol full d’estil.

La pàgina guarda les meves dades?

No. Tot el processament es fa al vostre navegador. No s’envia cap informació a cap servidor.

Què passa si introdueixo un valor fora de rang?

Apareix el missatge d’error: “Enter RGB as three numbers 0–255, like 79, 70, 229.” El camp es mostra en vermell i no es mostra cap conversió fins que es corregeixi l’entrada.