L’essentiel en bref
- Une palette de dégradés est une petite famille nommée de dégradés, créée à partir d’une palette de couleurs de base et de quelques règles communes.
- La plupart des marques ont besoin de quatre à six dégradés : un principal, une version profonde, une version claire et discrète, un halo radial, un accent et un dégradé calme pour le texte.
- Des dégradés forment une famille quand ils partagent une couleur de fond, une direction, des positions d’arrêts cohérentes et les mêmes paliers de luminosité.
- Stocker les dégradés sous forme de propriétés personnalisées CSS nommées les garde identiques sur un site web, une appli et des fichiers de design.
- Une palette de dégradés doit être testée sur de vrais formats avec de vrais mots avant d’être inscrite dans la charte de marque.
Sur cette page
Une palette de dégradés est une petite famille nommée de dégradés construite à partir d’une palette de couleurs et de quelques règles communes, pour que chaque dégradé utilisé par une marque paraisse apparenté. Partez de cinq ou six couleurs de base, donnez un rôle à chaque dégradé (principal, profond, discret, halo, accent, texte), puis fixez ce qui en fait des frères et sœurs : la même couleur de fond, le même angle, des positions d’arrêts identiques et des paliers de luminosité réguliers. Consignez-les en tokens et testez-les sur de vraies créations avant que quiconque ne les utilise.
Pourquoi une marque a besoin de plus d’un dégradé
Un seul dégradé finit étiré sur des tâches qu’il ne sait pas faire. Le mélange principal éclatant qui rend superbement sur une publication de lancement est trop bruyant derrière un paragraphe, trop sombre pour une section claire de site web et trop chargé pour une diapositive pleine de chiffres. Les équipes improvisent alors, quelqu’un choisit un bleu voisin, et en un an la marque compte quinze dégradés presque assortis. Une palette évite cela en décidant des variations à l’avance.
Un tas de dégradés
- Chacun créé séparément, pour une seule création
- Des angles différents sur chaque page
- Des couleurs presque conformes à la marque
- Pas de nom, donc personne ne peut en demander un
- Copiés à l’œil depuis d’anciens fichiers
Une palette de dégradés
- Construite à partir d’une seule palette de base
- Une direction, utilisée partout
- Des codes hex et des positions d’arrêts exacts
- Nommés par rôle : principal, profond, discret
- Stockés en tokens dans le code et les fichiers
Partez d’une palette de couleurs de base
Chaque dégradé de la famille doit être créé uniquement à partir de ces couleurs, ou de leurs teintes et nuances. Si vos couleurs de marque ne sont pas encore fixées, réglez cela d’abord avec comment choisir ses couleurs de marque. Une base utile comprend un fond sombre, deux ou trois paliers de la teinte principale, un quasi-blanc et un accent pris ailleurs sur le cercle.
Donnez un rôle à chaque dégradé
Nommez les dégradés selon ce qu’ils font, pas selon leur apparence. « Principal » survit à un rafraîchissement des couleurs ; « coucher de soleil violet », non. Six rôles couvrent presque toutes les marques.
À quoi il sert
Ce qui le distingue
Ce qui le distingue
Ce qui le distingue
Ce qui le distingue
Ce qui le distingue
Ce qui le distingue
Les règles qui font des dégradés une famille
- Un seul fond. Chaque dégradé sombre se termine dans la même encre, chaque dégradé clair dans la même coquille. C’est le fond que l’œil utilise pour les regrouper.
- Une seule direction. Choisissez un angle, 135 ou 160 degrés, et tenez-vous-y. Des angles mélangés donnent à une page un air accidentel. L’angle d’un dégradé explique ce choix.
- Des arrêts identiques. Réutilisez les mêmes positions (0, 45, 75, 100 %, par exemple) pour que les transitions aient le même rythme. Les arrêts d’un dégradé traite de l’espacement.
- Des paliers de luminosité réguliers. Chaque couleur d’un mélange doit être nettement plus claire ou plus sombre que sa voisine. Des paliers irréguliers créent une bande lumineuse au milieu.
- Un seul accent, rationné. La couleur d’accent n’apparaît que dans un seul dégradé. Étalée sur tous, elle cesse d’être un accent.
- Une interpolation fixe dans le code. Si votre site mélange en oklch, tous les dégradés doivent le faire, sinon les mêmes codes rendront différemment d’une section à l’autre.
Transformer la palette de dégradés en tokens
Une palette qui ne vit que dans un PDF est ressaisie et dérive. Stockez chaque dégradé une seule fois sous forme de propriété personnalisée nommée et référencez-la partout. Les designers peuvent coller les mêmes valeurs dans leurs fichiers, et un futur rafraîchissement ne change qu’une ligne par dégradé. Les design tokens couvre la pratique plus largement.
:root {
--ink: #14112b;
--plum: #4c1d95;
--violet: #7c3aed;
--orchid: #c084fc;
--shell: #faf5ff;
--ember: #f97316;
--gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
--gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
--gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
--gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
--gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
--gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}
.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }Testez-la sur de vrais formats
Les nuanciers mentent. Un dégradé qui paraît équilibré en petit carré peut placer sa bande la plus lumineuse juste derrière un titre une fois qu’il remplit une story de 1080×1920. Avant de publier la palette, réalisez trois vraies créations avec de vrais mots : une publication portrait, une story et un en-tête de site web. Vérifiez que le dégradé texte garde les paragraphes lisibles, avec les contrôles de contraste des couleurs et accessibilité, et que principal et profond paraissent apparentés côte à côte.
Le rôle principal sur une publication portrait en 1080×1350.
La même famille sur une story en 1080×1920. Vérifiez que la bande la plus lumineuse dégage toujours le titre dans ce cadre plus haut.
Avec Gradiently Pro, le kit de marque conserve vos palettes de couleurs à côté de votre logo et de vos polices, et le Designer les applique quand il met en page de nouvelles créations. Si votre dégradé principal doit être ce que l’on reconnaît, les dégradés de marque explique comment faire d’un dégradé une signature.
Les questions qu’on nous pose
Qu’est-ce qu’une palette de dégradés ?
Un petit ensemble nommé de dégradés créés à partir d’une palette de couleurs avec des règles communes, pour qu’ils forment une famille partout où ils apparaissent.
Combien de dégradés une marque devrait-elle avoir ?
Quatre à six couvrent la plupart des besoins : un principal, une version profonde et une discrète, un halo radial, un accent et un dégradé assez calme pour le texte. Les petites marques peuvent commencer avec trois.
Comment faire en sorte que des dégradés aillent ensemble ?
Utilisez la même couleur de fond, le même angle, les mêmes positions d’arrêts et des paliers de luminosité réguliers pour tous les dégradés.
Comment stocker les dégradés de marque pour un site web ?
Définissez les couleurs et chaque dégradé une seule fois en propriétés personnalisées CSS, puis référencez ces noms dans chaque composant.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil