Convertidor HEX a RGB
Un color hexadecimal son tres pares de dígitos, uno por canal: sepárelos y convierta cada par de base 16 a base 10. FF5733 pasa a ser rgb(255, 87, 51), porque FF es 255, 57 es 87 y 33 es 51. El conversor muestra además hsl(11, 100%, 60%) y la variable CSS --color: #FF5733;, y funciona en los dos sentidos.
Formatos de color
Verificador de contraste
Color complementario
Acerca de Convertidor HEX a RGB
Este conversor lee un color en una notación y lo escribe en cuatro. Escriba seis dígitos hexadecimales en la casilla Color HEX y las fichas R, G y B se actualizan mientras teclea; pase a los campos RGB y edite un canal y la cadena hexadecimal se reconstruye; pase a HSL y el tono, la saturación y la luminosidad gobiernan las otras dos notaciones. No hay que pulsar nada, y el panel Formatos de color trae un botón de copia para cada una de las cuatro cadenas: #FF5733, rgb(255, 87, 51), hsl(11, 100%, 60%) y --color: #FF5733;.
La operación es un cambio de base, no una aproximación. Cada canal es un byte escrito con dos dígitos hexadecimales, así que va de 00 a FF, es decir de 0 a 255 en decimal. FF5733 se divide en FF = 255, 57 = 87 y 33 = 51. Los valores se acotan: un canal RGB por encima de 255 o por debajo de 0 vuelve al rango, y una cadena hexadecimal de menos de seis caracteres se rellena con ceros en lugar de rechazarse, así que un código a medio escribir ya produce un color.
Dos paneles van más allá de la conversión. El comprobador de contraste calcula la razón del color actual frente al blanco y al negro y le pone su nota WCAG: FF5733 obtiene 3.15:1 con texto blanco, solo AA Large, y 6.66:1 con texto negro, que es AA. El panel de color complementario da el tono opuesto de la rueda: #00A8CC para FF5733 y #FF00FF para el verde puro.
Lo que no hace: no toca el CMYK, porque esa conversión depende de un perfil de tinta y papel que una página web no puede conocer, y solo maneja colores opacos, de modo que RGBA y el hexadecimal de ocho dígitos quedan fuera. Todo se ejecuta en su navegador.
Casos de uso
Cómo usar
Escriba o pegue seis dígitos hexadecimales en la casilla Color HEX. La almohadilla es opcional y las entradas cortas se rellenan con ceros.
Lea las fichas R, G y B, que se actualizan mientras teclea, y la muestra que enseña el color en sí.
Para el sentido contrario, pase a los campos RGB y fije R, G y B de 0 a 255; la cadena hexadecimal se reconstruye debajo.
Use los campos HSL — tono de 0 a 360, saturación y luminosidad de 0 a 100 — cuando quiera desplazar un color en vez de sustituirlo.
Abra el panel Formatos de color y pulse el botón de copia de la línea que necesite: HEX, RGB, HSL o la variable CSS.
Consulte el panel de contraste para la razón frente al blanco y al negro con su nota WCAG, y el panel complementario para el tono opuesto.
Consejos Pro
- La casilla hexadecimal admite seis caracteres y rellena con ceros lo que sea más corto en vez de rechazarlo: FF pasa a FF0000 y muestra rojo. Escriba los seis dígitos antes de leer el resultado.
- La almohadilla inicial es opcional: el campo la quita y el panel Formatos de color la devuelve en la línea HEX, así que #FF5733 y FF5733 dan la misma respuesta.
- Los campos RGB acotan sin avisar: escriba 300 en R y al aplicarse queda 255. Si un canal parece equivocado, compruebe que estaba entre 0 y 255.
- Lea los dos contrastes, no uno. Un color puede aprobar sobre negro y suspender sobre blanco, como FF5733 con 6.66:1 y 3.15:1, y es el texto que ponga encima el que decide cuál importa.
- La línea Variable CSS está lista para pegar en un bloque :root. Cópiela, cambie --color por un nombre con sentido y ese mismo valor alimentará todas las reglas que lo referencien.
Solución de problemas
Un código hexadecimal corto muestra el color equivocado.
El campo rellena con ceros todo lo que tenga menos de seis caracteres en lugar de esperar: F00 se lee como F00000, no como la forma abreviada de rojo. Escriba los seis dígitos — FF0000 — y las fichas R, G y B mostrarán 255, 0, 0.
Un valor RGB que escribí ha cambiado solo.
Cada canal se acota a 0-255 al aplicarse, porque ese es todo el rango que cabe en un byte. Un 300 pasa a 255 y un negativo a 0. Revise el número que quería y recuerde que aquí no se aceptan porcentajes: para eso están los campos HSL.
Necesito valores CMYK y no los encuentro.
Este conversor no produce CMYK, y ninguna herramienta web puede hacerlo con fiabilidad: la conversión depende del juego de tintas, del papel y del perfil de color de su imprenta. Lleve el valor hexadecimal o RGB de aquí a su programa de diseño y conviértalo allí con el perfil correcto.
Preguntas frecuentes
Divida los seis dígitos en tres pares y lea cada par en base 16. FF5733 da FF = 255, 57 = 87 y 33 = 51, es decir rgb(255, 87, 51). Escriba el código en la casilla Color HEX y las tres fichas de canal muestran esos números al momento, con una cadena rgb() copiable en el panel de formatos.
rgb(0, 255, 0), verde puro: los pares rojo y azul son 00 y el par verde es FF, el máximo de un byte. En HSL ese mismo color es hsl(120, 100%, 50%). Su contraste frente al negro llega a 15.30:1, un WCAG AAA holgado, mientras que el texto blanco encima se queda en 1.37:1.
Es rgb(255, 0, 0), rojo puro, porque FF es 255 y cada 00 es cero. La herramienta da además hsl(0, 100%, 50%) y la línea de variable CSS. Su contraste es 4.00:1 frente al blanco y 5.25:1 frente al negro, así que el texto blanco sobre ese rojo solo alcanza AA en tamaños grandes.
Un gris medio: rgb(153, 153, 153), ya que 99 en hexadecimal es 153 y los tres canales son iguales. Canales iguales siempre dan un neutro, de ahí su hsl(0, 0%, 60%) sin saturación. Suspende con texto blanco a 2.85:1 pero alcanza AAA frente al negro con 7.37:1.
Describen los mismos tres canales, escritos de otra forma: el hexadecimal usa dos dígitos en base 16 por canal y el RGB un número decimal de 0 a 255. Ninguna notación aporta información extra, y por eso este conversor pasa de una a otra de forma exacta, sin ningún redondeo.
Para un color opaco son equivalentes y el hexadecimal es más corto, por eso las hojas de estilo suelen usarlo. Prefiera rgb() cuando componga el valor a partir de canales sueltos, y recuerde que CSS admite canal alfa en las dos notaciones. HSL es la mejor opción para derivar variantes más claras u oscuras de un mismo tono.
R son los dos primeros dígitos leídos en base 16, G los dos centrales y B los dos últimos. En JavaScript se escribe parseInt(hex.slice(0,2), 16), y así con los demás; en Python, int(hex[0:2], 16). En sentido inverso, cada canal pasa por toString(16) y se rellena a dos dígitos.
En Python: tuple(int(h[i:i+2], 16) for i in (0, 2, 4)) con h como la cadena de seis caracteres. En JavaScript: [0, 2, 4].map(i => parseInt(hex.substr(i, 2), 16)). Ambos dan exactamente los tres números que muestra esta página, porque la conversión es exacta y no redondea.
No, y desconfíe de cualquier herramienta web que diga lo contrario. El RGB es luz y el CMYK es tinta, así que la correspondencia depende de la máquina, el papel y el perfil de color. Obtenga aquí un RGB o HSL exacto y deje el CMYK a su programa de diseño con el perfil con el que vaya a imprimir de verdad.
En este conversor no: trabaja con hexadecimal de seis dígitos y RGB opaco. Para la transparencia, tome la cadena rgb() que le da y añada usted el alfa, como rgba(255, 87, 51, 0.5), o añada dos dígitos hexadecimales para un código de ocho. Los valores de los canales son los mismos.