visualife/color-palette-designer

Concepteur de palettes de couleurs

Les couleurs qui ont fière allure et qui respectent le contraste proviennent d'un seul processus : choisir des teintes pour l'ambiance, puis fixer la luminosité avec des mathématiques. Les roues harmoniques, la règle 60-30-10 et les tableaux de psychologie des couleurs sont des heuristiques de départ sans preuve d'utilisabilité. Le contraste, la retenue (une seule teinte d'action) et un accent qui se démarque de son environnement sont les éléments qui tiennent la route. Construisez pour ceux-ci.

Tous les chiffres proviennent de scripts/palette.mjs (Node sans dépendances). Exécutez-le plutôt que d'estimer les ratios ou les valeurs OKLCH à la main ; le contraste calculé à la main est souvent faux, assez souvent pour être important (la recherche à l'origine de ce skill avait plusieurs valeurs erronées de 0.05 à 0.15).

S=<dossier-skill>/scripts/palette.mjs
node $S contrast '#767676' '#ffffff'        # 4.54:1, notes, APCA Lc
node $S oklch '#3F6B4E'                     # OKLCH exact
node $S solve '#C0643F' '#FFFFFF' 4.5 darker   # Ajuste L seulement jusqu'à ce que ça passe
node $S ramp 155 0.12                       # Rampe OKLCH 50-950
node $S generate --hue 155 --chroma 0.07 --neutral-hue 95 --accent-offset -110 --format report
node $S generate ... --format css           # aussi : css-light-dark | json | dtcg
node $S audit sage-wellness                 # un id de palette organisée, ou n'importe quel fichier roles .json
node $S presets                             # Presets de répartition de zone et de mix d'états
node $S ratio 70 25 5 --preset calm         # Valide une répartition de zone (pourcentage de surface visible)
node $S states sage-wellness --css          # Mix hover/active/disabled/tint résolus + vérifications
node $S dark midnight-terminal              # Règles de mode sombre D1-D11 (ajouter --light <id|fichier>, --oled)
node $S cvd '#0072B2' '#D55E00' '#009E73'   # Séparation daltonisme

audit, generate, dark, states et ratio se terminent avec un code non nul en cas d'échec d'une paire ou d'une règle FAIL, utilisez-les donc comme barrière avant de montrer quoi que ce soit à l'utilisateur. Pour un mode sombre, generate et audit exécutent automatiquement les règles sombres.

Workflow : du brief à la palette validée

1. Analyser le brief. Couleur(s) de marque, mots d'ambiance, secteur, public (âge, vision), modes (clair, sombre ou les deux), conformité (AA par défaut ; AAA pour le corps du texte dans la santé, le gouvernement, les publics âgés). Si l'utilisateur n'a donné qu'une ambiance, choisissez une teinte dans le tableau de décision ci-dessous et énoncez l'hypothèse en une ligne au lieu de demander.
2. Choisir une stratégie. La valeur par défaut est un neutre teinté + une primaire (+ éventuellement un accent). Le monochrome plus les couleurs sémantiques est le plus sûr. N'utilisez un complément que pour faire ressortir le CTA (effet d'isolement). Les schémas triadiques et tétradiques appartiennent aux graphiques et aux illustrations, rarement à l'interface chrome.
3. Teinte et chroma d'ancrage. Avec un hex de marque, exécutez oklch et conservez sa teinte. Limitez le chroma autour de 0.12 pour le terreux/bien-être, 0.20-0.26 pour le dynamique/technologique. Sans teinte donnée, choisissez une teinte distincte des concurrents évidents dans la catégorie.
4. Générer. generate construit des rôles neutre, primaire, accent et sémantique pour chaque mode et résout la luminosité pour atteindre les cibles de contraste. Pour une palette construite à la main, construisez des rampes avec ramp et mappez les étapes aux rôles (tableau ci-dessous).
5. Valider chaque paire avec audit. En cas d'échec, déplacez uniquement la luminosité (solve), jamais la teinte ; réduisez le chroma si la couleur sort du sRGB. Chaque échec dans les 15 palettes organisées était un accent à luminosité moyenne et chroma élevé (OKLCH L environ 0.60-0.77) : trop clair pour du texte blanc, trop foncé pour du texte foncé, trop proche du blanc pour 3:1. Correction : assombrir à L <= 0.55 et utiliser du texte blanc, éclaircir à L >= 0.72 et utiliser du texte foncé, ou le garder décoratif avec une bordure.
6. Vérification daltonisme avec cvd. Si primaire, succès et erreur se confondent (dE_OK < 0.10 sous n'importe quelle simulation), séparez-les par luminosité et exigez une icône et une étiquette, car la teinte seule ne peut pas porter le sens (WCAG 1.4.1).
7. APCA est consultatif. WCAG 3 n'a pas adopté d'algorithme de contraste (le brouillon de travail de septembre 2026 dit qu'il est encore à déterminer), donc WCAG 2.2 décide du succès/échec. Signalez l'APCA Lc comme un avertissement : texte du corps en dessous de |Lc| 75 est fin (courant en mode sombre) ; en dessous de 15 est invisible.
8. Définir les états avec states, pas à la main. Les pourcentages de survol et d'actif dépendent de la palette : les pourcentages plats du preset ont laissé au moins une étape d'état sous dL 0.03 (à peine visible) sur 37 des 45 combinaisons palette/preset que nous avons mesurées, et l'étape de survol seule sur 26. node $S states <palette> --preset standard --css résout le pourcentage de mix et la direction (vers celui du texte/fond qui maintient le on-primaire lisible), vérifie le contraste de chaque état et émet des variables color-mix(in oklab, ...) ; generate --format css --states standard les ajoute à chaque mode. Désactivé : mixé vers le fond plus un indice non-couleur. Focus : anneau de 2px, décalage de 2px, >= 3:1 par rapport au fond. Sélectionné et visité nécessitent un indice non-couleur.
9. Choisir les proportions (voir "Règles de pourcentage" ci-dessous) et indiquez le preset dans les notes de livraison.
10. Émettre le tableau des rôles (hex + OKLCH exact), le tableau succès/échec, les propriétés CSS personnalisées, et éventuellement Tailwind v4 @theme ou du JSON DTCG. Étiquetez la justification comme convention ou preuve (voir references/evidence-and-conventions.md) pour que le texte généré ne répète jamais le folklore de la psychologie des couleurs.
11. Montrer. Proposez ou construisez la page de démonstration (ci-dessous) pour que l'utilisateur évalue la palette sur une mise en page réelle, pas sur une grille d'échantillons.

Contrat de rôles

Chaque palette définit ces rôles pour chaque mode pris en charge. Les composants consomment des rôles, jamais du hex brut.

Rôle	Objectif	Minimum
bg, surface, surface-2	canevas, cartes, panneaux surélevés	distinguable (OKLCH dL >= ~0.03)
border	séparateurs décoratifs	aucun
border-strong	contours d'entrée, contrôles	3:1 sur bg (SC 1.4.11)
text	corps	4.5:1 sur bg et surfaces (viser 7+)
text-muted	texte secondaire	4.5:1 sur bg et surfaces
primary / on-primary	remplissage d'action principale / texte dessus	remplissage 3:1 sur bg, texte de lien 4.5:1 ; texte sur remplissage 4.5:1
accent / on-accent	deuxième teinte optionnelle	identique à primary si elle porte du sens
success warning error info	texte et icônes d'état	4.5:1 sur bg ; jamais uniquement couleur
focus-ring	focus clavier	3:1 vs couleurs adjacentes

Correspondance rampe à rôle (échelle 50-950) : bg clair 50 ou blanc, surface blanc/50, surface-2 100, border 200, border-strong 500, text 900-950, text-muted 600, primary 600-700, on-primary blanc, focus primary-600. Sombre : bg 950 (ou 900), surface 900, surface-2 800, border 800, border-strong 600, text 50-100, text-muted 400, primary 300-400, on-primary 950, focus primary-300. Traitez la correspondance comme une première estimation et laissez audit décider.

Règles strictes (WCAG 2.2 AA sauf si AAA est demandé)

• Texte 4.5:1 ; grand texte (>= 24px, ou >= 18.66px en gras) 3:1 ; composants d'interface et graphiques significatifs 3:1 (SC 1.4.11) ; AAA est 7:1 pour le texte, 4.5:1 pour le grand texte.
• Les bordures décoratives peuvent être légères, mais un contour d'entrée qui est le seul indice pour le champ doit atteindre 3:1. Une bordure d'entrée "élégante" à 1.3:1 est un échec.
• La couleur ne porte jamais le sens seule. Soulignez les liens du corps ou donnez-leur un rapport de 3:1 par rapport au texte environnant plus un indice de survol/focus ; les erreurs reçoivent une icône et un message ; les séries de graphiques reçoivent des étiquettes directes ou des formes.
• Les arrière-plans teintés changent les calculs. Les couleurs sémantiques réglées pour le blanc tombent à environ 4.4:1 sur un fond papier chaud ; exécutez audit sur le vrai bg, pas sur le blanc.
• Le contraste sur les dégradés et les photos doit tenir au pire point (la région la plus claire et la plus foncée), ou ajoutez un voile.

Détails, formules, ensembles daltonisme (Okabe-Ito) et seuils APCA : references/accessibility.md.

Travailler en OKLCH

• Utilisez oklch(L C H) comme source de vérité. L est la luminosité perçue (0-1), donc des couleurs de même L semblent vraiment aussi claires ; en HSL, un jaune à 50 % et un bleu à 50 % sont radicalement différents. Faire tourner la teinte en OKLCH conserve la luminosité, c'est pourquoi les décalages harmoniques fonctionnent là-bas et pas en HSL.
• Teintez les neutres avec la teinte de la marque à très faible chroma : environ 0.005-0.015 près du blanc, 0.01-0.045 dans les sombres. Les neutres chauds (teinte 60-100) conviennent au bien-être, à l'alimentation, à l'éditorial ; les froids (240-270) conviennent au SaaS, à la finance, aux outils de développement. Évitez les gris purs isolés à côté de gris teintés.
• Cibles de rampe : L 0.985, 0.967, 0.928, 0.872, 0.707, 0.554, 0.446, 0.372, 0.279, 0.208, 0.129 pour les étapes 50-950, le chroma diminuant aux deux extrémités. Mappez le gamut en réduisant le chroma, pas en rognant ; les navigateurs rognent grossièrement.
• Dégradés : interpolez in oklab ou in oklch pour éviter les points médians gris boueux ; évitez les dégradés sombres à plein écran de chroma quasi nul (banding) ou ajoutez un bruit subtil.
• Support (fin 2026) : oklch() est Baseline depuis 2023 ; color-mix() est Largement Disponible depuis novembre 2025 ; la syntaxe de couleur relative est dans Chrome 122+, Firefox 128+, Safari 18+ ; light-dark() atteint Largement Disponible le 13 novembre 2026. Livrez des propriétés personnalisées simples avec un prefers-color-scheme plus une surcharge [data-theme] comme sortie par défaut ; proposez light-dark() comme alternative compacte. Dans la syntaxe de couleur relative, l va de 0 à 1.

Tableau de décision : brief à stratégie

Signal du brief	Neutre	Primaire	Accent	Mode	Cible
Bien-être, bio, spa, thé	chaud, H 70-100, C 0.008-0.02	sauge/mousse/bleu sarcelle, C 0.05-0.10, L ~0.50	analogue ou complément terreux (terre cuite, argile)	clair	AA, corps 7:1 de préférence
E-commerce	neutre/chaud, C <= 0.01	marque	teinte CTA isolée utilisée nulle part ailleurs	clair	AA
SaaS / B2B	froid, H 250-270, C 0.01-0.04	bleu/indigo/violet	monochrome + sémantique	clair + sombre	AA
Outil de développement	froid ou gris pur	bleu/violet/vert, sombre L 0.70-0.80	mono ; couleurs de syntaxe uniquement dans le code	sombre d'abord + clair	AA, vérifier APCA
Agence / portfolio	blanc cassé ou quasi noir	noir/blanc	un accent électrique, avec bordures s'il échoue 3:1	l'un ou l'autre	AA
Finance	bleu marine froid	marine/bleu	gain/perte avec +/- et flèches	clair (+ sombre)	AA, AAA pour les chiffres
Santé	neutre froid	bleu sarcelle/bleu	vert calme	clair	AAA corps
Enfants / créateur	crème chaud	violet/bleu saturé	triadique, chacun <= 10 % de surface	clair	AA

Points de départ : references/palettes.md (15 palettes vérifiées avec CSS, OKLCH et tableaux succès/échec). Choisissez la plus proche, adaptez la teinte et le chroma, relancez audit.

Règles de pourcentage et presets

Les répartitions de zone sont un budget de surface, pas une loi : 60-30-10 est une convention de design d'intérieur sans aucune étude d'utilisabilité derrière les chiffres exacts, mais une petite part d'accent protège le seul effet étayé par la recherche ici (un CTA ne se démarque que si sa teinte est rare). Les parts sont en pourcentage de la surface de fond visible (l'encre du texte n'est pas comptée). Vérifiez une répartition avec ratio ; mesurez une page réelle avec scripts/measure-area.js au lieu de deviner.

Preset	Répartition n-s-a	Utilisation pour
classic	60-30-10	marketing e-commerce et SaaS, défaut général
calm	70-25-5	bien-être, santé, finance, éditorial
dense-app	80-17-3	tableaux de bord, administration, outils de développement (clair ou sombre)
product-first	80-15-5	catalogues où les photos portent la couleur ; une teinte CTA isolée
editorial	70-27-3	brutaliste/éditorial : les bordures et l'encre font le travail
dark-showcase	70-22-8	portfolio/agence sombre avec un accent vif
bold-brand	50-30-20	créateur, campagne, enfants : l'accent peut mener

Règles : les parts totalisent 100 (FAIL) ; le neutre est la plus grande part, >= 45 ; l'accent reste dans la plage du preset (les dégradés saturés et les superpositions de marque comptent comme accent) ; la primaire détient >= 70 % de la surface d'accent pour qu'une teinte d'action mène ; les couleurs sémantiques <= 2 % au repos ; les thèmes sombres gardent le neutre >= 70. Les presets d'état (subtle 8/14/50, standard 12/20/60, strong 16/26/70 comme pourcentages minimaux pour survol/actif/désactivé, teintes 8/10/14) sont augmentés par palette par states jusqu'à ce que l'étape soit visible. Plages, règles A1-A7 et S1-S6, logique de direction et extrait de mesure : references/proportions-and-states.md.

Mode sombre

Un thème sombre est une deuxième palette, jamais une inversion. Le moteur applique les règles mesurables (node $S dark ..., également exécuté par generate et audit) ; les autres sont des règles d'implémentation à appliquer à la main. Tableau complet avec seuils et correctifs : references/dark-mode-rules.md.

Mesuré (FAIL bloque ; WARN nécessite une raison énoncée) :

• D1 le bg n'est pas noir pur : OKLCH L 0.13-0.24 (vrai #000 uniquement pour une variante OLED déclarée).
• D2 le texte n'est pas blanc pur : L 0.88-0.95. D3 texte/bg <= 17:1.
• D4 élévation par luminosité : bg < surface < surface-2, environ +0.04 L par étape ; les ombres n'élèvent pas sur sombre.
• D5 neutres teintés, bg chroma <= 0.045.
• D6 le primaire est soit un remplissage clair (L >= 0.70) avec on-primary foncé, soit un remplissage profond (L <= 0.58) avec on-primary blanc ; la bande 0.58-0.68 est une zone morte. Le remplissage nécessite 3:1 sur bg et surface.
• D7 par rapport au thème clair : même teinte (à 10 degrés près), plus claire, chroma pas plus élevé (réduire de 10-30 %).
• D8 les couleurs d'état sont réglées pour le sombre : 4.5:1 sur bg et sur la surface surélevée, avec icône et texte.
• D9 border-strong 3:1 ; les bordures décoratives restent visibles (dL >= 0.05). D11 focus ring 3:1.
• D10 APCA consultatif : texte |Lc| >= 75, muted >= 45 (viser 60) ; la polarité sombre expose le texte fin que WCAG 2 accepte.

À la main : n'utilisez jamais filter: invert (N1) ; éclaircissez au survol au lieu d'assombrir (N3) ; pas de texte alpha (N4) ; atténuez les photos lumineuses et livrez des variantes de logo clair/mono (N5) ; évitez les petits caractères fins (N6) ; définissez color-scheme et theme-color par schéma (N8) ; suivez l'OS avec un bouton à trois états et pas de flash (N9) ; revérifiez les couleurs des graphiques sur la surface sombre (N10). Le mode clair est mieux lu par la plupart des utilisateurs ayant une vision normale et le mode sombre aide certains utilisateurs malvoyants, donc proposez les deux. Références de palettes sombres et architecture de tokens : references/dark-mode-and-tokens.md.

Anti-patrons à repérer

Trois teintes saturées ou plus dans le chrome ; la teinte CTA réutilisée pour les titres, les icônes et les badges ; des compléments saturés à L égal (les bords vibrent) ; du texte gris sur des fonds colorés (utilisez la teinte du fond à L ajusté) ; du texte "minimal" gris clair sur blanc cassé sous 4.5:1 ; un accent de L moyenne avec du texte blanc ; outline: none sans remplacement ; des états de survol et d'actif qui diffèrent par un infime décalage de teinte (changez L de 0.05-0.10) ; désactivé qui ressemble activé ; la même couleur de marque saturée réutilisée inchangée en mode sombre ;