# Comment créer une palette de dégradés pour une marque

[Canonical HTML page](https://gradiently.design/fr/guide/gradient-palette)

Un bon dégradé, c’est facile. Six qui vont clairement ensemble, couvrent tous les besoins d’une marque et restent justes côte à côte, c’est un système. Voici comment le construire.

## The short version

- 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.

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](https://gradiently.design/fr/guide/how-to-choose-brand-colors). 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.

- Encre: #14112b
- Prune nuit: #2e1065
- Prune: #4c1d95
- Violet: #7c3aed
- Orchidée: #c084fc
- Coquille: #faf5ff
- Braise: #f97316

Un exemple de base : un fond sombre, quatre paliers de violet, un quasi-blanc et un seul accent chaud. Chaque dégradé ci-dessous est construit avec ces sept codes.

## 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.

| Rôle | À quoi il sert | Ce qui le distingue |
| --- | --- | --- |
| Principal | Lancements, couvertures, le moment dont on se souvient | Toute la gamme, du sombre au clair |
| Profond | Sections sombres, diapositives, campagnes du soir | Seulement les deux ou trois couleurs les plus sombres |
| Discret | Pages claires, documents, lecture longue | La coquille et la teinte la plus pâle, à peine en mouvement |
| Halo | Visuels produit et mots isolés | Radial, lumineux dans un coin |
| Accent | Boutons, badges, un seul point fort par création | La teinte principale vers la couleur d’accent |
| Texte | Derrière les paragraphes et les légendes | Faible contraste interne, fort contraste avec le texte |

Six rôles pour une palette de dégradés de marque. Les petites marques peuvent commencer avec principal, profond et discret.

- Principal: `linear-gradient(135deg, #14112b 0%, #4c1d95 45%, #7c3aed 75%, #c084fc 100%)`
- Profond: `linear-gradient(135deg, #14112b 0%, #2e1065 60%, #4c1d95 100%)`
- Discret: `linear-gradient(135deg, #faf5ff 0%, #f3e8ff 60%, #e9d5ff 100%)`
- Halo: `radial-gradient(circle at 80% 20%, #c084fc 0%, #7c3aed 30%, #14112b 75%)`
- Accent: `linear-gradient(135deg, #7c3aed 0%, #c084fc 55%, #f97316 100%)`
- Texte: `linear-gradient(135deg, #2e1065 0%, #14112b 100%)`

La famille construite à partir de la base ci-dessus. Même fond, même angle de 135 degrés, mêmes couleurs : ils pourraient cohabiter sur une même page sans se disputer.

## 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é](https://gradiently.design/fr/guide/gradient-angle) 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é](https://gradiently.design/fr/guide/gradient-stops) 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](https://gradiently.design/fr/guide/design-tokens) couvre la pratique plus largement.

```css
: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); }
```

Toute la famille en propriétés personnalisées CSS. Les couleurs sont définies une fois, et chaque dégradé est construit à partir d’elles.

## 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é](https://gradiently.design/fr/guide/color-contrast-accessibility), et que principal et profond paraissent apparentés côte à côte.

Une publication portrait de lancement sur un fond en dégradé riche couvrant toute la gamme

Le rôle principal sur une publication portrait en 1080×1350.

Une story verticale avec le même titre sur un fond en dégradé apparenté de la même famille

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](https://gradiently.design/fr/guide/brand-gradient-system) explique comment faire d’un dégradé une signature.

## FAQ

### 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.