Un mismo color se representa de formas distintas según el contexto: HEX y RGB se usan en desarrollo web y diseño digital, HSL es más intuitivo para ajustar tono, saturación y luminosidad, y CMYK es el modelo usado en impresión. Esta herramienta convierte entre los cuatro en tiempo real.

Cómo usar esta herramienta

Elige un color con el selector visual o escribe un valor directamente en HEX, RGB o HSL.
Los otros formatos se actualizan automáticamente al mismo color.
Copia el valor que necesites con el botón "Copiar" de cada campo.

Ejemplo práctico

El verde lima #84cc16 equivale a rgb(132, 204, 22) y a hsl(83, 81%, 44%) — el mismo color, tres notaciones distintas según dónde vayas a usarlo (CSS, diseño gráfico, impresión).

Conceptos clave

El formato HEX (hexadecimal) representa un color con seis caracteres, como #84cc16, donde cada par de dígitos codifica en base 16 la intensidad de rojo, verde y azul, de 00 (nada) a FF (máximo). Es el formato más compacto y el más usado en CSS y diseño web por su brevedad, pero no es fácil de leer a simple vista: nadie adivina mentalmente qué color es #3b82f6sin verlo renderizado. Cuando los tres pares de dígitos se repiten, como en #ffffff, puede abreviarse en CSS a la notación corta de tres caracteres (#fff).

El modelo RGB (Red, Green, Blue) es un modelo aditivo: parte del negro y va sumando luz roja, verde y azul hasta llegar al color deseado, que es exactamente cómo funcionan físicamente los píxeles de una pantalla (a diferencia de la mezcla de pigmentos en pintura, que es sustractiva). Cada canal va de 0 a 255, dando más de 16 millones de combinaciones posibles. El modelo HSL (Hue, Saturation, Lightness — tono, saturación, luminosidad) describe el mismo color de forma mucho más intuitiva para un humano: el tono es un ángulo en la rueda de color (0-360°), la saturación indica cuán vivo o apagado es el color, y la luminosidad cuán claro u oscuro. Por eso HSL es el formato preferido cuando se quiere, por ejemplo, generar variantes más claras u oscuras de un mismo color simplemente ajustando el porcentaje de luminosidad, sin tener que recalcular los tres canales RGB a mano. Existe también un cuarto modelo habitual en imprenta, CMYK(cian, magenta, amarillo y negro), que es sustractivo: parte del blanco del papel y va restando luz reflejada al añadir tinta, motivo por el que los colores que se ven bien en pantalla (RGB) a veces se ven apagados al imprimirse, si no se convierten correctamente a CMYK antes.

Elegir bien los colores no es solo una cuestión estética: la accesibilidad web (WCAG) exige un ratio de contraste mínimo entre el texto y su fondo — 4.5:1 para texto normal y 3:1 para texto grande, según el nivel AA — para que personas con baja visión o daltonismo puedan leer el contenido sin dificultad. Herramientas de gestión de color en diseño web, como esta, ayudan a comprobar y convertir rápidamente entre formatos al construir una paleta, asegurando que los mismos valores se reutilicen de forma consistente en CSS, en herramientas de diseño gráfico y en especificaciones de marca, sin perder precisión en la conversión entre notaciones.

Preguntas frecuentes

¿Por qué RGB se usa en pantallas y CMYK en impresión?

RGB es un modelo aditivo (mezcla de luz: rojo, verde, azul) pensado para dispositivos que emiten luz. CMYK es sustractivo (mezcla de tinta: cian, magenta, amarillo, negro), pensado para papel, donde se resta luz reflejada.

¿Para qué sirve HSL frente a RGB?

HSL separa el tono (H) de la saturación (S) y la luminosidad (L), lo que facilita crear variaciones de un mismo color (más claro, más oscuro, más apagado) sin recalcular los tres canales RGB a mano.

¿Es lo mismo #FFF que #FFFFFF?

Sí, HEX admite una notación corta de 3 dígitos donde cada carácter se duplica: #FFF equivale exactamente a #FFFFFF.