L’essentiel en bref
- En design, la saturation est l’intensité d’une couleur, du plus vif au gris complet, indépendamment de sa teinte.
- Une forte saturation attire l’attention et donne de l’énergie : elle fonctionne mieux sur de petites surfaces comme les boutons, les accents et les mises en avant.
- Une saturation plus basse paraît plus calme et souvent plus haut de gamme, et convient aux grandes surfaces comme les fonds et les longues lectures.
- Deux couleurs complémentaires très saturées placées côte à côte semblent vibrer, ce qui rend le texte posé dessus fatigant à lire.
- Les couleurs saturées doivent en général être adoucies en mode sombre et ne peuvent souvent pas être reproduites exactement en impression CMJN.
Sur cette page
La saturation en design mesure l’intensité d’une couleur : totalement saturée, elle est vive et pure ; totalement désaturée, elle est grise. Montez-la là où vous voulez de l’attention et de l’énergie, sur un bouton, un prix soldé ou une seule mise en avant. Baissez-la pour les grandes surfaces, la lecture longue, les marques haut de gamme et les interfaces sombres, où une couleur vive fatigue vite. La plupart des bonnes palettes mélangent les deux à dessein : une base calme, moins saturée, avec une ou deux notes saturées.
Ce qu’est la saturation, et ce qu’elle n’est pas
Toute couleur se décrit par trois propriétés : la teinte (de quelle couleur il s’agit), la clarté (sa proximité du blanc ou du noir) et la saturation (sa pureté ou son degré de grisé). Ne changez que la saturation, et un rouge cerise glisse vers le vieux rose, puis vers le gris, sans devenir plus clair ni plus sombre. Teinte, saturation et luminosité explique comment les trois s’articulent.
En HSL, la saturation est la deuxième valeur. Dans l’espace colorimétrique oklch, plus récent, son équivalent est la chroma, qui se comporte de façon plus régulière d’une teinte à l’autre : un jaune et un bleu de même chroma paraissent aussi intenses. Les couleurs HSL présente l’ancien modèle et la lecture de ses valeurs.
Quand monter la saturation
- La seule chose sur laquelle cliquer. Un bouton saturé sur une page calme n’a besoin d’aucune flèche. C’est le rôle d’une couleur d’accent.
- Les moments courts et bruyants. Annonces de soldes, publications de lancement et comptes à rebours d’événements sont faits pour interrompre le défilement.
- Les marques jeunes, ludiques ou sportives. Produits pour enfants, boissons énergisantes et festivals arborent souvent une forte saturation comme trait de personnalité.
- Les données qui doivent ressortir. Dans un graphique, saturez la série qui compte et passez le reste en gris.
- Les petites surfaces sur fond sombre. Une couleur vive sur une petite surface presque noire se lit comme de la lumière, ce qui explique pourquoi le néon fonctionne la nuit.
Quand baisser la saturation
- Les grandes surfaces. Un écran entier de couleur pure et saturée fatigue. Les fonds fonctionnent en général mieux légèrement grisés.
- Le positionnement haut de gamme. Des couleurs sourdes et complexes comme l’olive, le sang de bœuf et l’ardoise paraissent souvent plus réfléchies et plus coûteuses que les primaires.
- La lecture longue. Articles, documents et tableaux de bord demandent une surface calme qu’on peut regarder pendant une heure.
- Le mode sombre. Les couleurs saturées rayonnent et bavent sur les fonds sombres. Baissez la saturation et montez un peu la clarté ; le design en mode sombre donne le détail.
- Derrière des photos et du texte. Un fond plus discret laisse la photo et les mots mener.
Un moment court et bruyant comme des soldes du week-end, c’est là qu’une forte saturation a toute sa place. Publication portrait en 1080×1350.
Un contenu sur lequel on doit s’attarder, comme un billet de journal, appelle une couleur plus calme et moins saturée.
Le problème de la vibration
Placez deux couleurs complémentaires très saturées côte à côte, comme du rouge sur du vert ou du bleu sur de l’orange, et la frontière entre elles semble scintiller. C’est un effet optique, et il rend le texte sur ces paires réellement inconfortable à lire, même quand le rapport de contraste paraît acceptable. La solution : désaturer l’une des deux, ou les séparer par un neutre.
Vibre
- Texte rouge pur sur vert pur
- Bleu saturé sur orange saturé
- Magenta à côté d’un vert citron à pleine intensité
- Des couleurs vives côte à côte sur toute une affiche
Se lit calmement
- Texte rouge profond sur une sauge sourde
- Bleu marine sur un abricot doux
- Accent magenta sur un fond vert citron grisé
- Une seule couleur vive sur une base moins saturée
Régler la saturation en CSS
Les codes hexadécimaux masquent la saturation, d’où la lenteur des réglages à l’œil en hexadécimal. Travaillez plutôt en HSL ou en oklch, ou mélangez une couleur avec du gris grâce à color-mix().
:root {
/* HSL: the second value is saturation */
--brand: hsl(350 80% 48%);
--brand-muted: hsl(350 35% 48%);
/* oklch: the second value is chroma */
--accent: oklch(0.65 0.2 30);
--accent-soft: oklch(0.65 0.08 30);
/* color-mix: blend towards a grey of similar lightness */
--brand-quiet: color-mix(in oklch, var(--brand) 60%, #808080);
}Une bonne habitude consiste à définir chaque couleur de marque à deux saturations dès le départ : une version pleine pour les accents et une version sourde pour les grands aplats. Ainsi, personne n’a à improviser une nuance plus douce plus tard.
Les photos suivent la même logique. Une photo chargée et saturée derrière un titre lui fait concurrence ; baissez sa saturation d’environ un tiers et les mots prennent la main sans encadré ni ombre. À l’inverse, un seul objet saturé dans une photo par ailleurs sourde, un manteau rouge dans une rue grise, est l’un des plus vieux moyens de guider le regard.
La saturation à l’impression
Les écrans affichent des couleurs plus saturées que ce que l’encre CMJN peut imprimer, surtout les bleus, verts, oranges et violets éclatants. Une couleur vive à l’écran sort souvent nettement plus terne à l’impression. Si la saturation est au cœur de votre marque, envisagez une encre Pantone en ton direct pour l’impression, et vérifiez une épreuve avant un gros tirage. RVB ou CMJN explique cet écart.
La saturation agit aussi de pair avec la température des couleurs : une palette sourde et chaude paraît rétro, une palette sourde et froide paraît scandinave. Pour des ensembles prêts à l’emploi à chaque extrémité du curseur, voyez les palettes de couleurs sourdes et les palettes de couleurs vives.
Les Marks de Gradiently appliquent le même principe à un fond vivant : la zone la plus calme et la plus contrastée se place derrière le texte et le détail chargé s’y apaise, si bien que les mots reposent sur une zone plus tranquille tandis que le reste du Mark garde sa couleur.
Les questions qu’on nous pose
Qu’est-ce que la saturation en design ?
L’intensité ou la pureté d’une couleur, du plus vif au gris complet. Elle est indépendante de la teinte et de la clarté.
Une forte saturation, est-ce une mauvaise chose ?
Non, mais elle convient surtout aux petites surfaces et aux moments brefs. De grandes surfaces très saturées fatiguent et peuvent paraître bon marché.
Quelle différence entre saturation et luminosité ?
La saturation indique la quantité de gris mêlée à une couleur ; la luminosité ou clarté, sa proximité du blanc ou du noir. On peut changer l’une sans l’autre.
Pourquoi les couleurs saturées rendent-elles moins bien en mode sombre ?
Sur un fond sombre, les couleurs vives semblent rayonner et s’estompent sur les bords. Baisser un peu la saturation et monter la clarté les garde nettes.
Comment rendre une couleur moins saturée en CSS ?
Baissez la deuxième valeur de hsl() ou oklch(), ou mélangez-la avec du gris grâce à color-mix(in oklch, yourcolour 60%, #808080).
É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