Différence entre nuance, teinte et ton ?

Une nuance (shade) ajoute du noir à la base (plus sombre, même teinte). Une teinte (tint) ajoute du blanc (plus claire, même teinte). Un ton (tone) ajoute du gris (moins saturé, même teinte et luminosité). Ce générateur sort des nuances et teintes parce que c'est ce qu'utilisent les design systems - une rampe de tons n'est presque jamais ce qu'on cherche.

Pourquoi l'échelle 50/100…950 ?

Elle correspond à Tailwind CSS et à la plupart des design tokens, où 500 est à peu près la base, 50 est presque blanc et 950 presque noir. Garder la même numérotation permet à quiconque lit vos design tokens de comprendre immédiatement le poids relatif. Material utilise 50/100/200…900 ; Tailwind étend avec 950 pour un noir plus profond.

La rampe garantit-elle des pas perceptivement uniformes ?

Non - ce générateur interpole en HSL, plus rapide et compatible avec CSS, mais pas perceptivement uniforme. Les pas centraux (200-700) paraissent réguliers ; les extrêmes (50, 950) se compriment visuellement. Pour une rampe perceptivement uniforme, utilisez OKLCH ou LCH - les design tokens récents (Tailwind v4, Radix Colors) le font pour cette raison.

Comment exporter la rampe en variables CSS ?

Cliquez sur « Copier en CSS ». La sortie est un bloc de lignes `--brand-50: #...; --brand-100: #...;` à coller dans votre `:root` ou un config Tailwind. Renommez le préfixe dans le champ pour correspondre à votre namespace (`--primary`, `--accent`, etc.) avant de copier.

L'échantillon 500 correspond-il exactement à mon entrée ?

Oui - le 500 est votre couleur d'entrée sans modification. Les étapes plus claires (50-400) sont des mélanges progressifs vers le blanc, les plus sombres (600-950) vers le noir. Si vous choisissez une base très sombre ou très claire, la rampe peut paraître asymétrique - rapprochez alors la base d'une luminosité 50 % et relancez.

Générateur de nuances de couleur

Générez 10 nuances et 10 teintes de toute couleur - prêt en liste hex ou variables CSS.

Couleur de base

Préfixe variable CSS

Rampe de nuances

Saisissez une couleur hex (ex. #3b82f6) pour générer des nuances.

Propriétés CSS personnalisées

Tapez un hex ; obtenez une rampe de 21 étapes. Les teintes (base mélangée au blanc) montent à gauche, les nuances (mélangées au noir) descendent à droite, et la base reste au milieu. La sortie suit l'échelle 50/100/200…900/950 utilisée par Tailwind, Material et la plupart des design systems modernes. Cliquez sur un échantillon pour copier son hex, ou exportez toute la rampe en propriétés CSS.

Comment l'utiliser

Choisissez la base
Utilisez le sélecteur ou collez un hex. La rampe complète se recalcule instantanément.
Inspectez les échantillons
Chaque échantillon affiche son numéro de token (50-950) et son hex. Cliquez pour copier le hex.
Renommez le préfixe
Changez `--brand` pour votre namespace de tokens (`--primary`, `--accent`, etc.) afin que le CSS exporté corresponde à vos conventions.
Copiez en CSS
Cliquez sur « Copier en CSS » pour obtenir le bloc complet de propriétés personnalisées prêt à coller dans votre feuille de style ou config Tailwind.

Qu'est-ce que c'est ?

Un générateur de nuances prend une couleur de base et produit une rampe graduée de variantes plus claires (teintes) et plus sombres (nuances). La sortie est le type de table d'échantillons qu'on trouve dans un design system comme Tailwind ou Material - une échelle numérotée (50, 100, 200, …, 900, 950) où chaque pas ajuste la luminosité en gardant la teinte. Les designers utilisent ces rampes pour bâtir des hiérarchies texte/fond, des états hover, des états désactivés et des palettes de graphiques depuis une seule couleur de marque.

Quand l'utiliser

Construire un design system depuis une seule couleur de marque, générer les variantes hover/active d'une primaire, créer un ensemble cohérent de gris pour textes et fonds, peupler une config Tailwind d'une palette personnalisée, esquisser des couleurs de séries de graphiques qui progressent uniformément, et donner aux développeurs une rampe par défaut avant qu'un designer ne prenne le temps de régler chaque échantillon à la main.

Erreurs courantes

Utiliser un échantillon 50 ou 950 pour du texte sans vérifier le contraste - ils échouent souvent WCAG sur des fonds teintés. Considérer la rampe générée comme finale - c'est un point de départ ; la plage 300-700 demande souvent un réglage manuel. Choisir une base déjà très sombre ou très claire - la rampe se comprimera à un bout, rendant la moitié des étapes indistinguibles.

FAQ

Différence entre nuance, teinte et ton ?: Une nuance (shade) ajoute du noir à la base (plus sombre, même teinte). Une teinte (tint) ajoute du blanc (plus claire, même teinte). Un ton (tone) ajoute du gris (moins saturé, même teinte et luminosité). Ce générateur sort des nuances et teintes parce que c'est ce qu'utilisent les design systems - une rampe de tons n'est presque jamais ce qu'on cherche.
Pourquoi l'échelle 50/100…950 ?: Elle correspond à Tailwind CSS et à la plupart des design tokens, où 500 est à peu près la base, 50 est presque blanc et 950 presque noir. Garder la même numérotation permet à quiconque lit vos design tokens de comprendre immédiatement le poids relatif. Material utilise 50/100/200…900 ; Tailwind étend avec 950 pour un noir plus profond.
La rampe garantit-elle des pas perceptivement uniformes ?: Non - ce générateur interpole en HSL, plus rapide et compatible avec CSS, mais pas perceptivement uniforme. Les pas centraux (200-700) paraissent réguliers ; les extrêmes (50, 950) se compriment visuellement. Pour une rampe perceptivement uniforme, utilisez OKLCH ou LCH - les design tokens récents (Tailwind v4, Radix Colors) le font pour cette raison.
Comment exporter la rampe en variables CSS ?: Cliquez sur « Copier en CSS ». La sortie est un bloc de lignes `--brand-50: #...; --brand-100: #...;` à coller dans votre `:root` ou un config Tailwind. Renommez le préfixe dans le champ pour correspondre à votre namespace (`--primary`, `--accent`, etc.) avant de copier.
L'échantillon 500 correspond-il exactement à mon entrée ?: Oui - le 500 est votre couleur d'entrée sans modification. Les étapes plus claires (50-400) sont des mélanges progressifs vers le blanc, les plus sombres (600-950) vers le noir. Si vous choisissez une base très sombre ou très claire, la rampe peut paraître asymétrique - rapprochez alors la base d'une luminosité 50 % et relancez.