Tokens CSS : trois variables, six palettes

Le système de couleurs de ce site repose sur trois variables : --brand-h (la teinte de la couleur de marque), --brand-c (son chroma), et --neutral-h (la teinte des gris). Tout le reste (fonds, textes, bordures, états de focus) est calculé en OKLCH à partir de ces trois nombres.

Pourquoi pas des couleurs nommées directement ?

Si chaque composant écrivait background: #2f1321, changer de palette demanderait de retoucher chaque fichier. En ne touchant qu’à --brand-h/--brand-c/--neutral-h, les six palettes ci-dessous (et leurs variantes claire/sombre) sortent du même calcul.

Pourquoi OKLCH plutôt que HSL

La première version tenait en HSL, et ça marchait mal sur un point précis : à luminosité égale, un jaune HSL éclate alors qu’un bleu reste sombre. Impossible donc de fixer une échelle de gris et de textes une bonne fois pour toutes, il fallait re-vérifier le contraste à chaque nouvelle teinte.

Le L d’OKLCH est perceptuel : deux couleurs qui partagent la même luminosité se ressemblent vraiment en intensité, quelle que soit leur teinte. --text-secondary est posé à L 0.45 une seule fois, et il tient son contraste sur les six palettes sans exception à écrire.

Choisir la palette

Clique sur une pastille : la palette change sur toute la page, y compris dans cet article.

Le piège du mode sombre

Le vrai piège n’est pas de définir des couleurs sombres, mais d’éviter que deux thèmes ne deviennent deux systèmes à maintenir séparément. Ici chaque token est écrit une seule fois, en light-dark(clair, sombre), et c’est color-scheme qui tranche : light dark pour suivre le système, forcé sur l’une des deux branches quand le visiteur a choisi. Un composant qui utilise var(--text-primary) n’a jamais besoin de savoir dans quel thème il se trouve.

C’est aussi ce qui permet au composant <Prose> de ce blog (celui qui habille le texte que tu lis) de rester lisible en clair et en sombre sans variante dark: : il utilise les mêmes tokens que le reste du site.