Degradê Marrom

11 degradês de marrom prontos, com o código CSS para copiar: do Castanho-Claro ao Siena Escuro, marrom com branco e com preto e marrom com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.

#D2B48C

#3C1414

Castanho-Claro para Siena Escuro

Do tom mais claro ao mais escuro de marrom.

#D2B48C

#807532

#8B4513

#3C1414

Marrom Tom Sobre Tom

Quatro tons de marrom: Castanho-Claro, Bistre Espanhol, Marrom Selaria, Siena Escuro.

#A52A2A

#FFFFFF

Marrom para Branco

Clareia até o branco.

#A52A2A

#000000

Marrom para Preto

Escurece até o preto.

#D2B48C

#B87333

Castanho-Claro para Cobre

O Castanho-Claro é 20 pontos mais claro que o Cobre (L* de 75 contra 55).

#B87333

#B03060

Cobre para Marrom-Avermelhado

O Cobre é 13 pontos mais claro que o Marrom-Avermelhado (L* de 55 contra 42).

#B03060

#664228

Marrom-Avermelhado para Marrom Van Dyke

Marrom-Avermelhado e Marrom Van Dyke quase não mudam de claridade: o degradê troca só o matiz.

#A52A2A

#F5F5DC

Marrom para Bege

Marrom com uma das cores que combinam com ele.

#A52A2A

#FFFDD0

Marrom para Creme

Marrom com uma das cores que combinam com ele.

#A52A2A

#556B2F

Marrom para Verde Oliva Escuro

Marrom com uma das cores que combinam com ele.

#B94E48

#A52A2A

#3B2F2F

Marrom Radial

Do centro para as bordas, o tom claro no meio.

Códigos CSS dos Degradês de Marrom

Toque na linha para copiar o CSS do degradê marrom.

Degradê	CSS
Castanho-Claro para Siena Escuro	`linear-gradient(90deg, #D2B48C 0%, #3C1414 100%)`
Marrom Tom Sobre Tom	`linear-gradient(180deg, #D2B48C 0%, #807532 33%, #8B4513 67%, #3C1414 100%)`
Marrom para Branco	`linear-gradient(90deg, #A52A2A 0%, #FFFFFF 100%)`
Marrom para Preto	`linear-gradient(180deg, #A52A2A 0%, #000000 100%)`
Castanho-Claro para Cobre	`linear-gradient(135deg, #D2B48C 0%, #B87333 100%)`
Cobre para Marrom-Avermelhado	`linear-gradient(135deg, #B87333 0%, #B03060 100%)`
Marrom-Avermelhado para Marrom Van Dyke	`linear-gradient(135deg, #B03060 0%, #664228 100%)`
Marrom para Bege	`linear-gradient(90deg, #A52A2A 0%, #F5F5DC 100%)`
Marrom para Creme	`linear-gradient(90deg, #A52A2A 0%, #FFFDD0 100%)`
Marrom para Verde Oliva Escuro	`linear-gradient(90deg, #A52A2A 0%, #556B2F 100%)`
Marrom Radial	`radial-gradient(circle at center, #B94E48 0%, #A52A2A 50%, #3B2F2F 100%)`

Como Usar o Degradê Marrom

Os degradês desta página usam 38 tons de marrom com nome, do Castanho-Claro (#D2B48C) ao Siena Escuro (#3C1414).

No degradê Castanho-Claro para Siena Escuro, o texto branco só passa de 4,5:1 de contraste (o mínimo para leitura, pela WCAG) a partir de 45% do caminho. Antes disso, use texto preto (10,6:1 na ponta clara) ou deixe o texto do lado escuro.

Nenhum dos pares fica acinzentado no meio: as pontas de cada degradê estão perto na roda de cores ou uma delas é neutra (branco, preto ou cinza). Com cores opostas, como marrom e a complementar, ponha uma terceira cor no centro.

Para outros tons, veja os tons de marrom e as paletas com marrom, com nome e código, ou monte o seu degradê no Criador de Gradiente, que já abre com três tons de marrom. O guia Degradê de cores: como criar um gradiente bonito explica os tipos linear, radial e cônico.