Conversor de color HEX a RGB
Easifica tus colores — convierte entre HEX, RGB, HSL y más.
Free online HEX to RGB color converter. Enter any HEX code and instantly get RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, CIE Lab, LCH, OKLCH, XYZ, HSI, Decimal, Android ARGB, and Win32 COLORREF. Includes a canvas color picker, WCAG 2.1 contrast checker, 6 color harmony types, 10-step shade/tint scale, 7-type color blindness simulation, image eyedropper with loupe, gradient builder, CSS filter generator, and Tailwind v3 palette matching.
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
- Ingresa un código HEX — type
#3B82F6, or paste any format:rgb(),hsl(), or a CSS color name. The tool auto-detects all formats. - Arrastra el selector de lienzo — the saturation/brightness square and hue strip let you visually explore colors without typing anything.
- Copia cualquiera de los 19 formatos de salida instantly — HEX, RGB, HSL, CMYK, Lab, LCH, OKLCH, Swift, Java, .NET, and more, each with its own copy button.
- Explora las pestañas de funciones — generate harmonious color palettes, check WCAG accessibility, simulate 7 types of color blindness, pick colors from an uploaded image, and build gradients.
Conversor de color HEX a RGB
The HEX to RGB color converter is one of the most-used tools in web development and UI design. Our free converter goes far beyond a simple number format swap — it's a complete color workspace that simultaneously outputs 19 color formats, generates accessible palettes, checks WCAG contrast, and simulates color blindness, all in real time as you type or drag.
¿Qué es un código de color HEX?
A HEX (hexadecimal) color code is a 6-character string preceded by #, like #3B82F6.
Each pair of characters represents a color channel — Red, Green, and Blue — expressed in base-16.
For example, #FF0000 is pure red: R=255 (FF), G=0 (00), B=0 (00).
HEX codes are the universal language of color in web browsers, CSS, design tools like Figma and Sketch,
and HTML markup.
¿Qué es RGB?
RGB (Red, Green, Blue) is the additive color model used by all digital screens. Each channel
ranges from 0 to 255. rgb(59, 130, 246) is the CSS equivalent of #3B82F6 —
a vivid blue used in Tailwind CSS's blue-500 palette. Converting between HEX and RGB
is necessary whenever you move between CSS shorthand notations, design tools, and programming languages.
19 formatos de color a la vez
Beyond HEX and RGB, this tool instantly outputs: RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, CIE Lab,
LCH, OKLCH, XYZ, Integer, 0x Notation, Android ARGB, Swift UIColor, Java AWT Color,
and .NET Color.FromArgb() — every format used in CSS, Android, iOS, print, and graphics programming.
Selector de Color en Canvas
The built-in color picker uses the Canvas API to render a smooth saturation–brightness square and
a hue strip. Drag the crosshair to any point, or drag the hue strip to cycle through the spectrum.
The picker runs at 60fps using requestAnimationFrame and fully supports touch on mobile devices.
This is a proper professional-grade picker, not the limited native browser <input type="color">.
Generador de paleta (6 tipos de armonía)
Mathematically derived color harmonies make palette creation instant. Choose from Complementary, Analogous, Triadic, Split-Complementary, Tetradic, and Monochromatic palettes. Each swatch is clickable — loading that color into the converter. Export any palette as CSS custom properties, Tailwind config, SCSS variables, or JSON.
Verificación de accesibilidad WCAG
Every color you enter is instantly evaluated against WCAG 2.1 accessibility guidelines. The contrast checker tests your color against any text color (defaulting to white) and shows contrast ratios with pass/fail badges for AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), and AAA Large (4.5:1). Swap foreground and background with one click.
Preguntas frecuentes
Divide el código HEX de 6 dígitos en tres pares y convierte cada uno de base 16 a base 10. Por ejemplo, #3B82F6: 3B = R=59, 82 = G=130, F6 = B=246. Nuestra herramienta hace esto al instante y también produce 18 otros 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 alfa/transparencia en los últimos dos dígitos. Usa el control deslizante alfa para generar la salida HEX8 de 8 dígitos.
Sí: tanto la entrada 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.
WCAG (Pautas de Accesibilidad para el Contenido Web) define relaciones de contraste mínimas para garantizar que el texto sea legible por personas con baja visión. AA requiere 4,5:1 para texto normal y 3:1 para texto grande (18pt o más, o 14pt negrita). AAA requiere 7:1 y 4,5:1. Cumplir estos estándares es necesario para la conformidad con ADA y las buenas prácticas de UX.
OKLCH es un espacio de color perceptualmente uniforme y moderno, soportado de forma nativa en CSS Color Level 4. A diferencia de HSL, los cambios numéricos iguales en OKLCH corresponden a cambios de color percibidos iguales, 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 3x3 a tus valores RGB, con matrices separadas para cada tipo de deficiencia de visión 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 (ceguera total de color).
Genera una cadena de propiedad CSS filter que transforma un SVG o ícono negro en el color que selecciones. Esto es muy útil para bibliotecas de íconos (Font Awesome, Heroicons) cuando necesitas recolorear elementos SVG sin editar los archivos fuente. Encuéntralo en la pestaña Degradado.
No. Todos los cálculos de color ocurren íntegramente en tu navegador usando JavaScript. Las imágenes que subas se procesan localmente mediante la Canvas API y nunca salen de tu dispositivo. El historial de colores y los favoritos se guardan solo en el localStorage de tu navegador.