Los sistemas de diseño típicos incluyen quince tonos mezclados a mano de un color de marca, elaborados con una herramienta de diseño y pegados a mano. color-mix(en oklab, ...) deriva esos tonos en el navegador a partir de las mismas dos propiedades personalizadas, por lo que 'la marca, 12 por ciento lavada' es una función en lugar de una captura de pantalla.

:root {
  --ink: #111111;
  --brand: #bb0000;
}
.card { background: color-mix(in oklab, var(--brand) 8%, white); }
.card:hover { background: color-mix(in oklab, var(--brand) 16%, white); }
.muted { color: color-mix(in oklab, var(--ink) 55%, white); }

El modo oscuro es un bloque, no un rediseño

@media (prefers-color-scheme: dark) {
  :root { --ink: #eeeeee; --brand: #ff6659; }
}
/* every mix above re-resolves; nothing else changes */

Reglas que lo mantienen honesto

  1. Mezcle de forma perceptiva: oklab mantiene los tintes con un aspecto uniforme en todos los tonos; srgb está bien para los grises.
  2. Mantenga un piso de contraste: una mezcla de marcas del 5 por ciento es un color de fondo, nunca un color de texto.
  3. Nombra las recetas, no los resultados: --superficie-ritmos silenciosos --rojo-04.

Este mismo sitio se ejecuta en dos propiedades personalizadas más mezclas; Todo el rediseño de la revista cálida a la hoja ancha blanca fue un bloque de ediciones simbólicas. Ésa es la recompensa cuando los colores son datos.