ColorShift

Cómo funciona la conversión de color

Todos los formatos de color representan el mismo espacio sRGB de distinta manera. HEX y RGB son directos (base 16 vs. tres números 0-255); HSL describe el color como matiz/saturación/luminosidad; OKLCH usa un modelo perceptual más moderno donde los cambios de luminosidad y matiz se sienten uniformes al ojo humano:

#6C4FE0
→ rgb(108, 79, 224)
→ hsl(252, 70%, 59%)
→ oklch(54.2% 0.209 286.3)

Las conversiones HEX/RGB/HSL usan las fórmulas estándar de conversión de color; OKLCH se calcula pasando por el espacio lineal sRGB y OKLab según la especificación de Björn Ottosson — todo el cálculo ocurre en tu navegador, sin librerías externas.

Preguntas frecuentes

¿Qué es OKLCH y por qué usarlo en vez de HSL?

OKLCH es un espacio de color perceptualmente uniforme: cambiar la luminosidad (L) o el matiz (H) no distorsiona el brillo percibido como sí pasa con HSL. Es el formato recomendado por CSS Color Module Level 4 para paletas consistentes.

¿Los formatos se actualizan todos al mismo tiempo?

Sí. Editar cualquiera de los cuatro campos (HEX, RGB, HSL u OKLCH) recalcula instantáneamente los otros tres y la vista previa.

¿Soporta colores fuera del espacio sRGB?

No; esta herramienta trabaja dentro de sRGB (el espacio estándar de pantallas), igual que HEX y RGB. Un valor OKLCH que exceda ese rango se recorta al color sRGB más cercano.

¿Qué pasa si escribo un valor inválido?

Ese campo se marca en rojo y los demás conservan el último color válido hasta que corrijas el valor.