Brun gradient: koder for kaffe, karamell og jord

En brun gradient er egentlig en mørk, dempet oransje som går fra dyp til lys: espresso til crema, sjokolade til karamell, leire til sand. Hold den varme fargetonen gjennom hvert stopp, så ser brunt fyldig, lunt og håndlaget ut. Lar du den gli mot grått eller grønt, ser den ut som gjørme. Under finner du koder for kaffe, karamell, sjokolade, jord og whisky, og fargene som passer til dem.

Hvorfor brune gradienter blir grumsete

Det finnes ikke brunt i regnbuen. Det vi kaller brunt, er oransje eller rødt med lysheten skrudd ned og metningen dempet. Det har en praktisk konsekvens: mister ett stopp i gradienten varmen, fordi det har for mye grått eller et snev av grønt, leses hele overgangen som skitten. Hold hvert stopp på den varme siden, og gjør fargen mørkere ved å senke lysheten i stedet for å tilsette svart. Grumsete gradienter viser effekten side om side.

Du kan bygge din egen brune gradient fra hvilken som helst oransje i en fargevelger som viser fargetone, metning og lyshet. Det tar fire grep:

1. 1

   Velg en varm fargetone

   Velg en fargetone mellom omtrent 20 og 40 grader: lavere for rødlige brunfarger som tegl og terrakotta, høyere for gylne som karamell.

2. 2

   Demp metningen

   Senk metningen til et sted mellom 35 % og 65 %. Med full metning forblir den oransje; for lavt blir den grå.

3. 3

   Sett tre lyshetsstopp

   Bruk samme fargetone i tre lyshetsnivåer, for eksempel 10 %, 30 % og 60 %. Det spennet er det som gjør overgangen synlig.

4. 4

   Gjør den lyse enden litt varmere

   Flytt det lyseste stoppet noen grader mot gult. Ekte lys på tre, kaffe eller leire ser varmere ut i høylysene.

Koder for kaffegradienter

Kaffebrune toner er de mest nyttige i settet. Espresso er nesten svart og bærer lys tekst med ekte dybde. Cremaskjenk går fra det bleke skummet øverst i koppen til kaffen under. Mokka ligger midt imellom og gir en kraftig, nøytral bakgrunn til menyer og prislister.

Kaféer og kaffebrennerier finner en komplett identitet bygget på disse tonene i merkevarebygging for kaffebarer, og ideer til poser og etiketter i emballasje for kaffebrennerier.

Koder for karamell- og sjokoladegradienter

Karamell er brunt på sitt mest gylne og vennlige. Den gløder, og det gjør den ideell for bakerier, honning, høsttilbud og alt som er søtt. Sjokolade er det motsatte: dyp, blank og fristende. En radiell gradient med et mykt høylys gir sjokoladen den glansen den har i virkeligheten.

Gradienter i jord, leire og terrakotta

Jordbrune toner heller mot rødt og føles håndlagde: leire, tegl, lær, valnøtt. De passer til keramikk, plantebutikker, friluftsutstyr og alt med et naturlig eller middelhavsaktig preg. Særlig terrakotta har blitt en favoritt blant varme, moderne merkevarer, fordi den virker både jordnær og frisk.

Vil du utvide disse til et helt fargeskjema, se jordfarger og høstpaletter. For den lyse enden av familien, sand og havre, fortsetter kodene for beige gradienter der ørkenleire slutter.

Slik holder du en lang brun overgang varm i CSS

Nettlesere blander gradienter i sRGB som standard, og en lang overgang fra dyp brun til blek karamell kan synke ned i en litt gråaktig midte. Ber du nettleseren interpolere i OKLCH, holder fargetone og kroma seg jevnere fra ende til ende. Det støttes i gjeldende versjoner av de store nettleserne, og hex-reserven dekker resten.

.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%);
}

CSS-gradienter i OKLCH forklarer fargerommet og når det er verdt den ekstra linjen.

Hva du kan kombinere med en brun gradient

En brun gradient i et ekte innlegg

Brune bakgrunner bærer varme hverdagsnyheter spesielt godt: en ny brenning, et sesongbakverk, en workshop. Kremfarget tekst på den mørke enden er det trygge valget, og en aksent i sennep eller karamell på ett ord gir litt ekstra energi. Instagram-ideer for bakerier har en måned med innlegg som passer til disse tonene.

Poster du hver uke, er det vanskelige å holde hvert innlegg i samme varme brunfarge. Med Gradiently velger du en varm brun Mark én gang, og hver mal, story og meny bruker den, mens Auto-tekstfarge velger kremfarget eller espressofarget skrift for hver linje, så ingenting forsvinner i de mørkere hjørnene.