OKLCH + color-mix
Color perceptualmente uniforme y mezclas en cualquier espacio
oklch()
El espacio de color perceptualmente uniforme. El mismo valor de lightness se ve igual de claro/oscura en todos los tonos — algo que hsl() no logra.
background: oklch(70% 0.18 250)
color-mix()
Mezcla dos colores en cualquier espacio de color. Acá mezclamos amber con zinc en oklch.
color-mix(in oklch, amber, zinc 50%)
Por qué oklch
En hsl() el amarillo puro y el azul puro tienen la misma lightness "50%" pero el amarillo se ve mucho más claro. oklch corrige eso: misma L = misma luminancia percibida.
/* oklch: L lightness, C chroma, H hue */
/* misma L = misma luminancia percibida en todos los tonos */
.swatch-1 { background: oklch(70% 0.18 0); } /* rojo */
.swatch-2 { background: oklch(70% 0.18 150); } /* verde */
.swatch-3 { background: oklch(70% 0.18 250); } /* azul */
/* color-mix: mezcla dos colores en oklch */
.mid {
background: color-mix(
in oklch,
var(--amber-500),
var(--zinc-100) 50%
);
}Nota honesta sobre soporte
Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.