HEX (#RRGGBB)
El formato más común. Tres pares de dígitos hexadecimales representan los canales rojo, verde y azul, de 00 (0) a FF (255).
#0ea5e9 equivale a rojo 14, verde 165 y azul 233.
**Abreviado:** cuando cada par tiene los dos dígitos iguales, puedes escribir solo tres: #aabbcc → #abc.
**Con opacidad:** el HEX de 8 dígitos añade un canal alfa: #0ea5e9cc, donde cc es un 80 % de opacidad (204/255).
**Ideal para:** copiar valores de una herramienta de diseño, valores fijos y hablar con el equipo de diseño. No tanto para manipular: cuesta mucho saber qué aspecto tendrá "un tono más claro" en hexadecimal.
RGB (rgb(R, G, B))
rgb(14, 165, 233) es el mismo color que #0ea5e9, expresado en valores decimales.
**Con opacidad:** rgba(14, 165, 233, 0.8), donde la a es el canal alfa, un decimal de 0 (transparente) a 1 (opaco). En el CSS moderno puedes escribir rgb(14 165 233 / 0.8) sin la función rgba.
**Ideal para:** valores de color calculados con JavaScript. Es fácil interpolar entre dos colores, aunque sigue sin ser intuitivo para tomar decisiones de diseño.
HSL (hsl(H, S%, L%))
HSL son las siglas de tono, saturación y luminosidad en inglés. Es el primer formato que se parece a cómo piensa el color una persona.
- **Tono**: el color en sí, como grados del círculo cromático: 0 y 360 son rojo, 120 verde y 240 azul
- **Saturación**: lo vivo que es frente a lo gris. 100 % es saturación total y 0 % es escala de grises
- **Luminosidad**: lo claro u oscuro que es. 0 % es negro, 100 % es blanco y 50 % es el color "puro"
hsl(199, 89%, 48%) es ese mismo azul cielo.
**Por qué HSL va mejor para diseñar:** cambiar la luminosidad para crear estados al pasar el ratón, estados activos o variantes de tono es trivial. hsl(199, 89%, 40%) es un 8 % más oscuro y hsl(199, 89%, 60%) más claro. Para montar una paleta: eliges un tono y vas variando la luminosidad.
**Limitación:** HSL no es perceptualmente uniforme. Dos colores con el mismo valor de luminosidad no se ven igual de brillantes. El amarillo (60°) con L=50 % parece mucho más luminoso que el azul (240°) con esa misma L.
OKLCH, el estándar moderno
OKLCH es un espacio de color perceptualmente uniforme basado en el modelo Oklab. Usa:
- **L**: luminosidad (de 0 a 1, lineal desde el punto de vista perceptivo)
- **C**: croma (lo colorido que es, más o menos de 0 a 0,4)
- **H**: tono (en grados, el mismo círculo que HSL)
oklch(0.65 0.18 214)
La diferencia clave con HSL: si mantienes la L fija y giras el tono, el brillo se mantiene de verdad. Puedes generar paletas armónicas variando el tono mientras dejas fijas la luminosidad y el croma, y los colores parecerán de la misma familia.
OKLCH además cubre una gama más amplia que sRGB, así que puede expresar los colores vivos que muestran las pantallas modernas (P3, HDR).
Funciona en todos los navegadores modernos (Chrome 111+, Firefox 113+, Safari 15.4+).
Cuándo usar cada uno
**HEX**: para hablar con diseño, para tokens de diseño fijos y para copiar valores de Figma.
**RGB**: para manipular colores mediante código en JavaScript y para interpolar.
**HSL**: en sistemas de diseño donde necesitas derivar tonos por código (estados al pasar el ratón, estados desactivados). Mucho mejor que HEX para eso.
**OKLCH**: en sistemas de diseño nuevos, en temas oscuros, con soporte de color P3 y en cualquier situación donde importe la uniformidad perceptiva. Es la mejor elección para un proyecto de hoy.
Contraste según las WCAG
Al elegir los colores de texto y de fondo, las Pautas de Accesibilidad para el Contenido Web exigen un ratio de contraste de al menos 4,5:1 en el texto normal y de 3:1 en el texto grande. El comprobador de contraste WCAG de NoxaKit calcula ese ratio al instante, algo imprescindible al elegir los colores de una paleta para un sistema de diseño.