Conversión exacta entre RGB y hex
Esta página convierte tres números decimales (rojo, verde y azul, cada uno entre 0 y 255) en un código hexadecimal de seis dígitos con prefijo #. La conversión es exacta y reversible porque ambos formatos trabajan sobre el mismo espacio de color sRGB. No hay recorte de gama ni aproximaciones: el mismo color que ves en la entrada RGB es el que obtienes en la salida hex. El resultado siempre tiene seis dígitos (por ejemplo, #4F46E5), nunca se contrae automáticamente a la notación abreviada de tres dígitos, aunque el campo de entrada hex sí acepta esa forma corta y la expande internamente. El código hex generado no incluye canal alfa; si necesitas transparencia, deberás usar el formato de ocho dígitos manualmente en tu CSS.
La página también actualiza simultáneamente los campos HSL, HSV, CMYK, LAB y el selector de color visual. No hay un botón de convertir: cualquier cambio en cualquier campo dispara la actualización de todos los demás. Esto te permite ver el color en distintos sistemas de representación sin pasos intermedios.
El modelo de color RGB
El modelo RGB es aditivo: los colores se forman sumando luz roja, verde y azul en distintas proporciones. Cuanto más valor tenga un canal, más luz de ese color primario se emite. Con los tres canales al máximo (255, 255, 255) obtienes blanco; con los tres a cero (0, 0, 0) obtienes negro.
Cada canal usa la escala 0–255 porque esa es la profundidad de 8 bits por canal: 2^8 = 256 valores posibles. Ese rango se heredó de los primeros sistemas gráficos y se ha mantenido como estándar en prácticamente todos los formatos de imagen digital (PNG, JPEG, BMP) y en las APIs de color de los navegadores. Cuando introduces un valor como 79, 70, 229, estás usando tres bytes: uno para el rojo (79), uno para el verde (70) y uno para el azul (229).
La página espera exactamente tres números separados por comas o espacios. Por ejemplo, 79 70 229 o 79, 70, 229 son aceptados. Los ceros a la izquierda son opcionales: 0,0,0 y 0, 0, 0 funcionan igual.
Las matemáticas de la conversión
Convertir un valor decimal entre 0 y 255 a dos dígitos hexadecimales es un proceso sencillo:
- Divide el valor decimal entre 16. El cociente entero es el primer dígito hex; el resto es el segundo.
- Convierte cada parte a su equivalente hexadecimal: 0–9 se quedan igual, 10–15 se representan como A–F.
Ejemplo con el valor 79:
- 79 ÷ 16 = 4, resto 15 → primer dígito 4, segundo dígito F →
4F - 4 equivale a 4 en hex, 15 equivale a F →
4F
Para 70:
- 70 ÷ 16 = 4, resto 6 →
46
Para 229:
- 229 ÷ 16 = 14, resto 5 → 14 equivale a E, 5 equivale a 5 →
E5
Uniendo los pares: #4F46E5.
El caso extremo: 255 ÷ 16 = 15, resto 15 → FF. 0 ÷ 16 = 0, resto 0 → 00. Por eso el blanco es #FFFFFF y el negro #000000.
Esta correspondencia biunívoca significa que cualquier color RGB tiene un único código hex de seis dígitos y viceversa. La página no necesita redondear ni interpolar.
Formato de entrada y casos límite
La página valida que los tres valores estén dentro del rango 0–255. Si introduces números fuera de ese rango, o un formato inválido (por ejemplo, solo dos números, o letras), aparece el mensaje:
“Introduce RGB como tres números 0–255, por ejemplo 79, 70, 229.”
No hay conversión parcial: si un solo valor está fuera de rango, la página no muestra ningún resultado hex ni actualiza los demás campos. Tampoco redondea valores fuera del rango al extremo más cercano; simplemente rechaza la entrada.
La página acepta la notación hexadecimal abreviada de tres dígitos (#abc) en el campo hex de entrada, pero la expande internamente a seis dígitos duplicando cada carácter (#aabbcc). Eso es consistente con la especificación CSS, donde #abc equivale a #aabbcc. La salida de la página, sin embargo, siempre muestra seis dígitos, nunca la forma corta.
Todos los cálculos ocurren en tu navegador. No se envía ningún dato a un servidor.
Uso de hex en CSS y diseño
El código hexadecimal es el formato más común para definir colores en CSS. Se usa en propiedades como color, background-color, border-color, box-shadow, etc. La sintaxis es siempre # seguido de seis dígitos hexadecimales. Por ejemplo:
.elemento {
background-color: #4F46E5;
color: #FFFFFF;
}
CSS también acepta la notación de ocho dígitos (#RRGGBBAA) para incluir canal alfa, pero la página no genera ese formato porque su entrada RGB no incluye transparencia. Si necesitas un valor con transparencia, puedes añadir los dos dígitos hex del alfa manualmente (por ejemplo, #4F46E580 para 50 % de opacidad).
En diseño gráfico, programas como Photoshop, GIMP o Sketch permiten introducir colores en RGB decimal y leer el equivalente hex. La página te ahorra tener que hacer la conversión mental o usar una calculadora separada.
El espacio sRGB y la relación con CMYK
La conversión entre RGB y hex es exacta porque ambos usan el mismo espacio de color: sRGB. sRGB es el espacio de trabajo estándar para la mayoría de pantallas, cámaras digitales y navegadores web. Fue creado por HP y Microsoft en 1996 para garantizar una reproducción de color consistente en distintos dispositivos.
Cuando diseñas para pantalla, puedes moverte entre RGB y hex sin pérdida. Pero si vas a imprimir, necesitas convertir a CMYK, que es un modelo sustractivo (tinta sobre papel). El espacio de color de una impresora (por ejemplo, CMYK con perfiles como Fogra39 o US Web Coated) tiene una gama más pequeña que sRGB en algunos colores, especialmente en tonos muy saturados. Por eso, un color que se ve bien en pantalla puede no reproducirse igual en papel. La página incluye la conversión a CMYK para que puedas ver esa diferencia, pero no modifica el valor hex.
Preguntas frecuentes
¿Puedo usar letras minúsculas en el código hex?
Sí. La página acepta mayúsculas y minúsculas indistintamente en la entrada hex. La salida siempre usa mayúsculas, pero CSS no distingue entre #4F46E5 y #4f46e5.
¿Qué ocurre si introduzco menos de tres valores RGB?
La página mostrará el mensaje de error. Necesita exactamente tres números separados por comas o espacios.
¿El código hex de seis dígitos es el mismo que el de ocho dígitos sin alfa?
No exactamente. El de ocho dígitos añade dos dígitos para el canal alfa (transparencia). Si omites esos dos dígitos, el color es completamente opaco. La página solo genera seis dígitos porque la entrada no tiene información de transparencia.
¿Puedo usar la página sin conexión a internet?
Sí. Todo el procesamiento ocurre en tu navegador mediante JavaScript. Una vez cargada la página, puedes desconectarte y seguir usándola.
¿La página redondea valores decimales de RGB?
No. Los valores deben ser enteros entre 0 y 255. Si introduces un número decimal (por ejemplo, 79.5), la página rechazará la entrada. En CSS, los valores RGB decimales solo se aceptan como enteros en la función rgb(), aunque algunas implementaciones redondean. Esta página sigue la especificación estricta.
¿El color visual que muestra la página es fiable para diseño?
Depende de la calibración de tu monitor. La página convierte el valor hex a un color de pantalla usando el espacio sRGB de tu navegador. Si tu monitor está calibrado, el color debería coincidir con el código hex. Para trabajos profesionales, siempre verifica en un monitor calibrado.