Conversor de RGB a HEX
RGBA, HSL, HSLA, HSV, HWB, CMYK, CIE Lab, LCH, OKLCH, XYZ, HSI, Decimal, Android ARGB, Win32 COLORREF y HEX8. Incluye un selector de color en lienzo, comprobador de contraste WCAG 2.1, 6 paletas 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, búsqueda de colores CSS con nombre y coincidencia con la paleta de Tailwind v3.
- Controles RGB con código de color (R rojo / G verde / B azul)
- 19 salidas de formato instantáneas con copia en 1 clic
- Escala de 10 pasos de sombra/tinte con exportación
- Historial + favoritos guardados en localStorage
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
- Arrastra los deslizadores RGB — canales Red, Green y Blue (0–255 cada uno). Cada barra de deslizador muestra su propio gradiente de color para que veas exactamente qué estás mezclando.
- Ve HEX y otros 18 formatos al instante — las 19 conversiones de formato se actualizan en vivo mientras arrastras. Copia cualquier formato con un solo clic.
- Usa el selector de lienzo — arrastra el cuadrado de saturación/brillo o la franja de tono para un enfoque visual. Totalmente compatible con pantallas táctiles en móvil.
- Explora las pestañas de funciones — genera paletas de color, crea una escala de sombras/tonos, comprueba el contraste WCAG, simula la daltonismo, elige colores de una imagen o crea gradientes.
Conversor de Color RGB a HEX
La conversión de RGB a HEX es una de las tareas más fundamentales del desarrollo web. Nuestro conversor gratuito de RGB a HEX lo hace instantáneo: escribe o arrastra los deslizadores R, G, B y observa cómo las 19 conversiones de formato de color se actualizan simultáneamente. La propia página responde al color que has elegido, creando una experiencia inmersiva, a la altura de las herramientas de diseño profesionales.
¿Qué es RGB?
RGB (Red, Green, Blue) es el modelo de color aditivo que utiliza cada pantalla digital. La luz roja, verde
y azul se combinan para producir todos los colores visibles. Cada canal va de 0 (apagado) a 255 (intensidad
máxima). rgb(0, 0, 0) es negro; rgb(255, 255, 255) es blanco;
rgb(59, 130, 246) es un azul intenso. RGB es nativo de CSS, HTML Canvas, SVG y
prácticamente todos los sistemas de gráficos web.
¿Qué es HEX?
Un código de color HEX es una cadena hexadecimal compacta de 6 caracteres, como #3B82F6.
Cada par de caracteres corresponde a un canal RGB en base 16: 3B=59 (R), 82=130 (G), F6=246 (B).
HEX es el formato estándar en las hojas de estilo CSS, los atributos HTML, Figma, Sketch, Adobe XD
y la mayoría de los selectores de color de las herramientas de diseño. Convertir de RGB a HEX es necesario
al pasar de colores definidos en código a especificaciones de herramientas de diseño.
Deslizadores RGB con Código de Color
A diferencia de los deslizadores genéricos, cada deslizador de canal en esta herramienta muestra su propio gradiente de color en vivo. El deslizador Red transiciona de negro a rojo, mostrando exactamente qué efecto tiene aumentar ese canal con los valores actuales de green y blue. Lo mismo ocurre con Green y Blue. Esto hace que mezclar colores sea intuitivo: ves el efecto de cada cambio antes incluso de soltar el ratón.
Escala de Sombras y Tonos de 10 Pasos
Genera una escala de color completa de 10 pasos (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) inspirada en la nomenclatura de Tailwind CSS. Haz clic en cualquier paso para cargarlo como tu color de trabajo. Exporta toda la escala como propiedades personalizadas de CSS, configuración de Tailwind, variables SCSS o JSON para integrarla al instante en tu sistema de diseño.
Generador de Armonías de Color
Se generan automáticamente seis tipos de armonías de color matemáticas: Complementary (opuestos en la rueda), Analogous (adyacentes, ±30°), Triadic (distribuidos a 120°), Split-Complementary (±150° desde el complementario), Tetradic (cuatro a 90°) y Monochromatic (mismo tono, distinta luminosidad). Haz clic en cualquier muestra de la paleta para cargar ese color al instante. Expórtalo como CSS, Tailwind, SCSS o JSON.
Privacidad ante Todo
Todas las conversiones se realizan por completo en tu navegador. No se envía ningún dato de color a ningún
servidor. Las imágenes que subes se procesan localmente mediante la Canvas API. El historial de colores
(los últimos 20) y los favoritos se guardan únicamente en el localStorage de tu navegador.
Convierte cada canal RGB (0-255) en una cadena hexadecimal de 2 dígitos y une todo con el prefijo #. Por ejemplo: R=59=3B, G=130=82, B=246=F6 = #3B82F6. Nuestra herramienta lo hace al instante mientras arrastras los deslizadores.
HSL (Hue, Saturation, Lightness) organiza la información del color de una forma que se ajusta a la percepción humana. Hue es el ángulo del color (0-360), Saturation es la intensidad (0-100%) y Lightness es el brillo (0-100%). Resulta mucho más intuitivo para ajustar colores: puedes aclarar un color cambiando solo L, en lugar de modificar los tres valores RGB.
CMYK (Cyan, Magenta, Yellow, Key/Black) es el modelo de color sustractivo utilizado en la producción de impresión profesional. Si estás preparando colores para un trabajo de impresión, usa la salida CMYK de esta herramienta para indicar los valores de color exactos a tu impresora o imprenta.
CIE Lab (L*a*b*) es un espacio de color en el que distancias numéricas iguales corresponden a diferencias de color percibidas iguales, a diferencia de RGB o HSL, donde el mismo paso puede verse distinto según la zona de color. Se utiliza en ciencia del color, perfiles ICC y software de diseño profesional para comparaciones de color precisas.
Calculamos la distancia euclidiana entre tu color RGB y cada color de la paleta predeterminada de Tailwind v3 (22 familias de color x 11 tonos = 242 colores) y mostramos las 5 coincidencias más cercanas con sus nombres de clase (por ejemplo, blue-500), valores HEX y puntuaciones de distancia. Haz clic en el botón de copiar de cualquier fila para copiar el nombre de la clase.
Abre la pestaña de funciones Harmonies o Shades y haz clic en uno de los botones de exportación: CSS Vars, Tailwind, SCSS o JSON. El código formateado se copiará a tu portapapeles.
Sí — abre la pestaña Image, arrastra y suelta o sube cualquier imagen, luego pasa el cursor para ver una lupa de aumento (vista de píxeles ampliada) y haz clic en cualquier píxel para cargar su color exacto. La herramienta también extrae automáticamente hasta 8 colores dominantes como muestras en las que puedes hacer clic.
Los favoritos y el historial se almacenan en el localStorage de tu navegador y se mantienen entre sesiones en el mismo navegador. No se sincronizan entre dispositivos y se perderán si borras los datos de tu navegador. No guardamos nada en nuestros servidores.