Système de couleurs

Que fait Système de couleurs ?

Aperçu

Une bibliothèque organisée de palettes de couleurs prêtes à l'emploi (clair + sombre) couvrant quatre domaines — UI d'application web, marketing/landing page, visualisation de données et terminal/TUI — ainsi que la méthodologie pour construire de nouvelles palettes et vérifier leur accessibilité.

Principe fondamental : choisir les couleurs par rôle sémantique (fond, texte, primaire, erreur…), pas par teinte brute. Chaque palette associe ici des codes hexadécimaux à des rôles, de sorte qu'un thème reste interchangeable, cohérent et accessible. Choisissez d'abord un rôle, puis lisez son hexadécimal — c'est le fait de coder en dur un hexadécimal là où un rôle est attendu qui brise ultérieurement la thémisation.

Navigation

L'index et le contrat de rôles ci-dessous répondent seuls à la question « quelle palette ». Chargez un fichier de référence lorsque la tâche nécessite son contenu — pas tous les quatre.

Charger	Quand
references/carbon.md	Construire une page ou un artefact qui doit utiliser Carbon — lisez uniquement ce fichier ; il contient les rôles, le kit de tableau de bord et les triades de Carbon dans les deux modes
references/palettes.md	Vous avez besoin de valeurs hexadécimales pour toute autre palette — les quatre domaines, clair + sombre ; les triades remplissage/subtil/accent ; les échelles en 12 étapes derrière Dusk, Driftwood et Meadow
references/contrast.md	Vérifier les seuils WCAG/APCA, la compatibilité daltonienne, ou déboguer une paire qui échoue
references/build-your-own.md	Aucune palette de la bibliothèque ne correspond et vous générez une nouvelle échelle (la recette OKLCH)
references/theory.md	Choisir un schéma d'harmonie, ou justifier une décision d'espace colorimétrique / d'échelle

Bibliothèque de palettes (index rapide)

Lorsqu'une palette est la meilleure option initiale, elle est marquée ⭐ ; le marketing et le TUI n'ont pas de valeur par défaut car le choix suit la marque ou le thème de terminal de l'utilisateur.

UI d'application web — clair + sombre, 13 rôles sémantiques + une triade par couleur

• Carbon ⭐ (par défaut) — ardoise-bleu profond, sombre d'abord. Tableaux de bord d'analyse, rapports de performance & outils de développement. Livre un kit de tableau de bord complet (pastilles de notes A–F, séquence d'étapes ordonnée, ton de code en ligne, surbrillance de succès). Utilisez Graphite à la place lorsque le mode clair doit être égalisé manuellement.
• Graphite — ardoise froide + bleu. Tableaux de bord B2B denses, outils de développement ; le défaut de parité clair+ sombre.
• Evergreen — marque émeraude sur zinc vrai-neutre. Identité fraîche, confiante, non-bleue.
• Terracotta — neutres argile/espresso chauds + rouille. Sites éditoriaux, plateformes de contenu, outils d'écriture.
• Bloom — pastel pervenche/violet, mode sombre profond. Outils de développement conviviaux, applications ludiques mais épurées.
• Teal Slate — sarcelle profonde sur ardoise froide, un seul accent chaud. Rapports techniques, tableaux de bord SRE / limites de débit ; s'associe avec une police mono pour les figures.

Générées à partir d'échelles OKLCH en 12 étapes, qui sont fournies avec leurs rôles afin de pouvoir être étendues ou redérivées :

• Dusk — primaire indigo, accent turquoise, gris froids quasi-neutres. Outils de concentration, éditeurs, applications de longue session.
• Driftwood — primaire marine profond sur neutres sable chauds, accent argile. Celle qui fait basculer ses neutres vers le froid en mode sombre.
• Meadow — primaire sauge atténuée, accent vieil-or, neutres os chauds. La plus douce de l'ensemble ; reposante plutôt que confiante.

Marketing / Landing page — clair + sombre, dégradés de héros

• Sunbloom — chaleur corail/ambre raffinée. Marques grand public/créatrices accessibles.
• Tidewater — sarcelle/sauge. Fintech, bien-être, confiance B2B.
• Obsidian & Gold — presque-noir + or métallisé. Premium, luxe, agence.
• Paper & Ink — papier chaud + encre noire + un accent terre cuite. Blogs, longs formats, portfolios.

Visualisation de données — adaptée aux daltoniens, chaude/froide terreuse

• Catégorielle : Lunar Valley ⭐ (par défaut) · Hearthstead · Vintage Warm · Glass Wall · Okabe-Ito (à utiliser quand la sécurité CVD est une exigence stricte)
• Séquentielle : Viridis ⭐ (par défaut) · Magma · Inferno · Plasma · ColorBrewer Blues · YlOrRd (toutes perceptuellement uniformes)
• Divergente : Console & Window ⭐ (par défaut) · Alien Sun · Orchard Dusk · Coffee & Coolant — toutes chaud↔froid, pas de rouge↔vert

Terminal / TUI — 16-ANSI + bg/fg/curseur/sélection

• Solarized Dark · Nord · Catppuccin Mocha · Catppuccin Latte (le seul schéma clair) · Dracula · Tokyo Night

→ Tableaux hexadécimaux complets : Carbon dans references/carbon.md, toutes les autres palettes dans references/palettes.md

Rôles sémantiques (le contrat)

Les palettes UI remplissent ces rôles. Associez l'intention à un rôle, puis le rôle à un hexadécimal.

Rôle	Ce que c'est
background	Toile de base de l'application/page
surface	Cartes, panneaux, feuilles
surface-elevated	Surfaces surélevées (popovers, modales) ; en mode sombre plus clair = plus surélevé
border	Séparateurs, bordures de champs, anneaux de focus
text-primary	Premier plan à haute emphase
text-secondary	Étiquettes atténuées, indices, légendes
primary / primary-hover	Couleur d'action de la marque + son état de survol
accent	Emphase secondaire, distincte du primaire
success / warning / error / info	États sémantiques (vert / ambre / rouge / bleu par convention occidentale)

Chaque rôle coloré nécessite ensuite une triade, car un seul hexadécimal ne peut pas faire trois tâches. Une valeur conçue pour être posée dessus n'est pas automatiquement lisible en tant que texte, et un remplissage solide est beaucoup trop fort comme fond de badge à la densité d'un tableau.

Jeton	Rôle	Bootstrap 5.3 l'appelle	Material 3 l'appelle
{c}-fill + {c}-on-fill	Boutons, chips actifs	--bs-{c} + color-contrast()	primary + on-primary
{c}-subtle + {c}-emphasis	Fond de badge / encart + son étiquette	--bs-{c}-bg-subtle + -text-emphasis	primary-container + on-primary-container
{c}-subtle-border	Bordure autour de ce fond	--bs-{c}-border-subtle	—
link	La teinte de la marque en texte sur surface	(divisé dans v6)	—

Les triades prêtes à l'emploi pour les neuf palettes UI se trouvent dans palettes.md, sauf celles de Carbon qui sont dans carbon.md. Les remplissages en mode sombre sont des teintes claires, donc leurs étiquettes sont le neutre le plus foncé de la palette, pas le blanc.

Les palettes de visualisation de données fournissent quant à elles des listes de couleurs ordonnées (catégorielle = séries distinctes ; séquentielle = rampe bas→haut ; divergente = chaud↔froid avec un point médian neutre). Les schémas TUI fournissent les 16 emplacements ANSI plus 4 rôles spéciaux.

Concepts fondamentaux

• Concevoir en OKLCH, pas en HSL. OKLCH est perceptuellement uniforme ; la « luminosité » HSL ment (le bleu à luminosité égale paraît beaucoup plus foncé que le jaune à luminosité égale), donc même des étapes HSL produisent des échelles inégales.
• Harmonie : choisissez un schéma (monochromatique / analogue / complémentaire / triadique…) et laissez une couleur dominer en saturation et en surface ; désaturez le reste.
• Échelles : 10–12 étapes, espacez uniformément la luminosité, le chroma maximal dans la gamme moyenne et atténuez-le aux extrêmes afin que les teintes ne soient pas délavées et les ombres pas boueuses.
• Contraste : WCAG AA — texte du corps ≥ 4,5:1, grand texte & UI/bords ≥ 3:1.
• Clair vs sombre n'est pas une inversion, et les ratios WCAG 2 surestiment le contraste près du noir. Les deux modes de défaillance et leurs correctifs sont dans les Pièges ci-dessous ; les seuils et la procédure APCA sont dans references/contrast.md.
• Sécurité daltonienne : encodez le sens avec du texte, une icône ou une position en plus de la teinte, car ~8 % des hommes ne peuvent pas distinguer les teintes seules. Pour les données divergentes, utilisez chaud↔froid (bleu/orange, sarcelle/rose) plutôt que rouge↔vert.

Exemples

Exemple : choisir des couleurs pour un tableau de bord SaaS

✅ Correct

Utilisateur : « J'ai besoin de couleurs pour un tableau de bord d'administration, clair et sombre. »
→ Recommander Carbon (ardoise-bleu profond, sombre d'abord, conçu pour les UI de données denses) — le défaut ;
  proposer Graphite si la parité en mode clair réglée manuellement est plus importante que le kit de tableau de bord.
→ Copier son tableau rôle→hex de carbon.md (les deux modes).
→ Appliquer par rôle : background→surface→border→text, primary pour l'appel à l'action principal,
  success/warning/error pour les badges d'état. Confirmer que text-primary sur background ≥ 4,5:1.

❌ Anti-patron

→ Choisir quatre teintes d'une palette Coolors et les attribuer ad hoc : #2b2d42 nav, #8d99ae texte,
  #edf2f4 fond, #ef233c boutons. Mode sombre = inverser les hexadécimaux.

Pourquoi ça fonctionne : une palette mappée par rôle se dépose directement dans des variables CSS et est accessible par construction. La version ad hoc n'a pas de rampe neutre, ni de niveaux d'élévation, ni de couleurs d'état, et inverser une palette claire produit des surfaces noir pur et des teintes de marque délavées (voir Pièges : clair vs sombre n'est pas une inversion).

Exemple : couleur de badge d'état

✅ Correct

.badge-error { background: var(--error); color: #fff; }   /* rôle, pas un rouge codé en dur */

❌ Anti-patron

.badge-error { background: #ff0000; color: #000; }   /* teinte brute ; #f00 sur #000 ≈ 5,2:1 mais éblouit,
                                                         et ne s'adaptera pas au thème ni au mode sombre */

Pourquoi ça échoue : coder en dur une teinte brise la thémisation et le mode sombre, et le rouge pur/noir pur provoque une halation.

Exemple : choisir une palette de graphiques

✅ Correct

Séries catégorielles (≤8) → Lunar Valley (défaut), ou Okabe-Ito lorsque la sécurité CVD est requise.
Continu bas→haut → Viridis (perceptuellement uniforme, adapté aux daltoniens).
Données signées avec un point médian → Console & Window (chaud↔froid, centre neutre).
Au-delà d'environ 8 couleurs catégorielles, les séries cessent d'être distinguables — regroupez-les en « Autres ».

❌ Anti-patron

Douze séries catégorielles colorées à partir des rôles success/warning/error/info de la palette UI plus
des teintes de marque ; profit/perte encodé vert↔rouge sans étiquettes.

Pourquoi ça fonctionne : correspond à la structure des données avec la bonne famille de palette et respecte la limite de distinguabilité. L'anti-patron réutilise les rôles d'état UI qui entrent en conflit avec l'identité des séries, dépasse la limite d'environ 8 teintes, et encode rouge↔vert sans texte ni icône de secours pour les spectateurs daltoniens.

Pièges

• Symptôme : La couleur de la marque est illisible en tant que texte du corps. Cause : Les tons moyens saturés (ambre, corail, sarcelle) échouent souvent au 4,5:1 sur leur propre fond — une couleur de remplissage et une couleur de texte sont des étapes différentes de la même rampe. Correctif : gardez fill et link comme valeurs séparées ; foncez le texte d'une étape jusqu'à ce qu'il passe. Dans cette bibliothèque, seul Evergreen clair diverge (#059669 porte une étiquette de bouton à 4,70:1 mais atteint 3,77:1 en tant que lien sur blanc, donc son link est #00875b), c'est exactement pourquoi la séparation est manquée.
• Symptôme : Les badges d'état semblent corrects mais crient à la densité du tableau. Cause : un fond --error solide derrière du texte blanc est correct pour un bouton et beaucoup trop fort pour un badge au niveau d'une ligne. Correctif : utilisez le fond {c}-subtle avec son étiquette {c}-emphasis appariée. Réutiliser la teinte d'état comme sa propre étiquette sur cette teinte manque le 4,5:1 plus souvent qu'autrement — prenez la valeur appariée de palettes.md (celle de Carbon de carbon.md) plutôt que de supposer.
• Symptôme : Une palette générée à partir d'une échelle en 12 étapes échoue encore au contraste. Cause : la carte d'étapes n'est pas une garantie de contraste. Radix garantit les étapes 11 et 12 contre l'étape 2 et rien d'autre ; l'étape 9 porte rarement une étiquette de bouton à 4,5:1, et l'étape 8 atteint rarement 3:1 comme bord de contrôle. Correctif : résolvez ces deux cas par rapport à leur sol réel. En mode clair, engagez-vous pour une étiquette blanche et foncez le remplissage — résoudre vers l'étiquette qui obtient déjà le score le plus élevé produit un lavis pâle qui réussit et semble faible.
• Symptôme : Une palette qui semble correcte en mode clair semble boueuse en mode sombre. Cause : la teinte neutre a été choisie une fois et héritée. Une teinte chaude qui se lit comme du papier à luminosité élevée se lit comme du marron à faible luminosité. Correctif : redécidez de la teinte neutre et du chroma par mode ; basculer vers le froid à très faible chroma est la réponse habituelle. Driftwood dans palettes.md le fait (teinte 64 clair, 224 sombre) ; la sauge de Meadow n'en avait pas besoin.
• Symptôme : Une palette copiée de Color Hunt, Coolors ou d'un article de tendance ne peut pas construire une interface. Cause : les palettes de galerie sont quatre teintes décoratives sans rampe neutre, sans encre foncée et sans états — 16 des 30 palettes les plus appréciées de Color Hunt ne peuvent pas porter de texte du corps à 4,5:1 avec aucune paire de leurs couleurs. Correctif : prenez les teintes comme matériau de base et construisez des échelles à partir d'elles (build-your-own.md) ; Dusk, Driftwood et Meadow ont été créés de cette façon.
• Symptôme : Le texte secondaire/atténué (« dimmé », text-secondary) semble correct dans l'outil de conception mais échoue au contraste dans l'application. Cause : les bibliothèques de composants fournissent une couleur de texte atténué par défaut (par exemple dimmed de Mantine) réglée pour la hiérarchie visuelle, pas pour le contraste — généralement autour de ~3,4:1, bien en dessous du seuil AA de 4,5:1. Correctif : choisissez et vérifiez votre propre hex text-secondary avec contrast.md au lieu d'hériter du défaut de la bibliothèque, et revérifiez par thème — la même substitution peut réussir dans un thème et échouer dans un autre. Revérifiez également sur les surfaces teintées/élevées (cartes, lignes rayées), pas seulement sur la toile plate.
• Symptôme : Le mode sombre « passe WCAG » mais est difficile à lire. Cause : les mathématiques WCAG 2 surestiment le contraste près du noir. Correctif : revérifiez les paires sombres avec APCA (Lc), pas avec le ratio 4,5:1 seul.
• Symptôme : Le thème sombre semble plat, l'élévation illisible. Cause : fond #000 pur + surfaces de même luminosité. Correctif : relevez la base à environ #0d1117–#1e1e2e et rendez chaque niveau d'élévation plus clair.
• Symptôme : Un graphique est illisible pour les spectateurs daltoniens. Cause : encodage rouge↔vert ou sens basé uniquement sur la teinte. Correctif : passez à une palette divergente chaud↔froid et ajoutez des étiquettes/icônes ; pour les catégorielles, utilisez l'ensemble sécurisé Okabe-Ito (dans palettes.md).
• Symptôme : Le texte du graphique reste à faible contraste même si votre palette définit la bonne couleur de texte. Cause : les bibliothèques de graphiques (Recharts, Mantine charts) restituent le texte des axes/légendes/valeurs en SVG avec leur propre fill en ligne, contournant complètement vos jetons de couleur. Correctif : ciblez directement les éléments texte de la bibliothèque (p. ex. .recharts-wrapper text { fill: var(--text) }) — la cascade CSS ne l'atteint jamais.
• Symptôme : Les couleurs TUI disparaissent sur certains terminaux. Cause : hexadécimal codé en dur, ou texte essentiel placé dans le noir brillant (emplacement 8). Correctif : liez le sens aux emplacements ANSI 1 à 6 afin que le thème propre de l'utilisateur le restitue, et réservez l'emplacement 8 uniquement pour la désemphase.
• Symptôme : Les étapes de la palette semblent inégales/irrégulières. Cause : espacer la luminosité en HSL/RGB. Correctif : reconstruisez l'échelle avec la recette OKLCH dans build-your-own.md.

Ressources associées

Compétence	Charge utile partagée
Dataviz	Les choix de type de graphique, d'axe et d'encodage qui ne concernent pas la couleur — lisez-la si le besoin est plus large qu'une palette.
Typographie	Taille, graisse et appariement de la police — y compris le texte trop petit ou trop fin pour être lu.
Conception frontend	Structure de mise en page et de composant — utilisez-la lorsqu'il n'est pas clair si le problème est la couleur ou la disposition.