Conversor de HEX a RGB

#3498DB es rgb(52, 152, 219): de hexadecimal a decimal de dos en dos dígitos

Un código HEX y un valor RGB son dos formas de escribir el mismo color. HEX junta los valores de rojo, verde y azul con dos dígitos hexadecimales cada uno, y RGB escribe esos mismos valores como números decimales de 0 a 255. Si separas #3498DB en 34, 98 y DB y pasas cada par a decimal, obtienes 52, 152 y 219, es decir, rgb(52, 152, 219). Un número hexadecimal de dos dígitos equivale al primer dígito × 16 más el segundo, y las letras A a F valen de 10 a 15.

El conversor de arriba muestra el RGB cuando escribes un HEX, y muestra el HEX en tamaño grande cuando mueves los campos o las barras R, G y B. Cada código, incluidos HSL, OKLCH y las versiones con opacidad, tiene su propio botón de copiar. «HEX paso a paso» muestra el cálculo de cada canal y una barra con su posición entre 0 y 255. Más abajo verás el contraste WCAG del texto blanco y del texto negro sobre este color.

Cuándo hay que convertir entre HEX y RGB

• Pasar un color de una maqueta a código: si una maqueta o guía de marca da el color en HEX y además necesitas transparencia, usa rgb(R G B / alfa) o un HEX de ocho dígitos.
• Dar un color a un programa: muchos lenguajes de programación y librerías gráficas piden el color como tres números de 0 a 255. Si conviertes el HEX a números RGB, puedes pegarlos tal cual.
• Ajustar un color poco a poco: al subir o bajar un solo canal con las barras RGB, ves al instante cómo cambia el HEX. Para ajustar por luminosidad o saturación, consulta también los valores HSL u OKLCH.
• Comprobar que el texto se lee bien: la relación de contraste indica si el texto blanco o el negro se lee mejor sobre el color de un botón o de un fondo.

Cómo se calcula

1. HEX a RGB: separa los seis dígitos que siguen a # en pares para R, G y B, y convierte cada par con primer dígito × 16 + segundo dígito. DB es 13 × 16 + 11 = 219.
2. RGB a HEX: divide cada valor entre 16 y escribe el cociente y el resto como un dígito hexadecimal cada uno. 152 = 9 × 16 + 8, así que es 98. Un valor menor que 16 lleva un 0 delante para completar dos dígitos.
3. Formas cortas: el #39F de tres dígitos repite cada dígito y pasa a #3399FF, y el #39F8 de cuatro dígitos pasa a #3399FF88 (CSS Color 4).
4. Opacidad: en un HEX de ocho dígitos, los dos últimos son el alfa: 00 es totalmente transparente y FF totalmente opaco. Multiplica el porcentaje por 255, redondea y escribe el resultado en hexadecimal.

La notación HEX y la sintaxis de rgb() y hsl() siguen el W3C CSS Color Module Level 4 (borrador de recomendación candidata del 2026-10-09), y el contraste sigue WCAG 2.2. Ambas fuentes se consultaron el 2026-10-12.

Tabla HEX y RGB de los 16 colores básicos

Estos son los valores de los 16 nombres de color básicos que define CSS. Si pulsas uno en «16 colores básicos» del conversor de arriba, se carga directamente en el campo.

green (#008000) es un verde oscuro con el canal verde en 128, y el verde brillante con el canal en 255 es lime (#00FF00). Deducir un valor a partir del nombre es fácil de equivocar, así que conviene comprobar el HEX.

Opacidad y los dos últimos dígitos del HEX

Los dos últimos dígitos de un HEX de ocho dígitos son la opacidad escrita como un valor de 0 a 255. El porcentaje se multiplica por 255 y se redondea, de modo que al volver a porcentaje el resultado puede diferir un poco. El 50 % pasa a 128 (80), y 128 ÷ 255 es 50,2 %.

Notaciones de color en CSS

• HEX: #3498DB, el corto #39F (solo cuando los dos dígitos de cada canal son iguales) y #3498DB80 con opacidad. No distingue mayúsculas de minúsculas.
• rgb(): la sintaxis antigua rgb(52, 152, 219) separa los valores con comas, y la nueva rgb(52 152 219 / 50%) usa espacios y una barra. En CSS Color 4, rgba() es un alias de rgb(), así que rgba(52, 152, 219, 0.5) significa lo mismo.
• hsl(): se escribe con tono (0 a 360), saturación y luminosidad. Para aclarar u oscurecer el mismo color solo hay que cambiar la luminosidad.
• oklch(): notación basada en OKLab y definida en CSS Color 4, que separa luminosidad, croma y tono de una forma más cercana a lo que percibimos. Puede servir para crear un conjunto de colores con la misma luminosidad.
• HSV: aparece a menudo en los selectores de color de los programas gráficos, pero CSS no tiene ninguna función para él. Úsalo solo como referencia.

Cómo leer el contraste del texto blanco y negro

WCAG 2.2 calcula la luminancia relativa de dos colores y obtiene la relación de contraste como (claro + 0,05) ÷ (oscuro + 0,05). La luminancia relativa convierte cada canal a un valor de 0 a 1, quita la gamma y suma los canales con los pesos 0,2126 para el rojo, 0,7152 para el verde y 0,0722 para el azul. El nivel AA exige al menos 4,5 : 1 para el texto normal y 3 : 1 para el texto grande (18 puntos o más, o 14 puntos o más en negrita), y el nivel AAA exige al menos 7 : 1 para el texto normal. El ejemplo #3498DB da 3,15 : 1 con texto blanco y 6,66 : 1 con texto negro, así que para texto normal conviene el negro. Este conversor juzga la relación sin redondearla antes. Para cualquier otra pareja de colores, usa un verificador de accesibilidad de color.

Errores frecuentes

• Ampliar un HEX de tres dígitos añadiendo ceros: #39F es #3399FF, no #3090F0. Cada dígito se escribe dos veces.
• Esperar que el porcentaje de opacidad vuelva exacto: el 50 % pasa a 80 (128), y al volver se obtiene 50,2 %, porque el alfa se guarda como un entero de 0 a 255.
• Mezclar valores RGB de 0 a 1 con valores de 0 a 255: algunas herramientas gráficas piden los canales como decimales de 0 a 1. En ese caso divide entre 255, por ejemplo 52 ÷ 255 = 0,204.
• Juzgar el contraste de un color transparente tal cual: un color transparente se ve mezclado con el fondo que tiene detrás, así que hay que volver a comprobarlo con el color ya mezclado con el fondo real.
• Reutilizar un valor que ha pasado por HSL y ha vuelto: un HSL redondeado a enteros puede volver con canales que difieren unas pocas unidades (hasta unas 5). Copia el color exacto como HEX o rgb().
• Deducir un valor por el nombre del color: en CSS, green es #008000, y #00FF00 es lime.

Límites y avisos

• Solo se tratan colores sRGB. Si escribes un valor de un espacio de color más amplio, como display-p3, el cálculo usa el valor que el navegador convierte a sRGB.
• HSL y HSV se muestran como enteros. OKLCH se redondea a un decimal en la luminosidad, tres en el croma y uno en el tono.
• En los colores neutros (grises) el tono no está definido, por lo que se muestra como 0.
• El contraste se calcula con el color opaco, sin tener en cuenta la opacidad. No refleja el grosor ni el tamaño del texto ni el brillo de la pantalla.
• El aspecto y las funciones del selector de color cambian según el navegador y el sistema operativo.

Fuentes

• 01W3C — CSS Color Module Level 4Borrador de recomendación candidata del 2026-10-09. §5.2 HEX de 3, 4, 6 y 8 dígitos y regla de ampliación, alfa 00 y ff, rgba() como alias de rgb(), sintaxis nueva y antigua, §6.1 nombres de color básicos, §7.2 sRGB a HSL, OKLab y OKLCH. Consultado el 2026-10-12
• 02W3C — Web Content Accessibility Guidelines (WCAG) 2.2Luminancia relativa (umbral 0,04045, antes de mayo de 2021 era 0,03928), relación de contraste (L1 + 0,05) / (L2 + 0,05), 1.4.3 AA 4,5 : 1 y 3 : 1 para texto grande, 1.4.6 AAA 7 : 1, definición de texto grande

Preguntas frecuentes

Herramientas para usar junto a esta