Convertidor y generador de paletas de color: HEX, RGB, HSL
Convierte entre HEX, RGB, HSL y nombres CSS. Genera paletas de variantes (más claras, más oscuras, complementarias) y calcula el contraste WCAG para accesibilidad. Preview visual instantáneo.
100% local: tus datos no salen del navegador
selector visual
Formatos
Contraste WCAG
Paleta de variantes
Más claras → más oscuras
Complementario y análogos
Colores en CSS: un formato, muchas representaciones
Un mismo color puede expresarse como HEX (#ff5722), RGB
(rgb(255, 87, 34)) o HSL (hsl(14, 100%, 57%)).
HEX es compacto y compatible con todo, RGB es intuitivo cuando piensas
en componentes, y HSL es el que mejor se ajusta al pensamiento humano
(tono, saturación, luminosidad) y hace fácil generar variantes.
La accesibilidad exige que el texto tenga suficiente contraste con su fondo. Las WCAG definen ratios mínimos (4.5 para texto normal, 3.0 para grande) y niveles superiores (AAA con 7.0). Un color que falla WCAG AA es literalmente ilegible para muchas personas con baja visión o en pantallas con brillo alto al sol.
Esta herramienta hace todas las conversiones y cálculos en tu navegador, con las fórmulas oficiales de CSS Color 4 y sRGB.
Preguntas frecuentes
¿Qué formatos de entrada acepta?
HEX (#ff5722, ff5722, #f52 o f52), RGB (rgb(255, 87, 34)), HSL (hsl(14, 100%, 57%)) y nombres CSS (red, tomato, cornflowerblue). Se detecta el formato automáticamente.
¿Qué es el ratio de contraste WCAG?
Es un número (de 1 a 21) que mide la diferencia de luminancia entre dos colores. Las WCAG (Web Content Accessibility Guidelines) exigen un mínimo de 4.5:1 para texto normal AA, 3:1 para texto grande AA, 7:1 para AAA. Si un color no llega, el texto es difícil de leer para personas con baja visión.
¿Cómo se calculan las variantes de paleta?
Convertimos a HSL y modificamos el canal L (lightness) para las variantes más claras y más oscuras, mantenemos H y S. Para el complementario giramos el H 180°. Para los análogos, ±30° del H original. Todas las conversiones son matemáticas puras según los estándares CSS Color 4.
¿Se envía algo a un servidor?
No. Todas las conversiones y cálculos ocurren en tu navegador con JavaScript puro.