Convertidor de color RGB a HEX
Easifica tus colores — convierte valores RGB a códigos HEX.
Free online RGB to HEX color converter. Drag RGB sliders (0–255) or type values to instantly generate the HEX code plus 16 other formats: RGBA, HSL, HSLA, HSV, HWB, CMYK, CIE Lab, LCH, OKLCH, XYZ, HSI, Decimal, Android ARGB, Win32 COLORREF, and HEX8. Includes a canvas color picker, WCAG 2.1 contrast checker, 6 color harmony palettes, 10-step shade/tint scale, 7-type color blindness simulation, image eyedropper with loupe, gradient builder, CSS filter generator, named CSS color search, 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
- Arrastra los controles deslizantes RGB — Red, Green, and Blue channels (0–255 each). Each slider track shows its own color gradient so you can see exactly what you're mixing.
- Ver HEX y 18 formatos más al instante — all 19 format conversions update live as you drag. Copy any format with one click.
- Usa el selector de lienzo — drag the saturation/brightness square or hue strip for a visual approach. Fully touch-enabled on mobile.
- Explora las pestañas de funciones — generate color palettes, build a shade/tint scale, check WCAG contrast, simulate color blindness, pick from an image, or create gradients.
Convertidor de color RGB a HEX
RGB to HEX conversion is one of the most fundamental tasks in web development. Our free RGB to HEX converter makes it instant — type or drag the R, G, B sliders and watch all 19 color format conversions update simultaneously. The page itself responds to your selected color, creating an immersive, design-tool-grade experience.
¿Qué es RGB?
RGB (Red, Green, Blue) is the additive color model used by every digital screen. Red, green, and blue
light combine to produce all visible colors. Each channel ranges from 0 (off) to 255 (maximum intensity).
rgb(0, 0, 0) is black; rgb(255, 255, 255) is white;
rgb(59, 130, 246) is a vivid blue. RGB is native to CSS, HTML Canvas, SVG, and virtually
all web graphics systems.
¿Qué es HEX?
A HEX color code is a compact 6-character hexadecimal string like #3B82F6.
Each pair of characters maps to one RGB channel in base-16: 3B=59 (R), 82=130 (G), F6=246 (B).
HEX is the standard format in CSS stylesheets, HTML attributes, Figma, Sketch, Adobe XD,
and most design tool color pickers. Converting from RGB to HEX is necessary when moving
from code-specified colors to design tool specifications.
Controles RGB con Código de Color
Unlike generic sliders, each channel slider in this tool shows its own live color gradient. The Red slider transitions from black-through-red, showing exactly what increasing that channel does at the current green and blue values. The same applies to Green and Blue. This makes color mixing intuitive — you see the effect of every change before you release the mouse.
Escala de 10 pasos de Sombra & Tinte
Generate a complete 10-step color scale (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) inspired by Tailwind CSS naming. Click any step to load it as your working color. Export the entire scale as CSS custom properties, Tailwind config, SCSS variables, or JSON for instant integration into your design system.
Generador de Armonía de Color
Six types of mathematical color harmonies are generated automatically: Complementary (opposite on the wheel), Analogous (adjacent, ±30°), Triadic (evenly at 120°), Split-Complementary (±150° from complement), Tetradic (four at 90°), and Monochromatic (same hue, varying lightness). Click any palette swatch to instantly load that color. Export as CSS, Tailwind, SCSS, or JSON.
Privacidad ante todo
All conversions happen entirely in your browser. No color data is sent to any server. Uploaded
images are processed locally via the Canvas API. Color history (last 20) and favorites are
stored only in your browser's localStorage.
Preguntas frecuentes
Convierte cada canal RGB (0-255) a una cadena hexadecimal de 2 dígitos y concaténalos con el prefijo #. Por ejemplo: R=59=3B, G=130=82, B=246=F6 = #3B82F6. Nuestra herramienta hace esto al instante mientras arrastras los controles.
HSL (Tono, Saturación, Luminosidad) separa la información de color de una manera que se corresponde con la percepción humana. El tono es el ángulo del color (0-360), la saturación es la intensidad (0-100%) y la luminosidad es el brillo (0-100%). Es mucho más intuitivo para ajustar colores — puedes aclarar un color cambiando solo L, en lugar de ajustar los tres valores RGB.
CMYK (Cian, Magenta, Amarillo, Negro) es el modelo de color sustractivo que se usa en producción impresa profesional. Si estás preparando colores para un trabajo de impresión, usa la salida CMYK de esta herramienta para especificar los valores de color precisos para tu impresora o imprenta.
CIE Lab (L*a*b*) es un espacio de color donde las mismas distancias numéricas corresponden a diferencias de color percibidas iguales, a diferencia de RGB o HSL donde el mismo paso puede verse diferente según la región del color. Se usa 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 colores × 11 tonos = 242 colores) y mostramos las 5 coincidencias más cercanas con sus nombres de clase (p. ej. blue-500), valores HEX y puntuaciones de distancia. Haz clic en el botón de copiar en cualquier fila para copiar el nombre de clase.
Abre la pestaña de función Armonías o Tonos, luego haz clic en uno de los botones de exportación: CSS Vars, Tailwind, SCSS o JSON. El código formateado se copia en tu portapapeles.
Sí: abre la pestaña Imagen, arrastra y suelta o carga cualquier imagen, luego pasa el cursor para ver una lupa (vista de píxel 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 seleccionables.
Los favoritos y el historial se almacenan en el localStorage de tu navegador y persisten entre sesiones en el mismo navegador. No se sincronizan entre dispositivos y se perderán si borras los datos del navegador. Nada se almacena en nuestros servidores.