Générateur de teintes, tons et nuances

Teintes, tons et nuances — quelle différence ?

Les trois sont des dérivés d'une teinte de base, mais ils la tirent dans des directions différentes. Une teinte est la couleur de base mélangée à du blanc, ce qui donne une version plus claire et plus douce — pensez pastel. Une nuance est la base mélangée à du noir, donc plus sombre et plus dramatique. Un ton est la base mélangée à du gris, ce qui réduit à la fois la saturation et l'intensité sans choisir entre plus clair ou plus sombre — utile pour des palettes feutrées et raffinées. Ensemble, ils forment un vocabulaire complet pour bâtir des échelles monochromes.

Comment utiliser ce générateur

Choisissez une couleur de base ou collez un code hex. La page génère dix teintes régulièrement espacées (rangées de plus en plus claires), dix tons (rangées de plus en plus feutrées) et dix nuances (rangées de plus en plus sombres). Le pourcentage sur chaque pastille correspond au taux de mélange avec la couleur cible (blanc, gris ou noir). Cliquez sur une pastille pour copier son hex — pratique pour remplir un tableau de design tokens ou une configuration Tailwind.

Construire des échelles utilisables en production

N'embarquez pas les 30 pastilles — les designers ont rarement besoin d'autant de granularité. Choisissez 5 à 7 paliers bien répartis et nommez-les comme une échelle typographique (50, 100, 200… 900) pour que les développeurs sachent où une nouvelle couleur va se loger. Associez teintes et nuances pour les fonds et les emphases ; piochez des tons pour des accents d'interface qui ne doivent pas se battre avec la couleur de marque. Vérifiez toujours le contraste sur la surface où vous les utiliserez — les teintes claires échouent souvent au WCAG sur fond blanc, et les nuances sombres sur fond noir.

Comment chaque variante est calculée

Chaque sortie est une interpolation linéaire dans l'espace sRGB : tint(c, t) = mix(c, blanc, t), shade(c, t) = mix(c, noir, t), tone(c, t) = mix(c, gris, t), où mix(a, b, t) = a·(1−t) + b·t est appliqué par canal. Onze valeurs de t régulièrement espacées de 1/11 à 10/11 sont utilisées, en laissant la couleur de base hors de la bande — sa position se devine entre la teinte la plus forte et la nuance la plus forte.

Quand utiliser quoi

Les teintes sont idéales pour les arrière-plans de hover, les encadrés doux et les illustrations pastel — elles réchauffent une mise en page et signalent le calme. Les nuances ont leur place dans les états actifs, les en-têtes profonds et les zones d'emphase — elles projettent du poids et de la gravité. Les tons sont l'arme secrète pour le design éditorial, les sites de musée et toute palette qui doit paraître mesurée plutôt que vive ; ils relient la marque et le neutre sans aplatir l'un ni l'autre.

Questions fréquentes

Pourquoi mes teintes paraissent-elles crayeuses ?

Mélanger en espace sRGB (ce que la plupart des outils font, y compris celui-ci) est simple à calculer mais imparfait optiquement — la moyenne en ligne droite dans un espace non linéaire ternit les couleurs saturées. Pour des palettes art-directed où l'effet crayeux ne passe pas, mélangez dans un espace perceptuellement uniforme comme OKLCH ; attendez-vous à un petit gain de saturation sur les teintes intermédiaires.

Faut-il utiliser la luminosité HSL au lieu de mélanger avec du blanc/noir ?

La luminosité HSL est un raccourci en une ligne mais elle est perceptuellement irrégulière — passer L de 50 à 60 modifie un jaune bien plus qu'un bleu. Mélanger avec du blanc/noir donne des paliers visuels plus prévisibles pour des échelles monochromes, c'est pourquoi nous prenons cette option par défaut. Pour des paliers uniformes en luminosité perçue à travers le spectre, passez à OKLCH.

Les pourcentages correspondent-ils aux tokens Material/Tailwind comme 50, 100, 900 ?

Pas exactement. La plupart des design systems en production règlent leurs paliers à la main pour une cohérence perceptuelle, donc une rampe 50→900 n'est pas une échelle mathématique pure. Utilisez ce générateur comme point de départ : choisissez les paliers qui correspondent à votre marque, puis ajustez visuellement avant de figer vos tokens.

Puis-je copier les 30 codes hex d'un coup ?

Pour le moment chaque pastille se copie individuellement. Pour une exportation en bloc, faites une capture d'écran de la bande — les codes hex sont visibles dans les libellés — ou ouvrez les DevTools et copiez le HTML rendu, qui conserve toutes les métadonnées des pastilles.

L'outil reconnaît-il les couleurs nommées comme « royalblue » ?

Le sélecteur et le champ hex n'acceptent que des codes hex. Pour partir d'une couleur nommée, cherchez son hex dans notre outil Couleurs CSS nommées, puis collez-le ici.

Les couleurs sont-elles générées dans mon navigateur ou sur un serveur ?

Entièrement dans votre navigateur. Ouvrez DevTools → Réseau et faites bouger le sélecteur — vous ne verrez aucune requête. Audits de marque et palettes inédites peuvent être testés ici en toute sérénité.

Générateur de teintes, tons et nuances