Saltar al contenido
nearnull

Conversor de Colores

Convertí cualquier color entre HEX, RGB, HSL, HSV, CMYK y nombres de color CSS al instante. Funciona enteramente en tu navegador: no se envía nada a ningún servidor.

Color

HEX (#2563eb), rgb(), hsl(), hsv(), cmyk(), oklch(), lab() o un nombre CSS como rebeccapurple. Soporta alpha.

Conversiones

¿Qué es un conversor de colores?

Un mismo color se puede escribir en varias notaciones. HEX y RGB lo describen como cantidades de luz roja, verde y azul; HSL y HSV lo describen por tono, saturación y luminosidad o valor, que es más fácil de razonar cuando ajustás un color a mano; OKLCH y Lab lo describen en términos perceptuales, donde pasos iguales se ven igual de distintos, y CMYK lo describe como las tintas cian, magenta, amarilla y negra que usaría una imprenta. Esta herramienta lee un color en cualquiera de esos formatos, o un nombre CSS, y lo muestra en todos los demás a la vez, junto con el más cercano de los 148 colores con nombre de CSS.

Ejemplos

Convertir y escribir el mismo color en código:

JavaScript
const hex = "#2563eb";
const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
// r = 37, g = 99, b = 235
CSS
color: #2563eb;
color: rgb(37, 99, 235);
color: hsl(221, 83%, 53%);
Python
import colorsys

r, g, b = (int("2563eb"[i:i + 2], 16) for i in (0, 2, 4))
h, l, s = colorsys.rgb_to_hls(r / 255, g / 255, b / 255)
Sass
$brand: #2563eb;
hue($brand)        // 221deg
lightness($brand)  // 53%
Swift
UIColor(red: 37 / 255, green: 99 / 255, blue: 235 / 255, alpha: 1)

Casos de uso

Pasar colores entre herramientas de diseño y código

Las herramientas de diseño suelen mostrar HSB o CMYK, mientras que CSS pide HEX, RGB o HSL. Pegá el valor que tenés y copiá el que necesitás.

Ajustar un color de marca

Leé un valor HEX como HSL para ver su tono, saturación y luminosidad por separado, y así es obvio cómo sacar una variante más clara o menos saturada.

Preparar colores para imprenta

Obtené un desglose CMYK aproximado de un color de pantalla como punto de partida antes de ajustarlo en tu flujo de impresión.

Nombrar un color en una hoja de estilos

Averiguá si un color tiene nombre CSS exacto, o cuál es el color con nombre más cercano, cuando querés un placeholder legible en un prototipo.

Preguntas frecuentes

¿Qué formatos de entrada acepta?
Hex de 3, 4, 6 u 8 dígitos (con o sin #), rgb() y rgba(), hsl() y hsla(), hsv() o hsb(), cmyk(), oklch(), oklab(), lab() y lch(), los 148 nombres de color CSS más transparent, y tres números sueltos como 255 128 0, que se leen como RGB. Funcionan tanto la sintaxis con comas como la moderna con espacios y barra.
¿Por qué el valor CMYK es solo aproximado?
La conversión real para imprenta depende del papel, las tintas y un perfil de color ICC. Esta herramienta usa la fórmula estándar independiente del dispositivo, que sirve como referencia pero no va a coincidir exactamente con una prueba de imprenta.
¿Cuál es la diferencia entre HSL y HSV?
Los dos usan el mismo tono. En HSL, luminosidad 100% siempre es blanco y 50% es el color puro. En HSV (también llamado HSB), valor 100% es la versión más brillante del color, y el blanco necesita saturación 0%. Herramientas como Photoshop y Figma suelen mostrar HSB.
¿Cómo funciona el alpha (transparencia)?
Si el input trae alpha, como #2563eb80 o rgba(37, 99, 235, 0.5), se conserva en las salidas HEX, RGB y HSL. HSV y CMYK no tienen canal alpha, así que muestran el color opaco.
¿Mis datos se envían a algún servidor?
No. Cada conversión ocurre en tu navegador con JavaScript plano. Nada de lo que escribís se transmite ni se guarda.

Herramientas relacionadas

Verificador de Contraste de Color (WCAG AA / AAA)Generador de Tonalidades (Tints y Shades)Generador de Degradados CSSGenerador de Paletas de Colores (Armonías)Selector de Color de ImagenSimulador de Daltonismo