Brun gradient: kaffe, kola och jordkoder

En brun gradient är egentligen en mörk, mjukad orange som blandas från djup till ljus: espresso till crema, choklad till kola, lera till sand. Låt den varma nyansen löpa genom varje stopp så ser brunt rikt, mysigt och hantverksmässigt ut. Låt det glida mot grått eller grönt och det ser ut som lera. Nedan finns koder för kaffe-, kola-, choklad-, jord- och whiskybruna gradienter och de kombinationer som passar dem.

Varför bruna gradienter blir leriga

Det finns inget brunt i regnbågen. Det vi kallar brunt är orange eller rött med lägre ljushet och mjukare mättnad. Det får en praktisk följd: om ett stopp i gradienten förlorar sin värme, för att det har för mycket grått eller en antydan av grönt, ser hela övergången smutsig ut. Håll varje stopp på den varma sidan och gör mörkare genom att sänka ljusheten i stället för att lägga till svart. Leriga gradienter visar effekten sida vid sida.

Du kan bygga en egen brun gradient från vilken orange som helst i en färgväljare som visar nyans, mättnad och ljushet. Det tar fyra steg:

1. 1

   Välj en varm nyans

   Välj en nyans mellan cirka 20 och 40 grader: lägre för rödaktiga bruna toner som tegel och terrakotta, högre för gyllene som kola.

2. 2

   Mjuka upp mättnaden

   Sänk mättnaden till någonstans mellan 35 % och 65 %. Fullt mättad förblir den orange, för låg blir den grå.

3. 3

   Sätt tre ljushetsstopp

   Använd samma nyans på tre ljushetsnivåer, till exempel 10 %, 30 % och 60 %. Det är den spridningen som gör övergången synlig.

4. 4

   Gör den ljusa änden lite varmare

   Flytta det ljusaste stoppet några grader mot gult. Verkligt ljus på trä, kaffe eller lera ser varmare ut i högdagrarna.

Koder för kaffegradienter

Kaffebruna toner är de mest användbara i uppsättningen. Espresso är nästan svart och bär ljus text med verkligt djup. Crema pour går från det bleka skummet överst i en kopp ner i kaffet under. Mocka ligger däremellan och ger en stark, neutral bakgrund för menyer och prislistor.

Caféer och rosterier hittar en komplett identitet byggd på de här tonerna i varumärke för kafé, och idéer för påsar och etiketter i kaffeförpackningar för rosterier.

Koder för kola- och chokladgradienter

Kola är brunt när det är som mest gyllene och vänligt. Den glöder, vilket gör den idealisk för bagerier, honung, höstkampanjer och allt sött. Choklad är motsatsen: djup, glansig och förföriskt. En radiell gradient med en mjuk högdager ger chokladen den lyster den har i verkligheten.

Gradienter i jord, lera och terrakotta

Jordbruna toner lutar åt rött och känns handgjorda: lera, tegel, läder, valnöt. De passar keramik, växtbutiker, friluftsutrustning och allt med en naturlig eller medelhavskänsla. Terrakotta i synnerhet har blivit en favorit för varma, moderna varumärken eftersom den läses som både jordnära och fräsch.

För att bredda dem till ett helt färgschema, se jordtoner och färgpaletter för hösten. För den ljusare delen av familjen, sand och havre, tar koderna för beige gradient vid där ökenleran slutar.

Håll en lång brun övergång varm i CSS

Gradienter i webbläsare blandas i sRGB som standard, och en lång övergång från ett djupt brunt till en blek kola kan sjunka ihop till en lätt grågrön mitt. Om du ber webbläsaren interpolera i OKLCH hålls nyans och kromatisk styrka stadigare från ände till ände. Det stöds i aktuella versioner av de stora webbläsarna, och hexreserven täcker 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 förklarar färgrymden och när den är värd den extra raden.

Vad du kombinerar en brun gradient med

En brun gradient i ett riktigt inlägg

Bruna bakgrunder bär varma, vardagliga nyheter särskilt bra: en ny rostning, ett säsongsbak, en workshop. Gräddvit text på den mörka änden är det säkra valet, och en senaps- eller kolaaccent på ett enda ord ger lite energi. Instagramidéer för bageri har en månads inlägg som passar de här tonerna.

Om du postar varje vecka är det svåra att hålla varje inlägg i samma varma bruna. Med Gradiently väljer du en varmbrun Mark en gång, och varje mall, story och meny bär den, medan Auto-bläck väljer gräddvit eller espressosvart text för varje rad så att inget försvinner i de mörkare hörnen.