Bruin kleurverloop: koffie, karamel en aardetinten

Een bruin kleurverloop is eigenlijk een donker, gedempt oranje dat van diep naar licht overloopt: espresso in crema, chocolade in karamel, klei in zand. Laat die warme tint door elke stop lopen en bruin ziet er rijk, gezellig en ambachtelijk uit. Laat het naar grijs of groen glijden en het lijkt op modder. Hieronder staan codes voor koffie-, karamel-, chocolade-, aarde- en whiskybruin, en de combinaties die erbij passen.

Waarom bruine verlopen modderig worden

Er zit geen bruin in de regenboog. Wat we bruin noemen is oranje of rood met de helderheid omlaag en de verzadiging gedempt. Dat heeft een praktisch gevolg: als een stop in je kleurverloop zijn warmte verliest, door te veel grijs of een zweem groen, leest de hele overgang als vuil. Houd elke stop aan de warme kant en maak donkerder door de helderheid te verlagen in plaats van zwart toe te voegen. Modderige verlopen laat het effect naast elkaar zien.

Je kunt een eigen bruin kleurverloop bouwen vanuit elk oranje in een kleurenkiezer die tint, verzadiging en helderheid toont. Het kost vier stappen:

1. 1

   Kies een warme tint

   Kies een tint tussen ongeveer 20 en 40 graden: lager voor roodachtige bruintinten zoals baksteen en terracotta, hoger voor gouden tinten zoals karamel.

2. 2

   Demp de verzadiging

   Breng de verzadiging omlaag naar ergens tussen 35% en 65%. Volledig verzadigd blijft het oranje; te laag wordt het grijs.

3. 3

   Stel drie helderheidsstops in

   Gebruik dezelfde tint op drie helderheidsniveaus, bijvoorbeeld 10%, 30% en 60%. Die spreiding maakt de overgang zichtbaar.

4. 4

   Maak het lichte uiteinde iets warmer

   Schuif de lichtste stop een paar graden richting geel. Echt licht op hout, koffie of klei ziet er in de highlights warmer uit.

Codes voor een koffieverloop

Koffiebruin is het nuttigste van de set. Espresso is bijna zwart en draagt lichte letters met echte diepte. De crema-schenking loopt van het bleke schuim bovenin een kop naar de koffie eronder. Mokka zit daartussenin en maakt een sterke, neutrale achtergrond voor menu’s en prijslijsten.

Cafés en branders vinden een complete identiteit op basis van deze tinten bij branding voor een koffiebar, en ideeën voor zakken en etiketten bij verpakking voor koffiebranders.

Codes voor karamel- en chocoladeverlopen

Karamel is bruin op zijn gouddste en vriendelijkst. Het gloeit, wat het ideaal maakt voor bakkerijen, honing, herfstacties en alles wat zoet is. Chocolade is het tegenovergestelde: diep, glanzend en verleidelijk. Een radiaal kleurverloop met een zachte highlight geeft chocolade de glans die het in het echt heeft.

Kleurverlopen in aarde, klei en terracotta

Aardebruin helt naar rood en voelt handgemaakt: klei, baksteen, leer, walnoot. Het past bij keramiek, plantenwinkels, outdoorspullen en alles met een natuurlijke of mediterrane sfeer. Vooral terracotta is een favoriet geworden voor warme, moderne merken, omdat het tegelijk aards en fris leest.

Wil je hier een volledig kleurenschema van maken, zie dan aardetinten en herfstkleurenpaletten. Voor het lichtere uiteinde van de familie, zand en haver, pakken de codes van het beige kleurverloop het over van woestijnklei.

Een lange bruine overgang warm houden in CSS

Browserverlopen mengen standaard in sRGB, en een lange overgang van diep bruin naar bleek karamel kan wegzakken in een enigszins grijzig midden. De browser vragen om in OKLCH te interpoleren houdt tint en chroma van begin tot eind stabieler. Het wordt ondersteund in actuele versies van de grote browsers, en de hexterugval dekt de rest.

.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-verlopen in OKLCH legt de kleurruimte uit en wanneer de extra regel de moeite waard is.

Wat past bij een bruin kleurverloop

Een bruin kleurverloop in een echte post

Bruine achtergronden dragen warm, alledaags nieuws bijzonder goed: een nieuwe roast, een seizoensbak, een workshop. Crèmekleurige letters op het diepe uiteinde zijn de veilige keuze, en een mosterd- of karamelaccent op één woord voegt wat energie toe. Instagramideeën voor een bakkerij heeft een maand aan posts die bij deze tinten passen.

Als je wekelijks post, is het moeilijkste elke post in hetzelfde warme bruin te houden. Met Gradiently kies je één keer een warme bruine Mark en elk sjabloon, elke story en elk menu draagt hem, en Auto-inkt kiest voor elke regel crème of espresso als letterkleur zodat niets verloren gaat in de donkerdere hoeken.