Les systèmes de conception typiques comportent quinze nuances d'une couleur de marque mélangées à la main, réalisées dans un outil de conception et collées à la main. color-mix (dans oklab, ...) dérive ces nuances dans le navigateur des deux mêmes propriétés personnalisées, donc « la marque, lavée à 12 % » est une fonction au lieu d'une capture d'écran.

: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); }

Le mode sombre est un blocage, pas une refonte

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

Des règles qui garantissent l'honnêteté

  1. Mélangez de manière perceptuelle : oklab maintient les teintes cohérentes entre les teintes ; srgb convient aux gris.
  2. Gardez un sol contrasté : un mélange de marques à 5 % est une couleur de fond, jamais une couleur de texte.
  3. Nommez les recettes, pas les résultats : --surface-quiet beats --red-04.

Ce même site fonctionne sur deux propriétés personnalisées ainsi que des mélanges ; toute la refonte du warm-zine vers le grand format blanc n'était qu'un bloc de modifications symboliques. C'est la récompense lorsque les couleurs sont des données.