Degradê Rosa

11 degradês de rosa prontos, com o código CSS para copiar: do Rosa Embaçado ao Rosa de Damasco, rosa com branco e com preto e rosa com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.
#FFE4E1
#480607

Rosa Embaçado para Rosa de Damasco

Do tom mais claro ao mais escuro de rosa.

#FFE4E1
#F78FA7
#FF1493
#480607

Rosa Tom Sobre Tom

Quatro tons de rosa: Rosa Embaçado, Rosa Sorvete, Rosa Profundo, Rosa de Damasco.

#FFC0CB
#FFFFFF

Rosa (Pink) para Branco

Clareia até o branco.

#FFC0CB
#000000

Rosa (Pink) para Preto

Escurece até o preto.

#FFE4E1
#FF91A4

Rosa Embaçado para Rosa-Salmão

O Rosa Embaçado é 20 pontos mais claro que o Rosa-Salmão (L* de 93 contra 72).

#FF91A4
#CF6BA9

Rosa-Salmão para Super Rosa

O Rosa-Salmão é 14 pontos mais claro que o Super Rosa (L* de 72 contra 59).

#CF6BA9
#D02090

Super Rosa para Vermelho-Violeta

Super Rosa e Vermelho-Violeta quase não mudam de claridade: o degradê troca só o matiz.

#FFC0CB
#808080

Rosa (Pink) para Cinza

Rosa (Pink) com uma das cores que combinam com ele.

#FFC0CB
#000080

Rosa (Pink) para Azul-Marinho

Rosa (Pink) com uma das cores que combinam com ele.

#FFC0CB
#98FF98

Rosa (Pink) para Verde-Menta

Rosa (Pink) com uma das cores que combinam com ele.

#FFE4E1
#FFC0CB
#B76E79

Rosa Radial

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

Códigos CSS dos Degradês de Rosa

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

Degradê CSS
Rosa Embaçado para Rosa de Damasco linear-gradient(90deg, #FFE4E1 0%, #480607 100%)
Rosa Tom Sobre Tom linear-gradient(180deg, #FFE4E1 0%, #F78FA7 33%, #FF1493 67%, #480607 100%)
Rosa (Pink) para Branco linear-gradient(90deg, #FFC0CB 0%, #FFFFFF 100%)
Rosa (Pink) para Preto linear-gradient(180deg, #FFC0CB 0%, #000000 100%)
Rosa Embaçado para Rosa-Salmão linear-gradient(135deg, #FFE4E1 0%, #FF91A4 100%)
Rosa-Salmão para Super Rosa linear-gradient(135deg, #FF91A4 0%, #CF6BA9 100%)
Super Rosa para Vermelho-Violeta linear-gradient(135deg, #CF6BA9 0%, #D02090 100%)
Rosa (Pink) para Cinza linear-gradient(90deg, #FFC0CB 0%, #808080 100%)
Rosa (Pink) para Azul-Marinho linear-gradient(90deg, #FFC0CB 0%, #000080 100%)
Rosa (Pink) para Verde-Menta linear-gradient(90deg, #FFC0CB 0%, #98FF98 100%)
Rosa Radial radial-gradient(circle at center, #FFE4E1 0%, #FFC0CB 50%, #B76E79 100%)

Como Usar o Degradê Rosa

Os degradês desta página usam 67 tons de rosa com nome, do Rosa Embaçado (#FFE4E1) ao Rosa de Damasco (#480607).

No degradê Rosa Embaçado para Rosa de Damasco, 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 (17,4: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 rosa e a complementar, ponha uma terceira cor no centro.

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