Dégradés monochromes : une teinte, mille nuances

Un dégradé monochrome fond une teinte à travers ses propres nuances, du profond au clair, sans introduire de seconde couleur. Du noir au blanc par le gris en est la version la plus pure ; un marine qui monte vers un bleu pâle, ou une aubergine qui s’éclaircit en lilas, sont aussi des dégradés monochromes. Ils paraissent calmes et chers parce que rien ne leur fait concurrence, et pour la même raison ils montrent chaque défaut : banding, milieux boueux et teinte qui dérive à mi-chemin. Les codes et le CSS ci-dessous évitent les trois.

Dégradé monochrome ou schéma de couleurs monochromatique

Les deux termes sont liés et souvent confondus. Un schéma de couleurs monochromatique est une palette : plusieurs teintes, tons et nuances d’une même couleur utilisés dans tout un design. Un dégradé monochrome est un seul fondu à l’intérieur de cette idée. Vous pouvez utiliser un dégradé monochrome dans un design dont la palette n’est pas du tout monochromatique, comme un fond bleu profond sous un texte orange.

Codes de dégradé monochrome à copier

Chacun garde une seule teinte et ne change que sa clarté et un peu sa saturation. Les arrêts plus sombres sont légèrement plus saturés que les plus clairs, ce qui est le comportement réel de la couleur dans l’ombre et explique l’aspect naturel de ces dégradés.

Pour l’extrémité sombre de cette famille à elle seule, voir les dégradés noirs et les dégradés gris. Pour comprendre le lien entre les paliers, les teintes, tons et nuances sont la lecture de fond.

Comment faire un dégradé monochrome en CSS

Le moyen le plus simple de garder une teinte est d’écrire les arrêts en oklch et de ne changer que le premier nombre, la clarté. L’angle de teinte reste fixe : la couleur ne peut donc pas errer, et oklch espace la clarté uniformément : le dégradé monte à un rythme régulier. OKLCH expliqué couvre le format.

.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}

1. 1

   Choisissez la teinte

   Choisissez une couleur et trouvez son angle de teinte. Un bleu se situe vers 260, un vert vers 145, un rouge vers 25.

2. 2

   Fixez les arrêts le plus sombre et le plus clair

   Gardez l’extrémité sombre au-dessus du noir pur et l’extrémité claire en dessous du blanc pur, sauf si vous voulez un bord net. Une clarté de 0,15 à 0,9 est une plage confortable.

3. 3

   Placez l’arrêt du milieu avec intention

   Déplacez-le vers l’extrémité que vous voulez voir dominer. Un arrêt central à 30 pour cent donne un cadre surtout clair ; à 70 pour cent, surtout sombre. Les arrêts de couleur du dégradé en montrent davantage.

4. 4

   Ajoutez du grain

   Une faible couche de bruit sur le dégradé masque le banding et ajoute un aspect matière.

Pourquoi les dégradés monochromes sombres produisent du banding

La plupart des écrans affichent 256 niveaux par canal. Un dégradé du noir #000000 au gris foncé #282828 ne dispose que de 40 paliers distincts. Étirez-le sur un en-tête de 1920 pixels de large et chaque palier devient une bande de 48 pixels, que l’œil repère facilement dans le noir. Les dégradés multicolores le cachent parce que les canaux changent à des moments différents ; un dégradé monochrome change les trois ensemble : les bandes s’alignent donc.

Le banding des dégradés et les dégradés granuleux détaillent la solution, avec du code pour une couche de bruit SVG.

Où fonctionnent les dégradés monochromes

Comme ils ne portent qu’une couleur, les dégradés monochromes laissent la typographie et la photographie mener. Ils conviennent aux lancements de produits de luxe, aux cabinets d’architecture, aux sorties musicales et à toute marque dont l’identité est une seule couleur. Composez les mots dans l’extrémité la plus claire ou la plus foncée de la même teinte, ou en blanc ou noir, et le design se lit comme une seule décision assurée.

Si vous avez besoin d’un accent, prenez-le hors de la teinte et utilisez-le une seule fois : une date orange sur un dégradé marine, ou un prix rouge sur du graphite. Le dégradé reste monochrome, et l’accent reçoit toute l’attention parce que rien d’autre ne la lui dispute.

Un fond monochrome dans Gradiently peut aussi bouger : un Mark rend sa lumière en direct, si bien qu’un dégradé d’une seule couleur peut dériver lentement derrière les mots, et avec Pro il s’exporte en boucle parfaite à chaque format que vous dessinez.