De la representación hexadecimal al triplete RGB
Toda página de conversión de colores aplica un mismo principio: traducir un código compacto escrito en base 16 (hexadecimal) a los tres números enteros entre 0 y 255 que el hardware de las pantallas entiende directamente. En este caso concreto, el punto de partida es un código HEX de seis dígitos (#RRGGBB) o su abreviatura de tres (#RGB), y el destino es el triplete RGB que alimenta cualquier función de color en CSS, canvas, JavaScript o software de diseño.
La conversión es estrictamente matemática. Cada par de dígitos hexadecimales corresponde a un canal (rojo, verde, azul). El dígito de mayor peso (el primero del par) representa la parte alta: se multiplica por 16; el segundo dígito se suma como valor bajo. Así, para el código #4f46e5:
- Rojo:
4f→ 4 × 16 + 15 = 79 - Verde:
46→ 4 × 16 + 6 = 70 - Azul:
e5→ 14 × 16 + 5 = 229
El resultado es el triplete rgb(79, 70, 229). No hay redondeo posible porque la base 16 es un sistema posicional exacto y reversible con la base 10. Cualquier valor hexadecimal de seis dígitos produce tres enteros que suman 24 bits de información, exactamente los mismos que describen 16,7 millones de colores en una pantalla.
La herramienta recibe esa entrada, la procesa en el navegador sin enviar nada a ningún servidor, y muestra el triplete RGB junto con los correspondientes valores en HSL, HSV, CMYK y LAB. Esos formatos adicionales se actualizan automáticamente al escribir o al usar el selector de color incorporado.
Reglas de entrada y casos límite
La página acepta exclusivamente dos formatos: seis caracteres hexadecimales (#RRGGBB) o tres (#RGB). El signo # es opcional; tanto #4f46e5 como 4f46e5 funcionan. Si se introducen ocho dígitos (los que incluyen canal alfa, como #4f46e580), la herramienta no los reconoce y muestra el mensaje de error: «Introduce un color hexadecimal como #4f46e5 o #abc». Tampoco admite códigos con espacios, letras fuera del rango A-F, ni longitudes distintas de 3 o 6.
Las entradas de tres dígitos se expanden automáticamente a seis duplicando cada carácter: #abc se convierte en #aabbcc, que a su vez se traduce a RGB como (170, 187, 204). Esta expansión no es arbitraria; sigue la convención establecida en CSS para la notación abreviada de colores. Si el valor introducido no encaja en ninguno de los dos patrones, el campo muestra el error y no se actualiza ningún otro formato.
El procesamiento es exclusivamente local. No se envían datos a ninguna API ni se almacenan en el dispositivo. Cada vez que se modifica un campo HEX o se elige un color en el selector, la página recalcula todos los formatos en el mismo instante.
Correspondencia exacta entre HEX y RGB
La relación entre ambos sistemas es directa porque ambos describen los mismos tres canales de 8 bits. Cada canal RGB puede tomar 256 valores (de 0 a 255), y en hexadecimal se necesitan dos dígitos (de 00 a FF) para representar ese rango. Así, FF (255) es el máximo de un canal; 00 es el mínimo. La notación HEX no es más que una abreviatura compacta: #FF6600 ocupa siete caracteres (con la almohadilla), mientras que rgb(255, 102, 0) ocupa trece. Por eso en hojas de estilo CSS se sigue usando HEX como formato preferido para valores fijos, aunque rgb() resulte más legible cuando se necesita modificar canales mediante código.
La ausencia de canal alfa en esta página es deliberada. El propósito es trabajar exclusivamente con colores opacos. Si se necesita transparencia, el estándar CSS ofrece rgba() con un cuarto valor, pero la página espera solo seis o tres dígitos hex. Quienes quieran convertir un #RRGGBBAA a RGBA deberán usar una herramienta específica de hex a rgba, que no es esta.
La expansión de la taquigrafía de tres dígitos sigue la regla #RGB → #RRGGBB (cada letra se repite). Esto produce colores con menos variación tonal que los de seis dígitos, porque se limitan a 16 niveles por canal en lugar de 256. Por ejemplo, #f00 da rgb(255, 0, 0) (rojo puro), y #fa0 da rgb(255, 170, 0). La conversión es reversible: si se parte de seis dígitos, no se puede comprimir a tres sin perder precisión; la página solo expande, no comprime.
¿Quién necesita esta conversión?
El público principal son desarrolladores front-end que trabajan con APIs de dibujo como Canvas 2D o WebGL, donde los colores se esperan como arrays de números enteros (por ejemplo, ``). Aunque CSS acepte códigos HEX directamente, muchas funciones de JavaScript como fillStyle o strokeStyle también admiten cadenas RGB, y en algunos contextos resulta más limpio usar un triplete numérico que una cadena.
Los diseñadores que reciben especificaciones de marca en HEX y deben introducir esos valores en herramientas como Figma, Sketch o Photoshop suelen encontrar que los paneles de color de esos programas muestran valores RGB. Tener el triplete a mano evita tener que abrir un selector de color y localizar manualmente el tono.
Los estudiantes de diseño gráfico o desarrollo web pueden usar la página para entender la relación entre los dos sistemas. Al escribir un código HEX y ver al instante el triplete correspondiente, comprueban que cada par de dígitos produce un número entre 0 y 255, y que colores como #808080 (gris medio) corresponden a rgb(128, 128, 128). Para quienes están aprendiendo teoría del color, la comparación simultánea con HSL o LAB también resulta instructiva, aunque esa información adicional no es el foco principal de la página.
Por último, cualquier persona que necesite calcular contraste de accesibilidad según WCAG suele requerir los valores RGB para obtener la luminancia relativa de cada color. Con el triplete ya disponible, se puede aplicar la fórmula de luminancia o pasarlo a una calculadora de contraste.
El proceso de conversión paso a paso
Internamente, la página realiza estos pasos cuando se introduce un código HEX:
- Toma la cadena introducida y elimina cualquier carácter
#inicial. - Comprueba la longitud de la cadena resultante. Si es 3, duplica cada carácter para obtener seis (
a→aa,b→bb,c→cc). Si es 6, la usa directamente. - Divide la cadena de seis caracteres en tres pares: caracteres 1-2 (rojo), 3-4 (verde), 5-6 (azul).
- Para cada par, interpreta los dos caracteres como un número hexadecimal (base 16) y lo convierte a decimal. La conversión es
d1 * 16 + d2, donded1yd2son los valores numéricos de cada dígito (0-9 y A-F como 10-15, sin distinguir mayúsculas o minúsculas). - Los tres enteros resultantes se redondean? No. La aritmética es exacta porque 16 es potencia de 2 y los dígitos se interpretan sin decimales.
Ejemplo completo con #1E90FF:
- Entrada limpia:
1E90FF - Pares:
1E,90,FF 1E→ 1×16 + 14 = 3090→ 9×16 + 0 = 144FF→ 15×16 + 15 = 255- RGB:
(30, 144, 255)
El mismo cálculo se aplica a cualquier código válido. Si se usan letras minúsculas (p. ej. #1e90ff), el resultado es idéntico.
Al mismo tiempo, la página actualiza los campos de HSL, HSV, CMYK y LAB mediante fórmulas de conversión colorimétrica estándar. Esas conversiones también son exactas dentro de la precisión numérica de JavaScript, aunque pueden mostrar decimales en los resultados.
Preguntas frecuentes (FAQ)
¿Qué ocurre si escribo un código sin la almohadilla?
La herramienta acepta códigos con o sin #. Tanto #4f46e5 como 4f46e5 producen el mismo resultado. La almohadilla es opcional.
¿Puedo usar un código de ocho dígitos para incluir transparencia?
No. La página solo admite códigos de seis o tres dígitos. Los ocho dígitos (hex con canal alfa) no se reconocen y se mostrará el mensaje de error correspondiente.
¿Los valores RGB se redondean?
No. La conversión de HEX a RGB es exacta: cada par de dígitos hex se traduce a un entero entre 0 y 255 sin redondeo porque la base 16 y la base 10 tienen correspondencia entera para ese rango.
¿Cómo se expande un código de tres dígitos como #abc?
Se duplica cada dígito: #abc → #aabbcc. Así, #abc es equivalente a #aabbcc y produce rgb(170, 187, 204).
¿Qué diferencia hay entre usar color: #ff6600 y color: rgb(255, 102, 0) en CSS?
Ninguna funcionalmente. Ambos representan el mismo color y el navegador los interpreta igual. La elección es cuestión de legibilidad o de si se necesita modificar los canales desde JavaScript.
¿La página guarda algún dato de mi conversión?
No. Todo el cálculo se realiza en el navegador del usuario. No se envía nada a ningún servidor ni se almacena en el dispositivo.