Conversor de Color y Generador de Paletas

Conversor de Color y Generador de Paletas

Convierte colores entre formatos HEX, RGB, HSL, HSB/HSV y CMYK al instante. Selecciona visualmente un color o escribe cualquier valor de color CSS, color con nombre o cadena de formato sin procesar. La herramienta produce todas las representaciones de formato simultáneamente y genera paletas basadas en teoría del color.

Como Usarlo

1. Elige un color. Haz clic en la vista previa del color para abrir el selector de color del sistema, escribe un valor en el campo de entrada o arrastra los controles deslizantes RGB
2. Lee las conversiones. Los cinco formatos (HEX, RGB, HSL, HSB, CMYK) se actualizan en tiempo real
3. Copia cualquier formato. Usa el boton Copiar junto al formato que necesitas o Copiar Todo
4. Genera paletas. Elige un tipo de armonía (complementaria, análoga, triádica, etc.)
5. Verifica el contraste. La relación de contraste WCAG contra blanco y negro se muestra automáticamente

Como Funcionan los Modelos de Color

Cada color en tu pantalla se produce mezclando luz roja, verde y azul en diferentes intensidades. RGB expresa esto directamente: tres canales en un rango de 0-255, dando 16.7 millones de colores posibles. HEX es el mismo modelo escrito en base 16. #FF0000 significa rgb(255, 0, 0).

HSL y HSB transforman la misma información a una forma más cercana a como los humanos piensan sobre los colores. El tono (Hue) es la posición en grados en la rueda de color (0 = rojo, 120 = verde, 240 = azul). La saturación mide que tan vivo es el color versus gris. El tercer eje difiere: HSL usa claridad (0% = negro, 100% = blanco, 50% = color puro), mientras que HSB usa brillo (0% = negro, 100% = intensidad total). CSS usa HSL. Las herramientas de diseño como Figma, Sketch y Photoshop usan HSB.

CMYK (Cyan, Magenta, Yellow, Key/Black) es un modelo sustractivo para impresión. Las tintas absorben luz en lugar de emitirla. La conversión de RGB a CMYK es una aproximación matemática porque los dos espacios de color no cubren la misma gama. Los azules saturados que se ven vibrantes en pantalla generalmente no se pueden reproducir en CMYK.

Armonía de Color y Paletas

La herramienta genera cinco tipos de paleta:

Complementaria: Colores opuestos en la rueda. Máximo contraste. Mejor para elementos que necesitan destacar.

Análoga: Colores adyacentes en la rueda. Bajo contraste, armonioso. Mejor para fondos y diseños sutiles.

Triádica: Tres colores espaciados uniformemente (120 grados de separación). Contraste equilibrado.

Tetrádica: Dos pares de colores complementarios. Rica pero difícil de equilibrar.

Monocromática: Variaciones de un solo tono. Consistentemente armoniosa. Mejor para UI minimalista.

Contraste WCAG

La relación de contraste mide la diferencia de luminancia entre dos colores. Va de 1:1 (sin contraste) a 21:1 (máximo, negro sobre blanco). La herramienta muestra el puntaje y el nivel WCAG alcanzado (AAA, AA o Fallo).