Colores: hex, rgb, hsl, oklch y color-mix()

Hay cuatro formas principales de escribir un color en CSS. No son equivalentes: cada una es un modelo mental distinto, y elegir el correcto cambia cómo DISEÑAS. Hoy pasas de copiar códigos de color a entenderlos — y conoces oklch, el formato con el que la industria está migrando.

hex y rgb: el color como lo ve la máquina

#7C3AED y rgb(124 58 237) son el mismo color escrito en dos bases: tres pares hexadecimales o tres números 0-255 para rojo, verde y azul. Son los formatos que verás en Figma, en los picker y en el 90% del código existente. Su limitación: son ilegibles para humanos. ¿Qué color es #B45309? Nadie lo sabe sin probarlo.

hsl: el color como lo piensa un diseñador

hsl(258 88% 58%) describe el color por tono (0-360, la rueda de color), saturación (qué tan vivo) y luminosidad (qué tan claro). De pronto los colores se pueden RAZONAR: ¿más oscuro? baja la luminosidad. ¿Más apagado? baja la saturación. ¿El color complementario? suma 180 al tono.

oklch: hsl corregido por la ciencia

hsl tiene un defecto oculto: su luminosidad MIENTE. Un amarillo y un azul con el mismo l% se perciben clarísimo y oscurísimo respectivamente — el ojo humano no procesa todos los tonos igual. oklch usa luminosidad perceptual: mismo número = misma claridad percibida, en cualquier tono.

Ese es el motivo por el que los sistemas de diseño modernos (incluido Tailwind v4, que usarás más adelante) migraron a oklch: generas 10 tonos de una paleta cambiando un solo número y todos armonizan.

Opacidad y mezclas

<div class="fila">
<div class="chip base">base</div>
<div class="chip hover">hover</div>
<div class="chip velo">velo 15%</div>
</div>
<p>Un color de marca, tres variantes — cero códigos inventados.</p>

body { font-family: system-ui; padding: 24px; color: #1e293b; }
.fila { display: flex; gap: 12px; }
.chip { padding: 16px 20px; border-radius: 8px; font-weight: 600; }
.base { background: #7c3aed; color: white; }
.hover { background: color-mix(in oklch, #7c3aed 80%, black); color: white; }
.velo { background: rgb(124 58 237 / 0.15); color: #5b21b6; }

Mini-reto

Toma el color principal de tu periódico y crea tres variantes con color-mix(): un hover 20% más oscuro, un fondo al 10% sobre blanco y un borde al 40%. Aplícalas al nav. Un solo color de origen, un sistema completo.

Qué sigue

Colores listos. La próxima lección responde una pregunta que llevas semanas acumulando sin saberlo: ¿por qué algunos elementos se apilan (p, h1, div) y otros conviven en la misma línea (a, strong, img)? Display: el interruptor del comportamiento.