Degradê Creme

8 degradês de creme prontos, com o código CSS para copiar: do Amarelo Claro Suave ao Loiro, creme com branco e com preto e creme com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.

#FFFFE0

#FAF0BE

Amarelo Claro Suave para Loiro

Do tom mais claro ao mais escuro de creme.

#FFFFE0

#FFF8E7

#FAFAD2

#FAF0BE

Creme Tom Sobre Tom

Quatro tons de creme: Amarelo Claro Suave, Latte Cósmico, Amarelo Dourado Claro, Loiro.

#FFFDD0

#FFFFFF

Creme para Branco

Clareia até o branco.

#FFFDD0

#000000

Creme para Preto

Escurece até o preto.

#FFFDD0

#8B4513

Creme para Marrom Selaria

Creme com uma das cores que combinam com ele.

#FFFDD0

#FFD700

Creme para Dourado

Creme com uma das cores que combinam com ele.

#FFFDD0

#556B2F

Creme para Verde Oliva Escuro

Creme com uma das cores que combinam com ele.

#FFFEE5

#FFFDD0

#8C8B72

Creme Radial

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

Códigos CSS dos Degradês de Creme

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

Degradê	CSS
Amarelo Claro Suave para Loiro	`linear-gradient(90deg, #FFFFE0 0%, #FAF0BE 100%)`
Creme Tom Sobre Tom	`linear-gradient(180deg, #FFFFE0 0%, #FFF8E7 33%, #FAFAD2 67%, #FAF0BE 100%)`
Creme para Branco	`linear-gradient(90deg, #FFFDD0 0%, #FFFFFF 100%)`
Creme para Preto	`linear-gradient(180deg, #FFFDD0 0%, #000000 100%)`
Creme para Marrom Selaria	`linear-gradient(90deg, #FFFDD0 0%, #8B4513 100%)`
Creme para Dourado	`linear-gradient(90deg, #FFFDD0 0%, #FFD700 100%)`
Creme para Verde Oliva Escuro	`linear-gradient(90deg, #FFFDD0 0%, #556B2F 100%)`
Creme Radial	`radial-gradient(circle at center, #FFFEE5 0%, #FFFDD0 50%, #8C8B72 100%)`

Como Usar o Degradê Creme

O site tem 2 tons de creme com nome; para os degradês, entram também cores próximas, como Cabelo de Milho (#FFF8DC) e Amarelo-Claro (#FFFACD). Vão do Amarelo Claro Suave (#FFFFE0) ao Loiro (#FAF0BE).

No degradê Amarelo Claro Suave para Loiro, o texto branco não chega a 4,5:1 (o mínimo para leitura, pela WCAG) em nenhum ponto; o máximo é 1,1:1, na ponta escura. Use texto preto, que tem 20,6: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 creme e a complementar, ponha uma terceira cor no centro.

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