# Gradientes rosa com ar moderno, sem serem enjoativos

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

O rosa pode parecer uma loja de doces ou uma revista de moda. A diferença raramente está no rosa em si; está no que pões ao lado dele. Aqui tens paletas, combinações e códigos para um rosa atual.

## The short version

- Um gradiente rosa mistura tons de rosa, do blush pálido e do rosa velho ao coral e ao rosa-choque, muitas vezes com um pêssego, um vermelho ou um violeta vizinho.
- O rosa fica enjoativo quando é pálido, saturado e acompanhado só de outros pastéis, e moderno quando é combinado com um tom profundo.
- Parceiros profundos como o bordô escuro, o azul-marinho, o verde-floresta e o quase preto dão contraste ao rosa e um ar editorial.
- O texto branco funciona em rosas profundos como #be185d, mas fica abaixo do contraste de texto corrido em rosas mais vivos como #ec4899.
- Os rosas velhos, ligeiramente acinzentados, parecem mais adultos do que os rosas de rebuçado puros, e ficam bem a marcas de moda, beleza e cultura.

Um **gradiente rosa** mistura tons de rosa, do blush pálido e do rosa velho ao rosa-choque e à framboesa, passando pelo coral, muitas vezes com um pêssego, um vermelho ou um violeta vizinho. O rosa vive um longo momento na moda, na beleza, na comida e na cultura, mas tem uma forma bem conhecida de falhar: pálido demais, doce demais, açucarado demais. A solução é quase sempre o contraste. Junta o rosa a algo profundo e ele torna-se afirmativo e editorial. Seguem-se paletas, combinações e códigos CSS para gradientes rosa com ar moderno.

## A gama dos rosas

O rosa é um vermelho mais claro, mas a família é vasta. O blush e o rosa velho são suaves e ligeiramente acinzentados, o que lhes dá um ar calmo e adulto. O coral e o salmão puxam para o laranja e são quentes e solares. O rosa-choque e o fúchsia puxam para o violeta e são ruidosos e brincalhões. A framboesa e o tom de baga são profundos o suficiente para levar texto branco.

- Blush: #fbe4e4
- Rosa velho: #e8b4b8
- Salmão: #f9a28b
- Rosa coral: #fb7185
- Rosa-choque: #ec4899
- Fúchsia: #c026d3
- Framboesa: #be185d
- Baga: #831843

Oito rosas, do mais pálido ao mais profundo. Suaves e acinzentados à esquerda, ruidosos ao meio, profundos à direita.

O rosa que escolhes define o tom antes de qualquer outra coisa:

- **Beleza e cuidados de pele:** blush e rosa velho, muitas vezes com creme e um castanho quente.
- **Moda e edição:** rosa velho ou rosa-choque contra preto, azul-marinho ou bordô escuro.
- **Comida e bebida:** coral, salmão e framboesa, as cores da fruta e do sorvete.
- **Música e vida noturna:** rosa-choque e fúchsia a brilhar sobre quase preto.
- **Casamentos e papelaria:** blush e rosa sobre papel quente, com pormenores em verde profundo ou bordô.

Os rosas pálidos sobrepõem-se à família mais ampla dos pastéis; [gradientes pastel](https://gradiently.design/pt-pt/guide/pastel-gradients) explica como os manter frescos em vários tons.

## Porque é que o rosa fica enjoativo

### Enjoativo

- Rosa pálido misturado com azul-bebé ou lilás
- Todas as cores em pastel, nada escuro
- Rosa de rebuçado puro e vivo, sem cinzento nenhum
- Letra arredondada e balofa no mesmo rosa

### Moderno

- Rosa contra um tom profundo
- Um escuro forte para o texto e para dar peso
- Rosas velhos, ligeiramente esbatidos
- Letra nítida em quase preto ou creme

Nenhuma das escolhas enjoativas está errada por si; as marcas infantis e de confeitaria usam-nas de propósito. Mas se queres que o rosa se leia como confiante e não como fofo, precisas de peso algures no design, e uma cor parceira profunda é a forma mais rápida de o conseguir.

## Gradientes rosa suaves

Os rosas suaves são calmos, quentes e táteis. Ficam bem a cuidados de pele, papelaria, casamentos e bem-estar. Mantém-nos ligeiramente esbatidos em vez de vivos e usa tinta escura para o texto.

- Papel blush: `linear-gradient(135deg, #fdf2f0 0%, #f6cfd2 100%)`
- Rosa velho: `linear-gradient(160deg, #f5e1dc 0%, #e8b4b8 55%, #c98b95 100%)`
- Rosa a alperce: `linear-gradient(135deg, #fde2e4 0%, #fed7aa 100%)`
- Brilho de pétala: `radial-gradient(circle at 30% 30%, #fff1f2 0%, #fbcfe8 45%, #e9a6c0 100%)`

Gradientes rosa suaves. O alperce e o rosa esbatido mantêm-nos quentes sem açúcar.

## Rosa com tons profundos

É aqui que o rosa se torna editorial. Um parceiro profundo dá ao rosa algo contra o qual brilhar e dá à letra um lugar sólido onde assentar. As combinações abaixo são comuns na moda, na edição e na hotelaria por boas razões.

- Bordô escuro a rosa: `linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%)`
- Azul-marinho a rosa: `linear-gradient(160deg, #0f1a33 0%, #3a2a5c 50%, #f9a8c2 100%)`
- Floresta e rosa, em divisão: `linear-gradient(90deg, #14352a 0% 50%, #f7b6c2 50% 100%)`
- Cacau a rosa: `linear-gradient(160deg, #1c1210 0%, #4a2c25 50%, #e9a8a0 100%)`
- Luz rosa sobre preto: `radial-gradient(circle at 70% 80%, #ff7ab8 0%, #7a1f4b 40%, #0d0508 80%)`
- Ameixa a framboesa: `linear-gradient(135deg, #3b0764 0%, #9d174d 55%, #fda4af 100%)`

Rosa com parceiros profundos. A combinação com verde-floresta usa uma divisão nítida porque o rosa e o verde são quase opostos e a mistura daria cinzento.

O verde e o rosa ficam quase em lados opostos do círculo cromático, por isso fazem um par marcante e uma má mistura. Mantém-nos em áreas separadas, como na divisão acima. [Cores complementares](https://gradiently.design/pt-pt/guide/complementary-colors) explica porque é que os opostos ficam cinzentos quando se misturam.

## Gradientes de rosa forte e rosa-choque

Os rosas-choque são as cores mais ruidosas da família. Ficam bem a música, vida noturna, momentos de saldos e marcas que querem ser vistas do outro lado de uma sala. Mistura-os na direção do laranja ou do violeta, nunca do verde ou do azul-petróleo.

- Rosa a tangerina: `linear-gradient(135deg, #db2777 0%, #f97316 100%)`
- Ascensão framboesa: `linear-gradient(135deg, #be185d 0%, #ec4899 50%, #f9a8d4 100%)`
- Violeta a rosa: `linear-gradient(135deg, #7c3aed 0%, #ec4899 100%)`
- Pôr do sol rosa: `linear-gradient(180deg, #ff4d8d 0%, #ff8a5c 60%, #ffd29d 100%)`

Gradientes rosa vivos. Cada um mistura-se com um vizinho quente ou violeta, por isso o meio mantém-se luminoso.

O violeta a rosa é um dos gradientes mais familiares da internet. Se o usares, torna-o teu com uma base profunda, um realce quente ou grão. O guia de [gradientes roxos](https://gradiently.design/pt-pt/guide/purple-gradient) tem mais sobre isso.

## O rosa no design editorial

Uma capa editorial vertical com o título O número da suavidade sobre um gradiente em tons de rosa

O rosa como capa de revista: campo calmo, letra confiante.

Uma publicação quadrada de citação com letra escura sobre um gradiente suave

Uma publicação de citação em que a letra escura dá peso ao rosa.

O rosa editorial funciona porque trata a cor como uma base e não como decoração. Um único campo grande, espaço generoso, letra serifada ou grotesca bem definida em quase preto ou creme, e um pormenor numa cor parceira profunda. [Design editorial para redes sociais](https://gradiently.design/pt-pt/guide/editorial-design-for-social) explica os recursos em pormenor.

## Texto sobre gradientes rosa

| Texto sobre fundo | Contraste | Veredicto |
| --- | --- | --- |
| Branco sobre `#831843` | 9,7:1 | Excelente |
| Branco sobre `#be185d` | 6,0:1 | Bom para texto corrido |
| Branco sobre `#db2777` | 4,6:1 | Passa à justa para texto corrido |
| Branco sobre `#ec4899` | 3,5:1 | Só texto grande |
| `#3b0a1e` sobre `#f472b6` | 6,4:1 | A tinta escura funciona aqui |
| `#1f2a44` sobre `#f9c6d0` | 9,5:1 | Azul-marinho sobre rosa: excelente |

Rácios de contraste WCAG, calculados. O texto corrido precisa de 4,5:1, o texto grande de 3:1.

```css
.cover {
  background-color: #2a0a12;
  background-image: linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%);
  color: #fdf2f0;
}
```

Bordô escuro a rosa, com texto creme. Põe as palavras na parte superior, mais escura, do campo.

Num gradiente, verifica sempre o contraste onde o rosa é mais claro por trás do texto. [Texto sobre um gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) mostra como encontrar a zona calma.

## FAQ

### Que cores combinam com o rosa num gradiente?

O pêssego, o coral, o vermelho e o violeta misturam-se de forma limpa com o rosa. Para contraste, junta o rosa a tons profundos como o bordô escuro, o azul-marinho, o cacau ou o quase preto. Mantém o verde numa área separada, porque rosa e verde misturados dão cinzento.

### Como faço o rosa parecer menos infantil?

Usa rosas velhos ou profundos em vez de rosa de rebuçado vivo, junta uma cor parceira profunda e compõe a letra em quase preto ou creme em vez de noutro rosa.

### Que cor de texto funciona num gradiente rosa?

O branco funciona em rosas profundos como a framboesa e o tom de baga. Em rosas mais claros, usa uma tinta escura, como um bordô profundo ou um azul-marinho.

### Qual é o CSS de um gradiente rosa?

Por exemplo, linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%) dá um gradiente de bordô escuro a rosa. Todas as paletas desta página podem ser copiadas como CSS.