# Códigos de degradê rosa e roxo, do doce ao entardecer

[Canonical HTML page](https://gradiently.design/pt-br/guide/pink-purple-gradient)

Rosa e roxo podem ser doces, glamourosos ou discretamente sombrios, conforme a luminosidade e a saturação. Veja os códigos de cada etapa dessa faixa e como escolher.

## The short version

- Um degradê rosa e roxo mistura matizes vizinhos, como o rosa #ec4899, o magenta #c026d3 e o violeta #9333ea, então a transição continua viva sem uma cor de ponte.
- O mesmo par parece doce quando é pálido, glamouroso quando é saturado e entardecer quando é escuro.
- O texto branco falha no rosa vivo e no lilás pálido, então use uma tinta ameixa profunda ali e guarde o branco para magenta, violeta e bases escuras.
- Adicionar um pouco de laranja, azul ou dourado a um degradê rosa e roxo o torna muito menos previsível que a mistura padrão de duas cores.
- Rosa e roxo combinam com beleza, vida noturna, música, celebrações e marcas de criadores, e uma base escura evita que pareçam infantis.

Um **degradê rosa e roxo** mistura dois vizinhos do círculo cromático, um rosa como `#ec4899` e um violeta como `#9333ea`, com magenta e orquídea no meio. Como os matizes são adjacentes, a mistura continua viva de ponta a ponta. O que muda tudo é a luminosidade: mantenha-a pálida e você tem algodão-doce, aumente a saturação e tem glamour, escureça e tem entardecer. Os códigos abaixo vão do claro ao escuro, então você pode escolher primeiro o clima e depois os valores hex.

## Os climas do degradê rosa e roxo num relance

| Clima | Paradas típicas | Sensação | Funciona para |
| --- | --- | --- | --- |
| Doce | `#fbcfe8` a `#e9d5ff` | Doce, suave, jovem | Padarias, chás de bebê, papelaria |
| Orquídea | `#f0abfc` a `#c084fc` | Sonhador, romântico | Beleza, casamentos, bem-estar |
| Magenta | `#ec4899` a `#9333ea` | Ousado, glamouroso | Vida noturna, música, criadores |
| Entardecer | `#2e0a2f` a `#9d174d` | Sombrio, adulto | Fragrâncias, coquetéis, eventos noturnos |

Quatro climas de um só par. Cada passo da tabela é mais escuro ou mais saturado que o anterior.

- Rosa-bala: #fbcfe8
- Chiclete: #f9a8d4
- Rosa-choque: #ec4899
- Magenta: #c026d3
- Violeta orquídea: #a855f7
- Violeta: #9333ea
- Lilás: #e9d5ff
- Tinta ameixa: #2e0a2f

Uma paleta de trabalho para o par, incluindo as pontas clara e escura de que você precisa para o texto.

## Degradês rosa e roxo doces

Rosas e lilases pálidos juntos são tão suaves quanto a cor pode ser. Combinam com tudo que é doce ou gentil, mas podem virar infantis rapidamente. A solução é uma base levemente quente, um pêssego ou creme em uma das pontas, e uma tipografia escura bem segura.

- Algodão-doce: `linear-gradient(135deg, #fce7f3 0%, #fbcfe8 45%, #e9d5ff 100%)`
- Leite de morango: `linear-gradient(180deg, #fff1f2 0%, #f5d0fe 100%)`
- Pêssego, rosa, lilás: `radial-gradient(circle at 25% 25%, #ffedd5 0%, #fbcfe8 45%, #ddd6fe 100%)`

Misturas doces, todas com tinta ameixa profunda. O pêssego da terceira evita que pareça enjoativa.

Para mais dessa suavidade, [degradês pastel](https://gradiently.design/pt-br/guide/pastel-gradients) cobre toda a família, e [degradês lavanda](https://gradiently.design/pt-br/guide/lavender-gradient) pende mais para o roxo.

## Degradês orquídea e magenta

Aumente a saturação e o par fica glamouroso. É o território do esmalte, das pulseiras de festival e das capas de álbum. Use um leve ângulo ou um brilho radial em vez de uma diagonal chapada e deixe uma área mais calma para as palavras.

- De rosa-choque a violeta: `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`
- Orquídea em flor: `radial-gradient(circle at 70% 30%, #f0abfc 0%, #c026d3 45%, #6b21a8 100%)`
- Glamour de frutas vermelhas: `linear-gradient(160deg, #db2777 0%, #a21caf 60%, #581c87 100%)`
- Redemoinho iridescente: `conic-gradient(from 90deg at 40% 60%, #f472b6, #a855f7, #e879f9, #f472b6)`

Degradês saturados de rosa e roxo. O cônico parece um cintilar, próximo dos [degradês holográficos](https://gradiently.design/pt-br/guide/holographic-gradients).

## Entardecer: degradês escuros de rosa e roxo

Escureça o par e ele amadurece na hora. Uma base preto-ameixa com luz framboesa e violeta lembra o céu vinte minutos depois do pôr do sol ou um bar de coquetéis com luz baixa. São os mais versáteis do conjunto e sustentam texto branco ou rosa pálido com facilidade.

- Vinte minutos após o pôr do sol: `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`
- Brilho framboesa: `radial-gradient(circle at 80% 85%, #db2777 0%, #4a044e 40%, #12041a 80%)`
- De ameixa a rosa: `linear-gradient(135deg, #2e0a2f 0%, #6b21a8 55%, #f472b6 100%)`
- Luz de palco violeta: `radial-gradient(ellipse at 50% 0%, #a855f7 0%, #3b0764 45%, #0c0414 85%)`

Degradês escuros de rosa e roxo. Adicione um grão fino, porque as misturas escuras formam faixas primeiro.

Eles ficam perto dos [degradês de pôr do sol](https://gradiently.design/pt-br/guide/sunset-gradient) e dos [degradês de galáxia](https://gradiently.design/pt-br/guide/galaxy-gradient), e você pode pegar à vontade de qualquer um.

## Adicionando uma terceira cor sem turvar

A diagonal padrão do rosa-choque ao violeta está em todo lugar, então uma cor extra é o jeito mais rápido de torná-la sua. Escolha uma cor vizinha do rosa ou do roxo: laranja e coral ficam ao lado do rosa, azul e índigo ao lado do roxo. O verde fica oposto ao magenta, e é por isso que rosa com verde fica cinza no meio.

- Violeta, rosa, tangerina: `linear-gradient(120deg, #7c3aed 0%, #ec4899 55%, #fb923c 100%)`
- Hora azul: `linear-gradient(160deg, #1e3a8a 0%, #7e22ce 50%, #f472b6 100%)`
- Magenta com dourado: `radial-gradient(circle at 85% 15%, #fcd34d 0%, #a21caf 35%, #2e0a2f 80%)`

Três degradês rosa e roxo com uma terceira cor vizinha. Cada etapa continua saturada.

## Como escolher um degradê rosa e roxo para a sua marca

1. **Decida primeiro entre claro e escuro** A maior parte do clima vem da luminosidade. Uma mistura pálida diz gentileza; uma base ameixa diz noite. Escolha uma e mantenha-a em todo post.
2. **Escolha qual cor lidera** O rosa na frente parece mais quente e divertido. O roxo na frente parece mais frio e misterioso. Dê à cor líder cerca de dois terços da superfície.
3. **Planeje onde ficam as palavras** Ponha o título sobre a ponta mais escura e calma e o rosa mais vivo em um canto, para nunca brigar com o fundo pela atenção.
4. **Teste em todos os tamanhos** Uma mistura que funciona em um post quadrado pode jogar sua área mais clara atrás do texto em um story. Confira post, story e banner antes de se comprometer.

Se você posta com frequência, anote o resultado como uma receita curta: base, cor líder, acento, onde fica a luz. Essa única linha mantém um feed inteiro consistente, o que importa mais do que qualquer degradê bonito isolado. [Consistência de marca](https://gradiently.design/pt-br/guide/brand-consistency) vai além.

## Cores de texto em rosa e roxo

O rosa vivo é mais claro do que parece, então títulos brancos sobre rosa-choque são mais fracos do que as pessoas esperam. O violeta e o magenta sustentam bem o branco. Na ponta pálida, uma ameixa profunda é a tinta que mantém o design em uma só família. As razões são o contraste da WCAG; mire em 4,5:1 para texto pequeno e no mínimo 3:1 para títulos grandes. [Contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica os limites.

| Fundo | Texto | Contraste | Veredito |
| --- | --- | --- | --- |
| Rosa-choque `#ec4899` | Branco | 3,5:1 | Só títulos grandes |
| Rosa profundo `#db2777` | Branco | 4,6:1 | Bom |
| Magenta `#c026d3` | Branco | 4,7:1 | Bom |
| Violeta `#9333ea` | Branco | 5,4:1 | Bom |
| Chiclete `#f9a8d4` | Tinta ameixa `#3b0a3f` | 8,9:1 | Excelente |
| Tinta ameixa `#2e0a2f` | Chiclete `#f9a8d4` | 9,6:1 | Excelente, rosa como tinta |

Meça atrás de cada linha de texto, no ponto mais claro do degradê.

Post vertical de salão de unhas com letras brancas sobre um degradê saturado de rosa e violeta

Um post de salão de unhas em orquídea saturada, com tipografia branca no lado violeta.

Story vertical de balada com letras rosa pálido sobre um degradê ameixa escuro iluminado com framboesa embaixo

Um story de balada em ameixa de entardecer, com luz framboesa baixa no quadro.

## CSS de degradê rosa e roxo

```css
.dusk {
  background-color: #1e0b2e;
  background-image:
    radial-gradient(circle at 80% 85%, #db2777 0%, transparent 45%),
    linear-gradient(180deg in oklch, #1e0b2e 0%, #581c87 100%);
  color: #fce7f3;
}

.headline-gradient {
  background: linear-gradient(90deg, #ec4899, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Uma seção de entardecer com brilho framboesa e um título rosa a violeta usando texto com fundo recortado.

O texto em degradê é chamativo, mas use-o só em palavras de exibição curtas, nunca em texto corrido. [Texto com degradê em CSS](https://gradiently.design/pt-br/guide/css-gradient-text) cobre as alternativas. Se você quer um visual rosa e roxo que ninguém mais pode publicar, o Mercado do Gradiently permite pesquisar Marks por palavras de cor como “orquídea”. Cada Mark é único, e depois que você o reserva só você pode exportar com ele; ele também mantém a tipografia legível nas duas pontas da mistura por conta própria.

## FAQ

### Qual é um bom código de degradê rosa e roxo?

Um clássico é `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`. Para algo mais sombrio, experimente `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`.

### Rosa e roxo combinam?

Combinam. São vizinhos no círculo cromático, com o magenta entre eles, então se misturam de forma limpa em qualquer luminosidade.

### Que cor de texto vai sobre um degradê rosa e roxo?

O branco é bem lido sobre magenta, violeta e ameixa escura. No rosa-choque, use branco só em títulos grandes, e no rosa pálido ou no lilás use uma ameixa profunda como `#3b0a3f`.

### Como faço um degradê rosa e roxo parecer menos infantil?

Escureça ou aumente a saturação, use uma base ameixa e adicione uma terceira cor adulta, como dourado ou azul profundo, em uma área pequena.

### Que cor fica entre o rosa e o roxo?

O magenta, em torno de `#c026d3`, com a orquídea como versão mais clara.