Générateur de Nuances de Couleurs

Générez des rampes de couleur perceptuellement uniformes depuis tout HEX, OKLCH ou HSL. 5-16 nuances, teintes, paires dark mode. Export CSS, JSON, Tailwind.

Vous avez des commentaires ? Signalez des bugs, suggérez des fonctionnalités ou partagez vos idées — nous lisons tout

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, OKLCH ou HSL et construit une rampe espacée uniformément de nuances (plus foncées) et de teintes (plus claires) en utilisant des mathématiques perceptuelles de couleur, afin que chaque étape semble un changement de luminosité égal à l'œil humain. 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.

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.

Générateur de Nuances de Couleurs — Générez des rampes de couleur perceptuellement uniformes depuis tout HEX, OKLCH ou HSL. 5-16 nuances, teintes, paires da — **Générateur de Nuances de Couleurs**

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. Générer nuances et teintes en OKLCH (puis convertir en HEX pour la sortie) vous donne une rampe où le contraste étape par étape paraît cohérent sur toute la roue chromatique. Le support navigateur est désormais solide (Chrome 111+, Safari 16.4+, Firefox 113+), donc OKLCH est le défaut moderne pour les systèmes de couleur sérieux.

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. Cet outil affiche le ratio de contraste de chaque échantillon contre blanc pur et noir pur, afin que vous puissiez choisir des couleurs de texte conformes. Généralement les étapes 50-300 doivent être utilisées pour les fonds avec texte sombre, les étapes 700-950 pour les fonds avec 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.