Degradê marrom: códigos de café, caramelo e terra

Um degradê marrom é, na verdade, um laranja escuro e suavizado que vai do profundo ao claro: espresso virando crema, chocolate virando caramelo, argila virando areia. Mantenha esse matiz quente em todas as paradas e o marrom fica rico, aconchegante e artesanal. Deixe-o escorregar para o cinza ou o verde e ele parece lama. Abaixo estão códigos de marrom café, caramelo, chocolate, terra e uísque, e as combinações que funcionam com eles.

Por que degradês marrons ficam encardidos

Não existe marrom no arco-íris. O que chamamos de marrom é laranja ou vermelho com a luminosidade baixa e a saturação suavizada. Isso tem uma consequência prática: se uma parada do degradê perde o calor, por ter cinza demais ou um toque de verde, a mistura inteira parece suja. Mantenha todas as paradas do lado quente e escureça baixando a luminosidade, em vez de adicionar preto. Degradês encardidos mostra o efeito lado a lado.

Você pode montar o seu próprio degradê marrom a partir de qualquer laranja num seletor de cores que mostre matiz, saturação e luminosidade. São quatro movimentos:

1. 1

   Escolha um matiz quente

   Escolha um matiz entre uns 20 e 40 graus: mais baixo para marrons avermelhados, como tijolo e terracota, mais alto para os dourados, como caramelo.

2. 2

   Suavize a saturação

   Baixe a saturação para algo entre 35% e 65%. Totalmente saturado, continua laranja; baixo demais, vira cinza.

3. 3

   Defina três paradas de luminosidade

   Use o mesmo matiz em três níveis de luminosidade, por exemplo 10%, 30% e 60%. É essa distância que torna a mistura visível.

4. 4

   Esquente um pouco a ponta clara

   Desloque a parada mais clara alguns graus em direção ao amarelo. A luz real sobre madeira, café ou argila parece mais quente nos pontos de brilho.

Códigos de degradê cor de café

Os marrons de café são os mais úteis do conjunto. O espresso é quase preto e sustenta texto claro com profundidade de verdade. A crema vai da espuma clara no topo da xícara até o café embaixo. O mocha fica no meio e é um fundo forte e neutro para cardápios e tabelas de preço.

Cafeterias e torrefações encontram uma identidade completa construída com esses tons em branding para cafeteria, e ideias de pacotes e rótulos em embalagem para torrefação de café.

Códigos de degradê caramelo e chocolate

O caramelo é o marrom no seu lado mais dourado e simpático. Ele brilha, o que o torna ideal para padarias, mel, ofertas de outono e qualquer coisa doce. O chocolate é o oposto: profundo, lustroso e indulgente. Um degradê radial com um brilho suave dá ao chocolate o reflexo que ele tem na vida real.

Degradês de terra, argila e terracota

Os marrons terrosos puxam para o vermelho e parecem feitos à mão: argila, tijolo, couro, nogueira. Combinam com cerâmica, lojas de plantas, equipamentos para atividades ao ar livre e qualquer coisa com clima natural ou mediterrâneo. A terracota, em especial, virou favorita de marcas quentes e modernas porque parece terrosa e fresca ao mesmo tempo.

Para ampliar esses tons num esquema completo, veja cores terrosas e paletas de cores de outono. Para o lado mais claro da família, areia e aveia, os códigos de degradê bege continuam a partir da argila do deserto.

Mantendo quente uma mistura longa de marrom em CSS

Os degradês do navegador misturam em sRGB por padrão, e uma mistura longa de um marrom profundo até um caramelo claro pode afundar num meio levemente acinzentado. Pedir ao navegador para interpolar em OKLCH mantém o matiz e o croma mais estáveis de ponta a ponta. Isso é suportado nas versões atuais dos principais navegadores, e o fallback em hex cobre o resto.

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

Degradês CSS em OKLCH explica o espaço de cor e quando vale a linha extra.

O que combinar com um degradê marrom

Um degradê marrom num post de verdade

Fundos marrons carregam muito bem notícias quentes do dia a dia: uma torra nova, uma fornada da estação, uma oficina. Texto creme na parte escura é a escolha segura, e um destaque mostarda ou caramelo numa palavra dá um pouco de energia. Ideias de Instagram para padaria tem um mês de posts que combinam com esses tons.

Se você posta toda semana, a parte difícil é manter todos os posts no mesmo marrom quente. Com o Gradiently, você escolhe um Mark marrom quente uma vez e todo template, story e cardápio passa a usá-lo, e a tinta automática escolhe texto creme ou espresso para cada linha, para que nada se perca nos cantos mais escuros.