# Códigos de degradê rosa e roxo, do doce ao crepúsculo

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

O rosa e o roxo podem ser açucarados, glamorosos ou discretamente sombrios, consoante a luminosidade e a saturação. Eis os códigos para cada passo dessa gama 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, por isso a transição fica viva sem cor de ponte.
- O mesmo par lê-se como doce quando é pálido, como glamour quando é saturado e como crepúsculo quando é escuro.
- O texto branco falha sobre rosa vivo e lilás pálido, por isso usa aí uma tinta ameixa profunda e guarda o branco para magenta, violeta e fundos escuros.
- Acrescentar uma pequena quantidade de laranja, azul ou dourado a um degradê rosa e roxo torna-o muito menos previsível do que a mistura padrão de duas cores.
- O rosa e o roxo servem beleza, vida noturna, música, celebrações e marcas de criadores, e um fundo escuro evita que pareçam infantis.

Um **degradê rosa e roxo** mistura dois vizinhos na roda de cores, um rosa como `#ec4899` e um violeta como `#9333ea`, com magenta e orquídea pelo meio. Como os matizes são adjacentes, a mistura mantém-se viva de ponta a ponta. O que muda tudo é a luminosidade: mantém-na pálida e obténs algodão-doce, aumenta a saturação e obténs glamour, escurece-a e obténs crepúsculo. Os códigos abaixo vão do claro ao escuro, para escolheres primeiro o ambiente e depois os valores hex.

## Ambientes do degradê rosa e roxo num relance

| Ambiente | Paragens típicas | Sensação | Serve para |
| --- | --- | --- | --- |
| Doce | `#fbcfe8` a `#e9d5ff` | Doce, suave, jovem | Pastelarias, chás de bebé, papelaria |
| Orquídea | `#f0abfc` a `#c084fc` | Sonhador, romântico | Beleza, casamentos, bem-estar |
| Magenta | `#ec4899` a `#9333ea` | Ousado, glamoroso | Vida noturna, música, criadores |
| Crepúsculo | `#2e0a2f` a `#9d174d` | Sombrio, adulto | Fragrâncias, cocktails, eventos tardios |

Quatro ambientes a partir de um só par. Cada passo da tabela é mais escuro ou mais saturado do que o anterior.

- Rosa doce: #fbcfe8
- Pastilha elástica: #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 precisas para o texto.

## Degradês rosa doce e roxo

Rosas e lilases pálidos juntos são o mais suave que a cor consegue ser. Servem tudo o que seja doce ou delicado, mas podem resvalar depressa para o infantil. A solução é um fundo ligeiramente quente, um pêssego ou creme numa das pontas, e texto escuro muito seguro.

- 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 compostas em tinta ameixa profunda. O pêssego da terceira impede-a de parecer açucarada.

Para mais desta suavidade, os [degradês pastel](https://gradiently.design/pt-pt/guide/pastel-gradients) cobrem toda a família, e os [degradês de alfazema](https://gradiently.design/pt-pt/guide/lavender-gradient) inclinam-se mais para o roxo.

## Degradês orquídea e magenta

Sobe a saturação e o par torna-se glamoroso. É o território do verniz de unhas, das pulseiras de festival e das capas de álbuns. Usa um ligeiro ângulo ou um brilho radial em vez de uma diagonal plana e deixa uma zona mais calma para as palavras.

- Rosa-choque a violeta: `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`
- Flor de orquídea: `radial-gradient(circle at 70% 30%, #f0abfc 0%, #c026d3 45%, #6b21a8 100%)`
- Glamour de bagas: `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 lê-se como um brilho, próximo dos [degradês holográficos](https://gradiently.design/pt-pt/guide/holographic-gradients).

## Crepúsculo: degradês rosa e roxo escuros

Escurece o par e ele cresce de imediato. Um fundo preto ameixa com luz de framboesa e violeta lê-se como o céu vinte minutos depois do pôr do sol, ou um bar de cocktails com luz baixa. São os mais versáteis do conjunto e levam facilmente texto branco ou rosa pálido.

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

Degradês escuros de rosa e roxo. Acrescenta um grão fino, porque as misturas escuras são as primeiras a fazer banding.

Estes ficam perto dos [degradês de pôr do sol](https://gradiently.design/pt-pt/guide/sunset-gradient) e dos [degradês de galáxia](https://gradiently.design/pt-pt/guide/galaxy-gradient), e podes pedir emprestado livremente a qualquer um.

## Acrescentar uma terceira cor sem turvar

A diagonal padrão de rosa-choque a violeta está em todo o lado, por isso uma cor extra é a forma mais rápida de a tornares tua. Escolhe 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 o rosa para verde fica cinzento 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 de rosa e roxo com uma terceira cor vizinha. Cada passo se mantém saturado.

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

1. **Decide primeiro claro ou escuro** Grande parte do ambiente vem da luminosidade. Uma mistura pálida diz delicado; um fundo ameixa diz noite. Escolhe um e mantém-no em todas as publicações.
2. **Escolhe que cor lidera** O rosa a liderar parece mais quente e divertido. O roxo a liderar parece mais frio e misterioso. Dá ao líder cerca de dois terços da superfície.
3. **Planeia onde ficam as palavras** Põe o título sobre a ponta mais escura e calma e o rosa mais vivo num canto, para nunca competires com o fundo pela atenção.
4. **Testa-o em todos os tamanhos** Uma mistura que funciona numa publicação quadrada pode pôr a zona mais brilhante atrás do texto num story. Verifica publicação, story e banner antes de te comprometeres.

Se publicas com frequência, escreve o resultado como uma receita curta: base, cor principal, acento, onde fica a luz. Essa linha mantém um feed inteiro coerente, o que importa mais do que qualquer degradê bonito isolado. O artigo [coerência de marca](https://gradiently.design/pt-pt/guide/brand-consistency) vai mais longe.

## Cores de texto sobre rosa e roxo

O rosa vivo é mais claro do que parece, por isso os títulos brancos sobre rosa-choque são mais fracos do que se espera. O violeta e o magenta levam bem o branco. Na ponta pálida, uma ameixa profunda é a tinta que mantém o design numa só família. Os rácios são contraste WCAG; aponta a 4,5:1 para texto pequeno e a 3:1 no mínimo para títulos grandes. O artigo [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica os limiares.

| 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 |
| Pastilha elástica `#f9a8d4` | Tinta ameixa `#3b0a3f` | 8,9:1 | Excelente |
| Tinta ameixa `#2e0a2f` | Pastilha elástica `#f9a8d4` | 9,6:1 | Excelente, o rosa como tinta |

Mede por trás de cada linha de texto, no ponto mais claro do degradê.

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

Uma publicação de salão de unhas em orquídea saturada, texto branco do lado violeta.

Story vertical de noite de clube com letras rosa pálido sobre um degradê ameixa escura iluminado com framboesa em baixo

Um story de noite de clube em ameixa crepuscular com luz de framboesa em baixo 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 secção crepuscular com brilho de framboesa e um título de rosa a violeta com texto de fundo recortado.

O texto em degradê é marcante, mas usa-o só em palavras curtas de destaque, nunca em texto corrente. O artigo [texto em degradê com CSS](https://gradiently.design/pt-pt/guide/css-gradient-text) trata das alternativas. Se queres um visual rosa e roxo que mais ninguém possa publicar, o Mercado da Gradiently deixa-te procurar Marks por palavras de cor como “orquídea”. Cada Mark é único e, depois de o reservares, só tu podes exportar com ele; também mantém o texto legível nas duas pontas da mistura por si só.

## 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, experimenta `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`.

### O rosa e o roxo combinam?

Sim. São vizinhos na roda de cores, com o magenta entre eles, por isso misturam-se limpos em qualquer luminosidade.

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

O branco lê-se bem sobre magenta, violeta e ameixa escura. Sobre rosa-choque usa o branco só em títulos grandes, e sobre rosa pálido ou lilás usa uma ameixa profunda como `#3b0a3f`.

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

Escurece-o ou torna-o mais saturado, usa um fundo ameixa e acrescenta uma terceira cor adulta, como dourado ou azul profundo, numa área pequena.

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

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