À propos de cet outil
Les nuances sombres (shades) et les teintes claires (tints) sont la base d’un système de couleurs d’interface utilisable. Une seule couleur de marque suffit rarement : il faut des teintes plus claires pour les arrière-plans, les états de survol et les remplissages discrets, et des nuances plus sombres pour le texte, les bordures et les états qui doivent rester lisibles sur fond clair. « Shade » et « tint » ont un sens précis en terminologie de design — une nuance sombre mélange la couleur de base avec du noir, une teinte claire la mélange avec du blanc — à distinguer d’un « tone », qui la mélange avec du gris et que cet outil ne génère pas.
Choisissez une couleur de base et un nombre d’étapes pour générer une progression complète du foncé au clair : la nuance la plus sombre en premier, votre couleur d’origine au milieu, et la teinte la plus claire en dernier. Cliquez sur une pastille pour copier son code hexadécimal dans le presse-papiers, à utiliser dans vos variables CSS, tokens de design ou configuration Tailwind. Tout se passe localement dans votre navigateur pendant que vous ajustez la couleur ou le nombre d’étapes ; rien n’est envoyé.
Questions fréquentes
Quelle est la différence entre une nuance et une teinte ?
Une nuance (shade) est votre couleur de base mélangée vers le noir (plus foncée), tandis qu'une teinte (tint) est votre couleur de base mélangée vers le blanc (plus claire). Les deux conservent la même teinte (hue).
Combien de niveaux dois-je générer pour une palette de système de design ?
La plupart des systèmes de design utilisent 5 à 10 niveaux (similaire à l'échelle 50-900 de Tailwind) — suffisant pour couvrir arrière-plans, bordures, texte et états hover sans trop de couleurs quasi identiques.