Générateur de Nuances et Teintes de Couleur | Construisez une échelle de 21 paliers du clair au foncé

Saisissez une seule couleur HEX de base et obtenez 10 nuances plus foncées et 10 teintes plus claires disposées en une échelle unique. Chaque échantillon affiche ses valeurs HEX et RGB, ce qui vous permet de prélever exactement les paliers nécessaires aux états survol, aux bordures, aux surfaces en mode sombre et aux tokens de design.

💡 À propos de cet outil

Vous avez choisi la couleur de la marque, puis vient le mur que tout développeur front-end connaît : quelle couleur utiliser pour le :hover du bouton, l'état désactivé, la bordure discrète, le fond atténué ? Ajuster la luminosité à la main produit souvent une échelle qui dérive de ton et paraît incohérente d'un composant à l'autre.

Cet outil interpole le RGB de base vers le noir pur et le blanc pur par paliers réguliers. Les nuances multiplient chaque canal par un facteur décroissant ; les teintes comblent l'écart jusqu'à 255 avec un facteur croissant. On obtient une échelle de 21 paliers — 10 nuances, votre base et 10 teintes — avec une progression linéaire et prévisible que vous pouvez relier directement à des noms de tokens comme shade-1 jusqu'à tint-10.

Chaque échantillon superpose sa lecture HEX et RGB dans une couleur de texte au contraste automatique, afin que les paliers clairs comme foncés restent lisibles. Vous pouvez copier un échantillon isolé ou exporter toute l'échelle sous forme de liste commentée de variables CSS, ce qui rend le passage d'une maquette Figma à une feuille de styles quasi immédiat.

🧐 Questions fréquentes

Quelle est la différence entre une nuance et une teinte ? Une nuance est votre couleur mélangée vers le noir (plus foncée) ; une teinte est mélangée vers le blanc (plus claire). Le mélange vers le gris donne un ton — cet outil se concentre volontairement sur les deux axes les plus utiles : nuance et teinte.

Comment les 10 paliers sont-ils calculés ? Les nuances multiplient chaque canal RGB par i/11, i allant de 10 à 1. Les teintes utilisent canal + (255 − canal) × i/11, i allant de 1 à 10. Le dénominateur 11 maintient le noir pur et le blanc pur hors de l'ensemble, de sorte que chaque palier reste exploitable et fidèle à la marque.

Pourquoi ne pas simplement modifier la luminosité HSL ? Ne déplacer que la L de HSL peut décaler la luminosité perçue de façon inégale selon les teintes. L'interpolation linéaire en RGB est plus simple et plus prévisible. Pour une uniformité perceptuelle, associez-la à un outil Lab/OKLCH.

Accepte-t-il le HEX abrégé à 3 chiffres ? Oui. Une valeur comme #f0c est étendue à six chiffres (#ff00cc) avant traitement.

Puis-je exporter toute l'échelle d'un coup ? Tout copier produit chaque nuance et teinte sous forme de liste étiquetée et commentée, prête à coller dans une feuille de styles comme point de départ de vos définitions de variables.

📚 Le saviez-vous

Vous êtes-vous déjà demandé pourquoi Tailwind et Material Design numérotent leurs couleurs de 50 à 900 ? C'est pour qu'une seule teinte de marque se déploie en une échelle réutilisable et tokenisée. En dérivant les paliers de façon mécanique dès le départ, ajouter un thème sombre plus tard revient à décider quel numéro inverser plutôt qu'à recomposer les couleurs à l'œil. La séparation nuance/teinte rappelle aussi l'impression en demi-teintes, où faire varier la taille du point d'encre — et non l'encre elle-même — crée les passages plus clairs et plus foncés sur la page.