Conversor de hex a RGB / HSL / OKLCH

Referencia de formatos

• Hex (#RRGGBB) — seis dígitos hexadecimales, dos para rojo, verde y azul. El más común en CSS y herramientas de diseño. La forma corta opcional de 3 dígitos (#RGB) duplica cada dígito.
• RGB (0–255) — tres enteros de 0 a 255 que representan la intensidad de rojo, verde y azul. Mismo espacio de color que hex, solo decimal en lugar de hexadecimal.
• HSL (Tono, Saturación, Luminosidad) — representación RGB cilíndrica. El tono es un ángulo de 0° a 360° en la rueda de color; la saturación es 0–100% (gris a vivo); la luminosidad es 0–100% (negro a blanco). Más fácil que RGB para elegir colores relacionados, pero no perceptivamente uniforme — valores iguales de L pueden verse muy distintos en brillo.
• OKLCH (Luminosidad, Croma, Tono) — espacio de color perceptivamente uniforme moderno diseñado por Björn Ottosson (2020). L (0–100%) sigue el brillo percibido así que valores iguales de L se ven igual de brillantes; C es el croma (saturación, sin límite pero típicamente 0–0,4 para sRGB en gamut); H es el tono en grados. Usado en CSS Color Module 4 e internamente por Tailwind v4 para la manipulación de color.

Por qué importa OKLCH

Para tareas como generar una paleta de colores equiespaciados o construir una escala tonal (luminosidad 10, 20, 30, …), HSL falla sutilmente: un amarillo al 50% de luminosidad se ve mucho más brillante que un azul al 50% porque el modelo RGB-cilíndrico subyacente no tiene en cuenta la sensibilidad del ojo humano. OKLCH lo arregla — valores iguales de L producen colores igual de brillantes en todos los tonos, así que las paletas y escalas tonales se comportan como esperarías intuitivamente.