Conversor de colores

¿Qué es un convertidor de color?

Un convertidor de color traduce valores de color entre distintos modelos: HEX, RGB, HSL, HSV y CMYK. Diseñadores y desarrolladores cambian frecuentemente entre formatos: CSS usa HEX y RGB, las herramientas de diseño usan HSL para una elección intuitiva, y los flujos de impresión requieren CMYK. Esta herramienta maneja todas las conversiones al instante.

Cada modelo de color representa los colores de manera distinta. RGB (rojo, verde, azul) mezcla luz: se usa para pantallas. CMYK (cian, magenta, amarillo, negro) mezcla tinta: se usa para impresión. HSL (tono, saturación, luminosidad) describe los colores como los pensamos los humanos: color puro, viveza y brillo. HEX es simplemente RGB escrito en hexadecimal.

Modelos de color explicados

• HEX — un código hexadecimal de seis dígitos (#FF5733). Compacto y muy usado en desarrollo web.
• RGB — tres valores (0-255) para rojo, verde y azul. El modelo de color nativo para pantallas.
• HSL — tono (0-360 grados), saturación (0-100 %) y luminosidad (0-100 %). Intuitivo para crear paletas.
• HSV/HSB — similar a HSL pero usa valor/brillo en lugar de luminosidad. Común en herramientas de diseño gráfico.
• CMYK — cuatro valores (0-100 %) para cian, magenta, amarillo y negro. Se usa en producción impresa.

Cómo usar esta herramienta

Introduce un valor de color en cualquier formato compatible y todas las demás representaciones se calculan al instante. Usa el selector de color para una selección visual. La herramienta muestra una muestra previa y los valores convertidos en HEX, RGB, HSL, HSV y CMYK, listos para copiar y pegar en tu código o herramienta de diseño.

Colores en desarrollo web

CSS admite múltiples formatos de color: hex (#ff5733), rgb(255, 87, 51), hsl(11, 100 %, 60 %) y colores con nombre (tomato). El CSS moderno también admite oklch() y oklab() para espacios de color perceptualmente uniformes. Al elegir entre formatos, HEX es el más compacto, HSL es el más fácil de ajustar programáticamente (aclarar aumentando L, desaturar disminuyendo S) y RGB es el más ampliamente soportado.

Ejemplo práctico

El color hexadecimal #2563EB se descompone en rojo = 0x25 = 37, verde = 0x63 = 99, azul = 0xEB = 235, dando rgb(37, 99, 235). Convertido a HSL da unos hsl(217, 83%, 53%) — un azul saturado. Para aclararlo, sube el valor L; para crear una paleta, gira el valor H en pasos de 30° manteniendo S y L constantes.

Errores comunes

Un error común es suponer que hex y RGB describen colores distintos — son los mismos valores en otra notación. También se ignora el contraste: un texto gris claro sobre blanco puede parecer elegante pero no cumple los ratios WCAG. Además, RGB y CMYK no coinciden uno a uno, así que un color vivo en pantalla puede imprimirse más apagado; haz una prueba de color para impresión en vez de fiarte del monitor.

Preguntas frecuentes

¿Por qué los colores se ven diferentes en pantalla y en impresión?

Las pantallas emiten luz (RGB, mezcla aditiva de color), mientras que las impresoras usan tinta que absorbe luz (CMYK, mezcla sustractiva). El gamut RGB (rango de colores posibles) es mayor que el CMYK, por lo que algunos colores vivos en pantalla no pueden reproducirse en impresión. Por eso los diseñadores deben trabajar en CMYK al crear materiales impresos y usar colores Pantone para coincidencia de color crítica.

¿Cuál es la diferencia entre HSL y HSV?

Ambos usan tono y saturación, pero difieren en el tercer componente. La luminosidad de HSL va de 0 (negro) pasando por 0,5 (color puro) hasta 1 (blanco). El valor de HSV va de 0 (negro) a 1 (brillo total). En HSL, una saturación del 100 % con luminosidad 50 % da el color más puro. En HSV, saturación 100 % y valor 100 % da el color más puro. HSL suele ser más intuitivo para diseño web.

¿Cuál es la diferencia entre HEX, RGB y HSL?

Los tres describen los mismos colores en pantalla. HEX y RGB indican cantidades de rojo, verde y azul (en base 16 o base 10), mientras que HSL usa tono, saturación y luminosidad, más intuitivo para ajustar o generar paletas.