Conversor de Color

Acerca de esta herramienta

Trabajar con color implica saltar entre notaciones: HEX para CSS legacy, RGB para manipulación de canales, HSL para ajustes intuitivos y OKLCH para paletas perceptualmente uniformes. Este conversor acepta cualquiera de esos formatos — incluido un selector visual — y muestra los cuatro equivalentes al instante, además del ratio de contraste del color sobre blanco y negro según los criterios WCAG 2 (AA ≥ 4.5, AAA ≥ 7 para texto normal). Si introduces un color OKLCH fuera del gamut sRGB, el resultado se clampa y se avisa con un indicador. Todo se calcula en el navegador.

Casos de uso

• Convertir tokens de diseño entre formatos CSS
• Generar valores OKLCH para paletas perceptualmente uniformes
• Comprobar contraste WCAG de colores de marca sobre fondos claros/oscuros
• Normalizar colores recibidos en formatos mezclados

Preguntas frecuentes

¿Qué formatos de entrada acepta?

Hexadecimal de 3, 4, 6 u 8 dígitos (con o sin #), rgb()/rgba() con números o porcentajes, hsl()/hsla() y oklch(l c h). También puedes usar el selector visual de color.

¿Qué es OKLCH y por qué usarlo?

OKLCH es un espacio de color perceptualmente uniforme: variar L cambia la luminosidad real percibida de forma consistente, a diferencia de HSL. Es ideal para generar paletas y escalas de color equilibradas.

¿Qué significa el aviso «fuera de gamut»?

Algunos colores OKLCH no tienen equivalente en sRGB (pantallas estándar). El conversor aproxima al color visible más cercano y muestra el aviso para que sepas que el valor se ha ajustado.

¿Cómo se calcula el contraste?

Se usa la fórmula WCAG 2 de luminancia relativa: el ratio va de 1 a 21. AA requiere ≥ 4.5 para texto normal y AAA ≥ 7. El panel muestra el ratio del color sobre blanco y sobre negro.