Créateur de Palette de Dégradé | CSS et couleurs intermédiaires en une fois
Choisissez de 2 à 5 couleurs et générez en même temps un dégradé fluide et une palette par paliers. Basculez entre linéaire et radial, réglez l'angle de 0 à 360 degrés, définissez de 3 à 24 paliers, puis copiez à la fois le CSS linear-gradient() et une liste de codes HEX.
💡 À propos de cet outil
Trouver à la main la couleur exacte entre deux teintes est fastidieux et donne souvent un intermédiaire terne. Ici, un seul jeu de couleurs produit deux sorties : la chaîne CSS à coller dans une feuille de style, et une grille de nuances interpolées que vous prélevez une par une. Un clic sur une nuance copie sa valeur HEX dans le presse-papiers, ce qui évite de retaper #A952A4 à la main dans un panneau de design.
Le réglage des paliers est le levier le plus sous-estimé. Besoin d'une échelle d'interface à 5 niveaux entre deux couleurs de marque ? Mettez 5 paliers. Une légende de carte thermique à 24 arrêts ? Montez le curseur. Les modes linéaire et radial partagent les mêmes points de couleur : vous figez une palette, puis comparez un balayage de type bannière et une lueur radiale sans rien resélectionner.
🧐 Questions fréquentes
Le CSS est-il utilisable tel quel ?
Oui. Il sort sous la forme background: linear-gradient(90deg, #ec1380 0%, #00f0ff 100%); et se colle directement dans une propriété background. En mode radial, il génère radial-gradient(circle, ...).
Que change précisément le curseur de paliers ? Il fixe le nombre de nuances affichées dans la palette et la liste HEX. À 3, vous avez début, milieu et fin ; à 24, une rampe tonale fine. Il ne modifie pas le dégradé CSS, qui utilise toujours comme arrêts les 2 à 5 couleurs saisies.
Pourquoi les nuances du milieu paraissent parfois délavées ? C'est le résultat classique d'une interpolation dans l'espace RVB : mêler un rose et un cyan saturés passe par un centre peu saturé. Pour des milieux plus francs, ajoutez une troisième couleur au centre plutôt que de compter sur un mélange à deux.
Puis-je m'en servir pour des échelles de couleurs Tailwind ou SCSS ?
La liste HEX fournit les valeurs brutes ; collez-les dans votre theme.extend.colors ou une map SCSS. L'outil livre des valeurs, pas la syntaxe d'un framework précis.
📚 Le saviez-vous
Si un mélange magenta-cyan vire au gris au milieu, c'est que l'interpolation RVB suit une ligne droite à travers un cube de couleur, et que cette ligne frôle le centre à faible chroma. Les espaces perceptuels comme OKLCH ont été conçus pour éviter exactement cela, en gardant la luminosité et le chroma stables pendant que la teinte tourne. Pour un fond CSS ou une échelle de teintes d'interface, le pas RVB reste prévisible et suffisant ; en visualisation de données, où chaque palier doit se lire comme également distinct, ce creux gris est précisément le problème que la science des couleurs cherche à corriger.