Degradê Cinza

11 degradês de cinza prontos, com o código CSS para copiar: do Platina ao Grafite Escuro, cinza com branco e com preto e cinza com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.
#E5E4E2
#1A1A1A

Platina para Grafite Escuro

Do tom mais claro ao mais escuro de cinza.

#E5E4E2
#B2BEB5
#708090
#1A1A1A

Cinza Tom Sobre Tom

Quatro tons de cinza: Platina, Cinza-Acinzentado, Cinza Ardósia, Grafite Escuro.

#808080
#FFFFFF

Cinza para Branco

Clareia até o branco.

#808080
#000000

Cinza para Preto

Escurece até o preto.

#E5E4E2
#BEBEBE

Platina para Cinza Prateado

O Platina é 14 pontos mais claro que o Cinza Prateado (L* de 91 contra 77).

#BEBEBE
#8A7F80

Cinza Prateado para Metálico Foguete

O Cinza Prateado é 23 pontos mais claro que o Metálico Foguete (L* de 77 contra 54).

#8A7F80
#595956

Metálico Foguete para Cinza Chumbo

O Metálico Foguete é 16 pontos mais claro que o Cinza Chumbo (L* de 54 contra 38).

#808080
#FFFF00

Cinza para Amarelo

Cinza com uma das cores que combinam com ele.

#808080
#FFC0CB

Cinza para Rosa (Pink)

Cinza com uma das cores que combinam com ele.

#808080
#4169E1

Cinza para Azul Royal

Cinza com uma das cores que combinam com ele.

#91A3B0
#808080
#4D5D53

Cinza Radial

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

Códigos CSS dos Degradês de Cinza

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

Degradê CSS
Platina para Grafite Escuro linear-gradient(90deg, #E5E4E2 0%, #1A1A1A 100%)
Cinza Tom Sobre Tom linear-gradient(180deg, #E5E4E2 0%, #B2BEB5 33%, #708090 67%, #1A1A1A 100%)
Cinza para Branco linear-gradient(90deg, #808080 0%, #FFFFFF 100%)
Cinza para Preto linear-gradient(180deg, #808080 0%, #000000 100%)
Platina para Cinza Prateado linear-gradient(135deg, #E5E4E2 0%, #BEBEBE 100%)
Cinza Prateado para Metálico Foguete linear-gradient(135deg, #BEBEBE 0%, #8A7F80 100%)
Metálico Foguete para Cinza Chumbo linear-gradient(135deg, #8A7F80 0%, #595956 100%)
Cinza para Amarelo linear-gradient(90deg, #808080 0%, #FFFF00 100%)
Cinza para Rosa (Pink) linear-gradient(90deg, #808080 0%, #FFC0CB 100%)
Cinza para Azul Royal linear-gradient(90deg, #808080 0%, #4169E1 100%)
Cinza Radial radial-gradient(circle at center, #91A3B0 0%, #808080 50%, #4D5D53 100%)

Como Usar o Degradê Cinza

Os degradês desta página usam 32 tons de cinza com nome, do Platina (#E5E4E2) ao Grafite Escuro (#1A1A1A).

No degradê Platina para Grafite Escuro, o texto branco só passa de 4,5:1 de contraste (o mínimo para leitura, pela WCAG) a partir de 55% do caminho. Antes disso, use texto preto (16,5: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 cinza e a complementar, ponha uma terceira cor no centro.

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