Dégradés subtils : des nuances discrètes pour des interfaces épurées

Un dégradé subtil passe entre deux couleurs si proches qu’on sent le changement plus qu’on ne le voit : du blanc à un blanc cassé froid, d’un quasi-noir à un quasi-noir un peu plus doux. Ce petit décalage donne à une surface l’air éclairée, et c’est pourquoi les interfaces épurées l’utilisent sur les fonds de page, les cartes et les panneaux en mode sombre. Les codes ci-dessous limitent l’écart de luminosité à quelques pour cent ; au-delà, le dégradé devient un élément à part entière plutôt qu’une surface.

Codes de dégradés subtils clairs

Chacun part d’un quasi-blanc et glisse vers une légère teinte. Choisissez la teinte à partir de votre couleur de marque pour que même le fond garde une trace d’identité. Les fondus de haut en bas paraissent les plus naturels, car la lumière vient en général d’en haut.

Codes de dégradés subtils sombres

Les surfaces sombres en profitent encore plus, car un noir pur et plat ressemble à un trou dans l’écran. Éclaircissez un peu le haut et laissez le bas se poser. Les dégradés en mode sombre traitent des thèmes complets ; voici les briques de base.

Où les dégradés subtils fonctionnent dans une interface

La règle de base : un dégradé subtil ne doit jamais être ce qu’on regarde. Si quelqu’un commente le dégradé en relecture, il est trop fort pour un fond. Pour des styles sobres en impression et sur les réseaux sociaux autant qu’à l’écran, voyez les fonds minimalistes.

Teinter un dégradé subtil avec votre couleur de marque

Un dégradé gris neutre est sûr mais anonyme. Teinter l’extrémité claire ou sombre d’une trace de la teinte de votre marque relie toute l’interface au logo sans que personne puisse dire pourquoi. L’astuce consiste à garder la teinte et à jeter presque toute la saturation.

1. 1

   Prenez la teinte de la marque

   Convertissez votre couleur de marque principale en oklch ou en HSL et notez seulement sa teinte : autour de 265 pour un violet, 160 pour un vert, 30 pour un orange chaud.

2. 2

   Restez presque gris

   Réglez une chroma très basse, autour de 0,005 à 0,015 en oklch, ou une saturation sous environ 30 % en HSL à très haute luminosité. Vous voulez un murmure de couleur, pas un pastel.

3. 3

   Fixez deux valeurs de luminosité

   Pour les thèmes clairs, essayez 99 % et 96 % ; pour les thèmes sombres, autour de 20 % et 15 %. Gardez les deux extrémités sur la même teinte pour que le fondu ne glisse jamais vers le gris ou une deuxième couleur.

4. 4

   Comparez avec un blanc ou un noir pur

   Placez le dégradé à côté d’un bloc blanc ou noir uni. Si vous ne voyez aucune différence, poussez un peu l’extrémité basse ; si la teinte se voit depuis l’autre bout de la pièce, baissez la chroma.

La même teinte peut ensuite passer dans les bordures, les séparateurs et les états de survol, pour que le dégradé fasse partie d’un système discret plutôt que d’être un effet isolé. Les boutons sont le seul endroit où autoriser un écart un peu plus fort, quelques pour cent plus sombre en bas, car un soupçon de volume les rend plus cliquables à l’œil.

Écrire un dégradé subtil en CSS

Les codes hexadécimaux fonctionnent partout. Pour un contrôle plus fin, écrivez les couleurs en oklch, où le premier nombre est la luminosité perçue, afin de régler l’écart exactement : de 99 % à 96 %, par exemple. Mélanger en oklch garde aussi le changement régulier sur toute la longueur. Le dégradé CSS en oklch explique la syntaxe, et le dégradé linéaire CSS couvre les bases.

:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}

Pourquoi les dégradés subtils font des bandes, et la solution

Deux couleurs proches n’ont que très peu de niveaux entre elles dans une image 8 bits. Étirez-les sur un en-tête de 1920 pixels et chaque niveau devient une bande visible, surtout sur les dégradés sombres et les écrans bon marché. L’explication complète se trouve dans les bandes de dégradé.

Sur le web, une minuscule texture de bruit SVG posée sur le dégradé à faible opacité supprime les niveaux visibles sans que personne remarque le grain ; la texture de bruit en CSS donne le code. Pour les posts et les présentations, un Mark Gradiently porte son propre grain et se rend à toutes les tailles, si bien qu’un fond discret reste lisse, en story comme en bannière. Quand vous voulez l’inverse du calme, les dégradés vifs proposent des codes saturés.