Conversor de HEX a RGB
Convertidor online y gratuito de HEX a RGB. Introduce cualquier código HEX y obtén al instante RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, CIE Lab, LCH, OKLCH, XYZ, HSI, Decimal, Android ARGB y Win32 COLORREF. Incluye un selector de color en lienzo, comprobador de contraste WCAG 2.1, 6 tipos de armonía de color, escala de matices y tonos en 10 pasos, simulación de daltonismo de 7 tipos, cuentagotas con lupa sobre imágenes, generador de degradados, generador de filtros CSS y coincidencia con la paleta de Tailwind v3.
- 19 conversiones de formato simultáneas
- Verificador de contraste WCAG AA/AAA
- 6 tipos de paleta de armonía de color
- Cuentagotas de imagen con lupa de aumento
Also accepts: rgb() · hsl() · CSS color names · shorthand #F00
| HEX | — | |
| HEX (no #) | — | |
| RGB | — | |
| RGBA | — | |
| HSL | — | |
| HSLA | — | |
| HSV / HSB | — | |
| HWB | — | |
| CMYK | — | |
| CIE Lab | — | |
| LCH | — | |
| OKLCH | — | |
| CSS Named | — | |
| Integer | — | |
| 0x Notation | — | |
| Android ARGB | — | |
| Swift UIColor | — | |
| Java Color | — | |
| .NET Color | — |
Closest Tailwind v3
Mathematically derived color palettes. Click any swatch to load that color.
10-step shade/tint scale inspired by Tailwind CSS naming. Click any chip to load it.
Large Text Sample — 18pt Bold
Small body text — The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet consectetur.
How your color appears to people with different types of color vision deficiency. Simulations use peer-reviewed transformation matrices (Viénot, Brettel & Mollon 1997/1999). ~8% of men and ~0.5% of women have some form of color blindness.
Dominant Colors
CSS Filter Generator
Recolor a black SVG/icon to your selected color using a CSS filter.
—
Cómo usar
- Introduce un código HEX: escribe
#3B82F6, o pega cualquier formato:rgb(),hsl(), o un nombre de color CSS. La herramienta detecta automáticamente todos los formatos. - Arrastra el selector de canvas: el cuadrado de saturación/brillo y la barra de matices te permiten explorar colores visualmente sin escribir nada.
- Copia cualquiera de los 19 formatos de salida al instante: HEX, RGB, HSL, CMYK, Lab, LCH, OKLCH, Swift, Java, .NET y más, cada uno con su propio botón de copiar.
- Explora las pestañas de funciones: genera paletas de colores armoniosas, comprueba la accesibilidad WCAG, simula 7 tipos de daltonismo, elige colores de una imagen subida y crea degradados.
Conversor de Color HEX a RGB
El conversor de color HEX a RGB es una de las herramientas más utilizadas en el desarrollo web y el diseño de interfaces. Nuestro conversor gratuito va mucho más allá de un simple cambio de formato numérico: es un completo espacio de trabajo de color que genera simultáneamente 19 formatos de color, crea paletas accesibles, comprueba el contraste WCAG y simula la daltonismo, todo en tiempo real mientras escribes o arrastras.
¿Qué es un código de color HEX?
Un código de color HEX (hexadecimal) es una cadena de 6 caracteres precedida por #, como #3B82F6.
Cada par de caracteres representa un canal de color —rojo, verde y azul— expresado en base 16.
Por ejemplo, #FF0000 es rojo puro: R=255 (FF), G=0 (00), B=0 (00).
Los códigos HEX son el lenguaje universal del color en los navegadores web, CSS, herramientas de diseño como Figma y Sketch,
y el marcado HTML.
¿Qué es RGB?
RGB (rojo, verde, azul) es el modelo de color aditivo que utilizan todas las pantallas digitales. Cada canal
va de 0 a 255. rgb(59, 130, 246) es el equivalente en CSS de #3B82F6,
un azul vibrante usado en la paleta blue-500 de Tailwind CSS. Convertir entre HEX y RGB
es necesario cada vez que pasas de la notación abreviada de CSS a herramientas de diseño o lenguajes de programación.
19 formatos de color a la vez
Además de HEX y RGB, esta herramienta genera al instante: RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, CIE Lab,
LCH, OKLCH, XYZ, entero, notación 0x, Android ARGB, Swift UIColor, Java AWT Color,
y .NET Color.FromArgb(): todos los formatos utilizados en CSS, Android, iOS, impresión y programación gráfica.
Selector de color con Canvas
El selector de color integrado utiliza la API de Canvas para mostrar un cuadrado de saturación-brillo fluido y
una barra de matices. Arrastra la mira a cualquier punto, o desplaza la barra de matices para recorrer todo el espectro.
El selector funciona a 60 fps gracias a requestAnimationFrame y es totalmente compatible con pantallas táctiles en dispositivos móviles.
Es un selector profesional de verdad, no el limitado <input type="color"> nativo del navegador.
Generador de paletas (6 tipos de armonía)
Las armonías de color calculadas matemáticamente hacen que crear paletas sea instantáneo. Elige entre paletas Complementaria, Análoga, Triádica, Complementaria dividida, Tetrádica y Monocromática. Cada muestra es clicable y carga ese color directamente en el conversor. Exporta cualquier paleta como propiedades personalizadas de CSS, configuración de Tailwind, variables SCSS o JSON.
Verificación de accesibilidad WCAG
Cada color que introduces se evalúa al instante según las pautas de accesibilidad WCAG 2.1. El verificador de contraste compara tu color con cualquier color de texto (blanco por defecto) y muestra las ratios de contraste con indicadores de aprobado/no aprobado para AA Normal (4.5:1), AA Grande (3:1), AAA Normal (7:1) y AAA Grande (4.5:1). Intercambia el primer plano y el fondo con un solo clic.
Divide el código HEX de 6 dígitos en tres pares y convierte cada uno de base 16 a base 10. Por ejemplo, en #3B82F6: 3B = R=59, 82 = G=130, F6 = B=246. Nuestra herramienta lo hace al instante y, además, genera otros 18 formatos simultáneamente.
El HEX de 3 dígitos (#F00) es una abreviatura: cada dígito se duplica (#FF0000). El de 6 dígitos es el estándar. El de 8 dígitos (#FF0000CC) incluye un canal de alfa/transparencia en los dos últimos dígitos. Usa el control deslizante de alfa para generar la salida HEX8 de 8 dígitos.
Sí: tanto el campo de HEX como la pestaña "Pegar cualquier formato" aceptan cualquier formato de color. Pega rgb(59,130,246), hsl(217,91%,60%), cornflowerblue, o incluso valores separados por comas como 59, 130, 246, y la herramienta los convierte automáticamente.
Las WCAG (Pautas de Accesibilidad para el Contenido Web) definen las relaciones de contraste mínimas para garantizar que las personas con baja visión puedan leer el texto. El nivel AA exige 4.5:1 para texto normal y 3:1 para texto grande (18pt o más, o 14pt en negrita). El nivel AAA exige 7:1 y 4.5:1 respectivamente. Cumplir con estos estándares es necesario para el cumplimiento de la ADA y para una buena práctica de UX.
OKLCH es un espacio de color moderno y perceptualmente uniforme, compatible de forma nativa con CSS Color Level 4. A diferencia de HSL, los cambios numéricos iguales en OKLCH corresponden a cambios de color igualmente perceptibles, lo que lo hace ideal para generar escalas de color accesibles y consistentes. Usa la salida OKLCH cuando trabajes con CSS moderno.
Aplicamos matrices de transformación lineal de 3x3 a tus valores RGB —una matriz distinta para cada tipo de deficiencia visual del color—, basadas en investigaciones revisadas por pares de Vienot, Brettel y Mollon (1997/1999). Los 7 tipos simulados son: Protanopía, Deuteranopía, Tritanopía, Protanomalía, Deuteranomalía, Tritanomalía y Acromatopsia (daltonismo total).
Genera una cadena de la propiedad CSS filter que transforma un SVG o icono negro en el color que hayas seleccionado. Esto es extremadamente útil para bibliotecas de iconos (Font Awesome, Heroicons) cuando necesitas recolorear elementos SVG sin editar los archivos originales. Lo encontrarás en la pestaña de Gradiente.
No. Todos los cálculos de color se realizan por completo en tu navegador mediante JavaScript. Las imágenes que subes se procesan localmente a través de la API de Canvas y nunca salen de tu dispositivo. El historial de colores y los favoritos se guardan únicamente en el localStorage de tu navegador.