Dégradé marron : codes café, caramel et terre

Un dégradé marron est en réalité un orange sombre et adouci, fondu du profond au clair : espresso vers crema, chocolat vers caramel, argile vers sable. Gardez cette teinte chaude dans chaque arrêt et le marron paraît riche, douillet et travaillé. Laissez-le glisser vers le gris ou le vert et il ressemble à de la boue. Voici des codes pour les marrons café, caramel, chocolat, terre et whisky, et les associations qui leur conviennent.

Pourquoi les dégradés marron deviennent boueux

Il n’y a pas de marron dans l’arc-en-ciel. Ce qu’on appelle marron est de l’orange ou du rouge dont on a baissé la clarté et adouci la saturation. D’où une conséquence pratique : si un arrêt de votre dégradé perd sa chaleur, parce qu’il contient trop de gris ou un soupçon de vert, tout le fondu se lit comme sale. Gardez chaque arrêt du côté chaud, et assombrissez en baissant la clarté plutôt qu’en ajoutant du noir. Les dégradés boueux montrent l’effet côte à côte.

Vous pouvez construire votre propre dégradé marron à partir de n’importe quel orange dans un sélecteur de couleur qui affiche teinte, saturation et clarté. Il faut quatre gestes :

1. 1

   Choisissez une teinte chaude

   Prenez une teinte entre environ 20 et 40 degrés : plus bas pour les marrons rougeâtres comme la brique et le terracotta, plus haut pour les dorés comme le caramel.

2. 2

   Adoucissez la saturation

   Ramenez la saturation entre 35 % et 65 %. Entièrement saturé, il reste orange ; trop bas, il vire au gris.

3. 3

   Fixez trois arrêts de clarté

   Employez la même teinte à trois niveaux de clarté, par exemple 10 %, 30 % et 60 %. Cet écart rend le fondu visible.

4. 4

   Réchauffez l’extrémité claire

   Décalez l’arrêt le plus clair de quelques degrés vers le jaune. La vraie lumière sur le bois, le café ou l’argile paraît plus chaude dans les hautes lumières.

Codes de dégradé café

Les marrons café sont les plus utiles de la série. L’espresso est presque noir et porte un texte clair avec une vraie profondeur. Le versé de crema va de la mousse pâle au sommet d’une tasse au café en dessous. Le moka se tient entre les deux et fait un fond neutre et solide pour les menus et les listes de prix.

Les cafés et les torréfacteurs trouveront une identité complète bâtie sur ces tons dans l’identité visuelle d’un coffee shop, et des idées de sacs et d’étiquettes dans l’emballage de torréfacteur.

Codes de dégradé caramel et chocolat

Le caramel est le marron à son plus doré et son plus amical. Il rayonne, ce qui le rend idéal pour les boulangeries, le miel, les offres d’automne et tout ce qui est sucré. Le chocolat est l’opposé : profond, brillant et gourmand. Un dégradé radial avec une douce lumière donne au chocolat le lustre qu’il a dans la vie.

Dégradés terre, argile et terracotta

Les marrons terre penchent vers le rouge et paraissent faits main : argile, brique, cuir, noyer. Ils conviennent à la céramique, aux boutiques de plantes, au matériel de plein air et à tout ce qui a un air naturel ou méditerranéen. Le terracotta en particulier est devenu un favori des marques chaleureuses et modernes car il se lit à la fois terrien et frais.

Pour les élargir en un schéma complet, voir les couleurs terre et les palettes de couleurs d’automne. Pour l’extrémité plus claire de la famille, sable et avoine, les codes de dégradé beige prennent le relais à partir de l’argile du désert.

Garder un long fondu marron chaud en CSS

Les dégradés des navigateurs se fondent en sRGB par défaut, et un long fondu d’un marron profond à un caramel pâle peut s’affaisser en un milieu un peu grisâtre. Demander au navigateur d’interpoler en OKLCH garde la teinte et la chroma plus stables d’un bout à l’autre. C’est pris en charge par les versions actuelles des principaux navigateurs, et le repli en hex couvre les autres.

.brown-hero {
  /* fallback for older browsers */
  background: linear-gradient(160deg, #2a1810 0%, #a85f24 55%, #fbe3b8 100%);
  /* steadier warmth through the middle */
  background: linear-gradient(160deg in oklch, oklch(0.24 0.04 45) 0%, oklch(0.52 0.11 55) 55%, oklch(0.92 0.06 80) 100%);
}

Les dégradés CSS en OKLCH explique l’espace colorimétrique et quand il vaut la ligne supplémentaire.

Quoi associer à un dégradé marron

Un dégradé marron dans un vrai post

Les fonds marron portent particulièrement bien les nouvelles chaleureuses du quotidien : une nouvelle torréfaction, une pâtisserie de saison, un atelier. Un texte crème sur l’extrémité profonde est le choix sûr, et un accent moutarde ou caramel sur un mot ajoute un peu d’énergie. Les idées Instagram pour boulangerie offrent un mois de posts adaptés à ces tons.

Si vous publiez chaque semaine, le plus dur est de garder chaque post dans le même marron chaud. Avec Gradiently, vous choisissez un Mark marron chaud une fois et chaque modèle, story et menu le porte, et l’encre Auto choisit un texte crème ou espresso pour chaque ligne : rien ne se perd dans les coins plus sombres.