Color Converter
Color Harmony
WCAG Contrast Checker
Normal text — The quick brown fox jumps over the lazy dog.
Large text — 18pt / Bold 14pt
¿Qué es un conversor de color?
El mismo color puede escribirse en varias notaciones: HEX (#3366ff) para CSS y entrega de diseño, RGB (51, 102, 255) para pantallas y API, y HSL (tono, saturación, luminosidad), mucho más fácil de razonar cuando quieres aclarar o desaturar un tono. Un conversor pasa de una notación a otra sin cambiar el color en sí.
Ejemplo: #3366FF significa R=0x33=51, G=0x66=102 y B=0xFF=255, es decir rgb(51, 102, 255). Con max=255 y min=51, la luminosidad es L=(255+51)/2/255=60%. El canal azul domina, así que la saturación es del 100% y el tono cae en el sector azul a 225°, lo que da hsl(225, 100%, 60%). El texto blanco sobre este azul alcanza un contraste WCAG de unos 4,7:1, justo por encima del 4,5:1 exigido para texto normal en AA.
Cómo usar el conversor de color
- Escribe o pega un color como #hex, rgb() o hsl(), o elígelo en el círculo cromático.
- Consulta los valores convertidos en las otras notaciones y copia el que necesites.
- Alterna entre armonía complementaria y triádica para explorar paletas.
- Introduce color de texto y de fondo para comprobar la relación de contraste WCAG en texto normal y grande.
Preguntas frecuentes sobre color y contraste
¿Qué relación de contraste necesito para la accesibilidad?
WCAG 2 AA exige al menos 4,5:1 para texto normal y 3:1 para texto grande. El nivel AAA sube a 7:1 y 4,5:1, y el comprobador muestra ambos umbrales en vivo.
¿En qué se diferencian HEX, RGB y HSL?
Codifican el mismo color de distinta forma: HEX es compacto y habitual en CSS, RGB corresponde a los canales de pantalla y HSL describe tono, saturación y luminosidad, más fácil de ajustar en código.
¿Qué son los colores complementarios y triádicos?
El complementario está a 180° frente al tuyo y crea un contraste fuerte; una paleta triádica toma tres colores separados 120° para un esquema vibrante pero equilibrado.
