Gradiente castanho: códigos de café, caramelo e terra

Um gradiente castanho é, no fundo, um laranja escuro e suavizado, misturado do profundo ao claro: espresso a desfazer-se em creme, chocolate em caramelo, argila em areia. Mantenha esse matiz quente em todas as paragens e o castanho parece rico, aconchegante e artesanal. Deixe-o escorregar para o cinzento ou o verde e parece lama. Abaixo ficam códigos para castanhos de café, caramelo, chocolate, terra e uísque, e as combinações que lhes assentam.

Porque é que os gradientes castanhos ficam lamacentos

Não há castanho no arco-íris. O que chamamos castanho é laranja ou vermelho com a luminosidade baixada e a saturação suavizada. Isto tem uma consequência prática: se uma paragem do gradiente perde calor, por ter cinzento a mais ou um toque de verde, a mistura inteira parece suja. Mantenha todas as paragens do lado quente e escureça baixando a luminosidade em vez de juntar preto. Gradientes lamacentos mostra o efeito lado a lado.

Pode construir o seu gradiente castanho a partir de qualquer laranja, num seletor de cor que mostre matiz, saturação e luminosidade. São quatro passos:

1. 1

   Escolha um matiz quente

   Escolha um matiz entre cerca de 20 e 40 graus: mais baixo para castanhos avermelhados, como tijolo e terracota, mais alto para os dourados, como o caramelo.

2. 2

   Suavize a saturação

   Baixe a saturação para algo entre 35% e 65%. Totalmente saturado, fica laranja; demasiado baixa, fica cinzento.

3. 3

   Defina três paragens de luminosidade

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

4. 4

   Aqueça um pouco a ponta clara

   Desloque a paragem mais clara uns graus para o amarelo. A luz real sobre madeira, café ou argila parece mais quente nos realces.

Códigos de gradiente de café

Os castanhos de café são os mais úteis do conjunto. O espresso é quase preto e sustenta texto claro com verdadeira profundidade. O creme a escorrer vai da espuma pálida no topo da chávena até ao café por baixo. O moca fica a meio e dá um fundo forte e neutro para ementas e listas de preços.

Cafés e torrefatores encontram uma identidade completa construída sobre estes tons em marca para cafés, e ideias de saquetas e rótulos em embalagem para torrefatores de café.

Códigos de gradiente de caramelo e chocolate

O caramelo é o castanho no seu mais dourado e simpático. Brilha, o que o torna ideal para pastelarias, mel, ofertas de outono e tudo o que seja doce. O chocolate é o oposto: profundo, lustroso e guloso. Um gradiente radial com um realce suave dá ao chocolate o brilho que tem na vida real.

Gradientes de terra, argila e terracota

Os castanhos de terra puxam ao vermelho e parecem feitos à mão: argila, tijolo, cabedal, nogueira. Assentam em cerâmica, lojas de plantas, equipamento de exterior e tudo com um ar natural ou mediterrânico. A terracota, em particular, tornou-se favorita de marcas quentes e modernas, porque parece ao mesmo tempo terrosa e fresca.

Para os alargar a um esquema completo, veja cores de tons terrosos e paletas de cores de outono. Para a ponta mais clara da família, areia e aveia, os códigos do gradiente bege continuam a partir da argila do deserto.

Manter quente uma mistura castanha longa em CSS

Os gradientes do navegador misturam em sRGB por defeito, e uma mistura longa de um castanho profundo a um caramelo pálido pode ceder para um meio ligeiramente acinzentado. Pedir ao navegador que interpole em OKLCH mantém o matiz e a croma mais estáveis de ponta a ponta. É suportado nas versões atuais dos principais navegadores, e a alternativa em hex cobre os restantes.

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

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

O que combinar com um gradiente castanho

Um gradiente castanho numa publicação real

Os fundos castanhos transportam particularmente bem notícias quentes e do dia a dia: uma nova torra, uma fornada sazonal, uma oficina. Texto creme na ponta escura é a escolha segura, e um acento mostarda ou caramelo numa palavra traz um pouco de energia. Ideias de Instagram para pastelarias tem um mês de publicações que assentam nestes tons.

Se publica toda a semana, a parte difícil é manter todas as publicações no mesmo castanho quente. Com o Gradiently, escolhe um Mark castanho quente uma vez e todos os modelos, stories e ementas o vestem, e a Tinta automática escolhe texto creme ou espresso para cada linha, para que nada se perca nos cantos mais escuros.