Générateur de Nuances de Couleurs

Générateur de Nuances - Construire Échelles Tonales pour Votre Marque

Les systèmes de design modernes reposent sur des échelles tonales cohérentes — les structures 50-100-200...900-950 que Tailwind, Material 3, Radix et Stripe Atlas utilisent pour exprimer la même couleur à différents niveaux de luminosité. Ce générateur prend une couleur de base HEX et construit une rampe de nuances (plus foncées, mélangées vers le noir) et de teintes (plus claires, mélangées vers le blanc) en sRGB, puis mappée sur une échelle de noms 50-950. Chaque échantillon affiche son ratio de contraste WCAG 2.1 en direct contre blanc pur et noir pur avec des badges AA/AAA réussite ou échec, afin que vous choisissiez des combinaisons texte-sur-couleur sûres avant de publier vos tokens. La sortie est prête pour boutons, états survol, palettes de graphiques, paires mode sombre et épreuves d'impression — exportez sous forme de custom properties CSS, jetons JSON de design ou fragment tailwind.config.js. (Le rampage perceptuellement uniforme OKLCH et l'entrée HSL/OKLCH sont prévus dans la feuille de route.)

Que sont les nuances et teintes ?

Les teintes mélangent couleur avec blanc pour créer résultats plus clairs, tandis que nuances se mélangent avec noir pour valeurs plus foncées. Échelles équilibrées fournissent flexibilité pour états survol, ombres, arrière-plans cartes et accents graphiques sans deviner pourcentages.

Comment utiliser ce générateur ?

1) Entrer ou choisir couleur HEX de base. 2) Définir nuanciers totaux ou ajuster combien de teintes et nuances vous avez besoin. 3) Cliquer Générer pour mettre à jour aperçu. 4) Copier n'importe quel nuancier, ou exporter variables CSS, JSON ou config Tailwind pour intégrer dans votre projet.

Pourquoi exporter en formats multiples ?

Différentes équipes préfèrent différents pipelines. Variables CSS s'intègrent directement dans feuilles de style, JSON fonctionne pour tokens ou plugins Figma, et config Tailwind s'intègre avec projets modernes utility-first.

Combien d'étapes ma rampe de couleur doit-elle avoir ?

La plupart des systèmes de design se calent sur 9-11 étapes car cela atteint un point optimal : suffisamment de variation pour primaire, survol, focus, actif et états désactivés plus fonds clairs/sombres et bordures, sans gonfler votre fichier de tokens. Tailwind fournit 11 étapes (50, 100, 200, ..., 900, 950) ; Material 3 fournit 13 tons (0-100 par incréments de 5 ou 10) ; IBM Carbon fournit 11 ; Radix fournit 12. Moins de 6 étapes vous laisse généralement improviser des couleurs pendant l'implémentation ; plus de 13 gaspille des tokens que personne n'utilisera. Choisissez 11 sauf raison spécifique d'aller plus dense.

Pourquoi ma nuance du milieu ne ressemble pas à la couleur de base ?

Dans les échelles de type Tailwind, l'étape 500 est le point médian perceptuel de la rampe, pas votre couleur de marque littérale. Si votre entrée est un rouge de marque vif et saturé, l'algorithme le centre dans une plage de luminosité 0-100 — ce qui signifie souvent que la couleur de marque tombe à 600 ou 700, pas à 500, car les marques choisissent typiquement des couleurs qui se situent plus sombres que le gris moyen perceptuel pour contraster avec le blanc. Pour ancrer votre marque littérale exactement à l'étape 500, augmentez la luminosité de votre couleur d'entrée ou utilisez un outil permettant d'épingler une étape personnalisée.

Qu'est-ce qu'OKLCH et pourquoi la couleur perceptuelle compte-t-elle ?

OKLCH (Oklab en forme cylindrique Luminosité/Chroma/Teinte, introduit par Bjorn Ottosson en 2020 et livré dans CSS Color Module Level 4) est un espace colorimétrique perceptuellement uniforme : des changements numériques égaux paraissent égaux à l'œil humain. HSL — l'ancien modèle de commodité — n'est pas uniforme ; un pas de luminosité HSL de 10 unités paraît minuscule dans les jaunes mais énorme dans les bleus, raison pour laquelle les rampes générées en HSL semblent inégales. Cet outil mélange actuellement les nuances vers le noir et les teintes vers le blanc en sRGB, ce qui est rapide et prévisible mais pas strictement uniforme sur le plan perceptuel ; le rampage OKLCH est une amélioration planifiée. Si vous avez besoin d'une rampe parfaitement uniforme aujourd'hui, collez les valeurs HEX exportées dans un éditeur OKLCH. Le support navigateur pour OKLCH est désormais solide (Chrome 111+, Safari 16.4+, Firefox 113+).

Comment garantir l'accessibilité (contraste WCAG AA) ?

WCAG 2.1 exige que le texte du corps ait un ratio de contraste de 4,5:1 contre son fond (AA), ou 3:1 pour texte 18pt+ ou gras 14pt+ (AA Large), ou 7:1 pour AAA. Chaque échantillon de cet outil affiche deux badges en direct — son ratio de contraste contre blanc pur (W) et noir pur (B), chacun étiqueté AAA, AA, AA Large ou Fail — calculé avec la formule exacte de luminance relative WCAG (linéarisation sRGB, puis (L1+0.05)/(L2+0.05)). Généralement les étapes 50-300 servent de fonds pour texte sombre, les étapes 700-950 de fonds pour texte clair, et les étapes 400-600 échouent dans les deux directions sur le texte de corps (ne les utilisez que pour le texte d'affichage grand ou les éléments d'UI non textuels comme bordures et séparateurs). Les bleus vifs sont particulièrement délicats — même l'étape 500 d'un bleu lumineux échoue souvent AA sur blanc, et le badge l'indiquera.

Fonctionnalités Clés

• Générer jusqu'à 16 teintes et nuances totales depuis HEX unique
• Grille nuanciers interactive avec comportement copie au clic
• Contrôles indépendants pour teintes claires et nuances foncées
• Blocs export CSS, JSON et Tailwind prêts à coller
• Générateur couleur aléatoire pour exploration rapide
• Badges de contraste WCAG en direct (sur blanc et noir, AA/AAA) sur chaque nuancier
• Mise en page responsive avec boutons nuancier accessibles clavier
• Style mode sombre et animation survol fluide
• Tous calculs s'exécutent localement dans votre navigateur