Générateur de nuances de couleur
Générez des teintes plus claires et des nuances plus sombres à partir de n'importe quelle couleur de base.
Comment utiliser Générateur de nuances de couleur
- Saisissez une couleur de base en HEX ou en RGB.
- Consultez cinq teintes plus claires et cinq nuances plus sombres.
- Copiez n'importe quelle valeur HEX pour votre design ou votre CSS.
À propos de Générateur de nuances de couleur
Les bonnes interfaces utilisent une gamme d'une même couleur plutôt qu'une seule valeur plate. Collez une couleur de base au format HEX (#137256 ou #137) ou RGB (rgb(19,114,86)) et ce générateur renvoie onze valeurs : votre couleur de base, cinq teintes mélangées vers le blanc, et cinq nuances mélangées vers le noir. C'est généralement tout ce dont vous avez besoin pour les états de survol et actifs, les bordures, les séparateurs, les arrière-plans subtils et la profondeur dans une interface.
Les paliers sont régulièrement espacés — chaque teinte pousse chaque canal RGB un sixième plus loin vers 255 que la précédente, et chaque nuance le rapproche de la même fraction vers 0. Chaque résultat est affiché sous forme de code HEX que vous pouvez copier directement dans votre CSS, et la couleur de base est présentée sous forme d'échantillon afin que vous puissiez confirmer avoir tapé ce que vous vouliez.
À savoir : c'est un mélange direct en RGB, pas un espace colorimétrique perceptuel, donc les paliers sont mathématiquement réguliers mais ne paraîtront pas toujours régulièrement espacés à l'œil — les couleurs de base très saturées ou très sombres ont tendance à perdre en netteté aux extrémités de l'échelle. Le résultat n'est qu'en HEX. Vérifiez toute association que vous prévoyez d'utiliser avec du texte à l'aide du vérificateur de contraste, et convertissez les valeurs avec le convertisseur de couleurs. Tout s'exécute dans votre navigateur.
Questions fréquentes
Quelle est la différence entre une teinte et une nuance ?
Une teinte est votre couleur mélangée avec du blanc, ce qui l'éclaircit. Une nuance est votre couleur mélangée avec du noir, ce qui l'assombrit. Cet outil vous donne cinq de chaque.
Quels formats de saisie fonctionnent ?
Le HEX en forme à trois ou six chiffres et le RGB comme rgb(19,114,86). Les résultats sont toujours renvoyés en HEX.
Comment les paliers sont-ils calculés ?
Chaque palier représente un sixième du chemin vers le blanc ou le noir. La teinte 1 est à un sixième du blanc, la teinte 5 est aux cinq sixièmes du chemin, et les nuances fonctionnent de la même façon dans la direction opposée.
Puis-je utiliser ces couleurs comme échelle de thème CSS ?
Oui. Les onze valeurs forment une échelle toute prête pour les boutons, les états de survol, les surfaces et les bordures. Copiez les codes HEX dans des propriétés personnalisées et référencez-les dans toute votre feuille de style.
Pourquoi mes nuances les plus sombres se ressemblent-elles presque ?
Parce que le mélange se fait en RGB plutôt que dans un espace perceptuel. À mesure que les canaux approchent de zéro, les différences entre les paliers deviennent plus difficiles à percevoir, ce qui est le plus visible avec des couleurs de base sombres ou très saturées.