Degradê Bege

11 degradês de bege prontos, com o código CSS para copiar: do Bege ao Bege Francês, bege com branco e com preto e bege com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.
#F5F5DC
#A67B5B

Bege para Bege Francês

Do tom mais claro ao mais escuro de bege.

#F5F5DC
#FAD6A5
#C2B280
#A67B5B

Bege Tom Sobre Tom

Quatro tons de bege: Bege, Champanhe Profundo, Areia, Bege Francês.

#F5F5DC
#FFFFFF

Bege para Branco

Clareia até o branco.

#F5F5DC
#000000

Bege para Preto

Escurece até o preto.

#F5F5DC
#FAD6A5

Bege para Champanhe Profundo

Bege e Champanhe Profundo quase não mudam de claridade: o degradê troca só o matiz.

#FAD6A5
#EDC9AF

Champanhe Profundo para Areia do Deserto

Champanhe Profundo e Areia do Deserto quase não mudam de claridade: o degradê troca só o matiz.

#EDC9AF
#BD9F7B

Areia do Deserto para Fendi

O Areia do Deserto é 16 pontos mais claro que o Fendi (L* de 83 contra 67).

#F5F5DC
#A52A2A

Bege para Marrom

Bege com uma das cores que combinam com ele.

#F5F5DC
#556B2F

Bege para Verde Oliva Escuro

Bege com uma das cores que combinam com ele.

#F5F5DC
#000080

Bege para Azul-Marinho

Bege com uma das cores que combinam com ele.

#FAFAEC
#F5F5DC
#C2B280

Bege Radial

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

Códigos CSS dos Degradês de Bege

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

Degradê CSS
Bege para Bege Francês linear-gradient(90deg, #F5F5DC 0%, #A67B5B 100%)
Bege Tom Sobre Tom linear-gradient(180deg, #F5F5DC 0%, #FAD6A5 33%, #C2B280 67%, #A67B5B 100%)
Bege para Branco linear-gradient(90deg, #F5F5DC 0%, #FFFFFF 100%)
Bege para Preto linear-gradient(180deg, #F5F5DC 0%, #000000 100%)
Bege para Champanhe Profundo linear-gradient(135deg, #F5F5DC 0%, #FAD6A5 100%)
Champanhe Profundo para Areia do Deserto linear-gradient(135deg, #FAD6A5 0%, #EDC9AF 100%)
Areia do Deserto para Fendi linear-gradient(135deg, #EDC9AF 0%, #BD9F7B 100%)
Bege para Marrom linear-gradient(90deg, #F5F5DC 0%, #A52A2A 100%)
Bege para Verde Oliva Escuro linear-gradient(90deg, #F5F5DC 0%, #556B2F 100%)
Bege para Azul-Marinho linear-gradient(90deg, #F5F5DC 0%, #000080 100%)
Bege Radial radial-gradient(circle at center, #FAFAEC 0%, #F5F5DC 50%, #C2B280 100%)

Como Usar o Degradê Bege

Os degradês desta página usam 10 tons de bege com nome, do Bege (#F5F5DC) ao Bege Francês (#A67B5B).

No degradê Bege para Bege Francês, o texto branco não chega a 4,5:1 (o mínimo para leitura, pela WCAG) em nenhum ponto; o máximo é 3,7:1, na ponta escura. Use texto preto, que tem 19,0:1 na ponta clara, ou ponha o texto numa faixa sólida.

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 bege e a complementar, ponha uma terceira cor no centro.

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