CodeKitHubEn quoi consiste cet outil ?
Une rampe de nuances est une série de variations d'une couleur à différents niveaux de luminosité, utilisée dans le design d'interface pour des éléments comme les états de survol, les états désactivés, les bordures et les arrière-plans qui doivent se rapprocher d'une couleur de marque sans lui être identiques.
Cet outil convertit votre couleur de base en HSL, garde la teinte et la saturation fixes, et fait varier la luminosité d'environ 95 % (teinte quasi blanche) à environ 10 % (nuance quasi noire), votre couleur d'origine étant placée à sa position naturelle au milieu de la rampe.
Pourquoi l'utiliser ?
- Génère une rampe façon système de design (comme l'échelle 50/100/200.../900 de Tailwind) à partir d'une seule couleur, pas seulement d'une palette prédéfinie fixe.
- Choisissez 7, 9 ou 11 étapes selon la finesse de rampe dont vous avez besoin.
- Chaque étape affiche son code HEX exact et son pourcentage de luminosité — cliquez pour copier.
- Garde la teinte et la saturation constantes sur toute la rampe, si bien que chaque nuance se lit clairement comme liée à la couleur de base plutôt que de dériver vers le gris.
- Gratuit, instantané et entièrement local.
Mode d'emploi
- Choisissez votre couleur de base à l'aide du sélecteur de couleur ou en saisissant un code HEX.
- Choisissez le nombre d'étapes voulu dans la rampe (7, 9 ou 11).
- Lisez le code HEX et le pourcentage de luminosité de chaque nuance directement sur son échantillon.
- Cliquez sur n'importe quel échantillon pour copier son code HEX.
Exemple
Entrée
#3B82F6 (un bleu moyen), 9 étapesRésultat
9 nuances allant d'une teinte quasi blanche (~95 % de luminosité) à une nuance quasi noire (~10 % de luminosité), avec #3B82F6 lui-même positionné comme étape centraleLa teinte et la saturation restent fixes sur les 9 étapes — seule la luminosité change — si bien que chaque nuance se lit clairement comme faisant partie de la même famille de couleur.
Foire aux questions
Est-ce le même système que celui utilisé par Tailwind CSS pour ses échelles de couleur ?
C'est la même idée sous-jacente (teinte/saturation fixes, luminosité variable) mais pas une réplique exacte de la palette spécifique de Tailwind — les échelles 50-900 de Tailwind ont été ajustées à la main par des designers, pas générées par une formule unique. Cet outil vous donne une structure comparable générée à partir de n'importe quelle couleur choisie, utile quand votre couleur de base n'est pas l'une des couleurs prédéfinies de Tailwind.
Pourquoi ma couleur paraît-elle presque identique sur deux étapes adjacentes ?
Cela peut arriver près des extrémités très claires ou très foncées de la rampe, où la luminosité perçue change plus lentement que ne le suggère le pourcentage numérique (une propriété connue de la perception humaine des couleurs, pas spécifique à cet outil). Choisir moins d'étapes (7 au lieu de 11) espace davantage les valeurs de luminosité et réduit les échantillons quasi identiques.
Puis-je utiliser ces nuances directement comme propriétés personnalisées CSS ?
Oui — copiez chaque code HEX et collez-le dans vos variables CSS (par exemple --color-brand-100 à --color-brand-900), en faisant correspondre la position dans la rampe à l'échelle de nommage utilisée par votre projet.
Dois-je utiliser cet outil ou le Mélangeur de Couleurs ?
Si vous créez des versions plus claires et plus foncées d'une seule couleur — états de survol, arrière-plans subtils, bordures liées à une couleur de marque — utilisez ce générateur de nuances. Si vous avez plutôt besoin de la couleur entre deux couleurs différentes (par exemple une étape entre votre bleu principal et un orange secondaire), utilisez le Mélangeur de Couleurs, qui interpole les canaux RGB de deux couleurs selon n'importe quel ratio plutôt que de faire varier la luminosité d'une seule couleur.
Que se passe-t-il si ma couleur de base est déjà très claire ou très foncée ?
La couleur de base se trouve toujours sur la ligne centrale, avec des teintes montant jusqu'à environ 95 % de luminosité au-dessus et des nuances descendant jusqu'à environ 10 % en dessous. Si votre base est déjà quasi blanche, la moitié « teintes » de la rampe se comprime dans une plage de luminosité étroite (lignes quasi identiques) tandis que la moitié « nuances » s'étale largement — et inversement pour une base très foncée. Pour la rampe la mieux répartie, partez d'une version à luminosité moyenne de votre couleur (environ 40-60 % de luminosité).
Peut-il aussi générer des tons (la couleur mélangée avec du gris) ?
Non — cet outil ne fait varier que la luminosité en gardant la saturation fixe, ce qui produit des teintes et des nuances mais pas des tons. Pour une rampe plus atténuée, désaturez d'abord votre couleur de base (choisissez une version plus grisâtre dans le sélecteur de couleur) et générez la rampe à partir de celle-ci ; chaque étape héritera de la saturation plus faible.