# Gradiente magenta: códigos elétricos entre o rosa e o roxo

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

O magenta é uma das cores mais intensas num ecrã e das mais difíceis de domar. Estes códigos mostram onde ele fica entre o rosa e o roxo, com que o misturar e o que acontece quando vai para impressão.

## The short version

- O magenta fica nos 300 graus da roda de cores HSL, a meio caminho entre o vermelho e o azul, e por isso não se lê nem como rosa nem como roxo.
- Nos ecrãs, o magenta puro é `#ff00ff`, o mesmo valor a que o CSS chama fuchsia.
- O magenta mistura-se bem com violeta, azul, laranja e ciano, mas fica cinzento quando se mistura diretamente com verde.
- O magenta de impressão é muito menos intenso do que o de ecrã, por isso os gradientes magenta vivos ficam mais baços em papel.
- Texto branco sobre magenta puro só atinge um contraste de cerca de 3,1 para 1, suficiente para títulos grandes mas não para texto pequeno.

Um **gradiente magenta** mistura a cor vívida entre o rosa e o roxo com uma vizinha: violeta para algo elétrico, laranja para calor, ciano para um ar cibernético, ou quase preto para profundidade. O magenta puro de ecrã é `#ff00ff` e é tão intenso que o gradiente costuma funcionar melhor quando o magenta é uma ponta da mistura e não o todo. Os códigos abaixo cobrem cada direção, com notas sobre texto e sobre o comportamento do magenta na impressão.

## Magenta, rosa e roxo: onde fica a fronteira

Na roda de cores HSL, o magenta fica nos 300 graus, exatamente entre o vermelho e o azul. Desliza para o vermelho e torna-se rosa-choque; desliza para o azul e torna-se roxo e depois violeta. O magenta é também famoso por não aparecer no arco-íris: não há um único comprimento de onda de luz para ele, e o olho percebe-o quando recebe luz vermelha e azul em conjunto. É em parte por isso que parece tão artificial e elétrico.

| Cor | Hex | Tende para | Sensação |
| --- | --- | --- | --- |
| Violeta | `#7c3aed` | Azul | Calma, criativa |
| Roxo | `#a21caf` | Ligeiramente azul | Rica, majestosa |
| Magenta | `#ff00ff` | Nenhum | Elétrica, intensa |
| Magenta quente | `#e6007e` | Ligeiramente vermelho | Ousada, da moda |
| Rosa-choque | `#ff4fa3` | Vermelho | Brincalhona, quente |

A vizinhança do magenta. Um gradiente magenta costuma pedir emprestada uma destas cores como segunda paragem.

- Magenta de ecrã: #ff00ff
- Magenta elétrico: #e600e6
- Magenta profundo: #a3006f
- Vinho: #5c0045
- Orquídea: #f3a6f0
- Ultravioleta: #6a00f4
- Tangerina: #ff8a3d
- Ciano: #00e5ff

O magenta e os seus melhores parceiros. Ultravioleta, tangerina e ciano empurram-no cada um para uma direção completamente diferente.

Se o que procuras é algo mais suave e quente, mais perto do chiclete ou da rosa do que do néon, a coleção de [gradiente rosa](https://gradiently.design/pt-pt/guide/pink-gradient) é um melhor ponto de partida. O magenta justifica-se quando queres uma cor por que ninguém consiga passar sem olhar.

## Códigos de gradiente magenta elétrico

Do magenta ao violeta ou ao azul é o par elétrico clássico. Move-se ao longo da roda de cores sem atravessar nada turvo, por isso a mistura mantém-se vívida até ao fim. Ficam bem em música, vida noturna, jogos e ferramentas criativas. Se queres esta direção com mais azul do que magenta, tomam o lugar os códigos de [gradiente roxo](https://gradiently.design/pt-pt/guide/purple-gradient).

- Magenta a ultravioleta: `linear-gradient(135deg, #ff00ff 0%, #b100e8 50%, #6a00f4 100%)`
- Magenta a azul elétrico: `linear-gradient(135deg, #ff1fd1 0%, #a83cff 50%, #3a5bff 100%)`
- Magenta a ciano: `linear-gradient(135deg, #ff00ff 0%, #8f6bff 50%, #00e5ff 100%)`
- Orquídea pastel: `linear-gradient(135deg, #ffd6fb 0%, #f3a6f0 50%, #d68cf5 100%)`

Magentas frios. O magenta a ciano passa por um pervinca suave no meio, e é por isso que nunca fica cinzento.

## Códigos de magenta quente e pôr do sol

Vira para o outro lado da roda e o magenta aquece: passa pelo rosa-choque até ao coral e ao laranja. É o visual dos gráficos do fim dos anos 1980, do synthwave e do vaporwave, e de muitos cartazes de festivais de verão. Uma paragem superior escura transforma-o num entardecer. [Cores vaporwave](https://gradiently.design/pt-pt/guide/vaporwave-colors) aprofunda esse mundo.

- Magenta a tangerina: `linear-gradient(135deg, #e600e6 0%, #ff2e8a 45%, #ff8a3d 100%)`
- Entardecer magenta: `linear-gradient(180deg, #2a0a4a 0%, #a3007d 45%, #ff3d8b 75%, #ffb36b 100%)`

Magentas quentes. Deixa o laranja como ponta mais clara, para que o ponto mais brilhante seja quente e o mais profundo seja magenta.

## Magenta profundo em fundos escuros

O magenta parece mais caro quando brilha a sair da escuridão em vez de encher o formato. Um fundo vinho ou ameixa com uma luz magenta lê-se como moda de luxo ou um bar de fim de noite; espalhado por um cartaz inteiro, o mesmo magenta lê-se como um folheto de descontos. Os fundos escuros dão também uma casa fácil ao texto branco.

- Magenta profundo: `linear-gradient(160deg, #1a0012 0%, #5c0045 50%, #a3006f 100%)`
- Brilho magenta sobre preto: `radial-gradient(circle at 70% 30%, #ff3df5 0%, #a1009b 35%, #3d0040 70%, #12000f 100%)`

Magentas escuros. A versão com brilho é a que convém quando queres que o magenta pareça premium e não berrante.

> **Evita magenta a verde** O verde fica diretamente oposto ao magenta, e uma mistura direta entre os dois passa por cinzento no meio. Se queres ambos, deixa-os encontrar-se com uma aresta nítida ou mantém o verde como um pequeno acento. [Gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients) mostra porquê.

## Magenta no ecrã e na impressão

O magenta de ecrã é feito de luz, enquanto o de impressão é tinta, uma das quatro cores de processo do CMYK. O magenta de processo é muito menos intenso, normalmente mostrado no ecrã como cerca de `#ec008c`. Assim, um gradiente magenta que brilha no teu monitor pode parecer liso e rosado num folheto. [RGB vs CMYK](https://gradiently.design/pt-pt/guide/rgb-vs-cmyk) explica a diferença, e [gradientes para impressão](https://gradiently.design/pt-pt/guide/print-gradients) trata das provas.

### Magenta de ecrã

- Feito de luz vermelha e azul
- Valor puro `#ff00ff`, extremamente vívido
- Brilha em fundos escuros
- Funciona para visuais néon e elétricos

### Magenta de impressão

- Feito de tinta sobre papel
- Mais próximo de `#ec008c`, claramente mais baço
- Os fundos escuros podem imprimir turvos
- Para néon a sério, as gráficas oferecem tintas diretas fluorescentes

## Texto sobre um gradiente magenta

O magenta é mais brilhante do que parece. Texto branco sobre `#ff00ff` puro só atinge um contraste de cerca de 3,1 para 1, o que serve para títulos grandes mas não para texto pequeno. O preto sobre o mesmo magenta chega a cerca de 6,7 para 1, mas parece pesado. Na prática, põe o texto branco na ponta mais profunda do gradiente, ou escurece o magenta por trás das palavras pequenas para algo como `#a3006f`.

Em sites, o magenta faz também um título em gradiente de grande efeito. Mantém-no em tamanhos de display grandes, onde o contraste aguenta, como se descreve em [texto com gradiente em CSS](https://gradiently.design/pt-pt/guide/css-gradient-text).

```css
.headline {
  font-size: clamp(2.5rem, 6vw, 5rem);
  background: linear-gradient(90deg, #ff00ff 0%, #6a00f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Um título de magenta a ultravioleta. Usa-o numa página branca ou muito clara: o magenta chega aí a cerca de 3,1 para 1 e o ultravioleta a cerca de 7 para 1, enquanto a ponta violeta quase desaparece sobre preto.

Story vertical com um fundo magenta e violeta vívido e as palavras Portas às dez a branco

Um story de noite de clube num Mark magenta. As palavras ficam na zona mais escura, onde o texto branco se lê com conforto.

As cores intensas são exatamente onde um fundo que responde às tuas palavras mais ajuda. No Gradiently, um Mark magenta aprofunda a cor junto às letras e mantém a sua parte mais calma por trás do título, para que o brilho fique e as palavras se continuem a ler. Para a prima mais fria do magenta, vê os códigos de [gradiente ciano](https://gradiently.design/pt-pt/guide/cyan-gradient).

## FAQ

### Qual é o código hex do magenta?

Nos ecrãs, o magenta puro é #ff00ff, a que o CSS também chama fuchsia. O magenta de impressão é mais baço e costuma ser mostrado no ecrã como cerca de #ec008c.

### O magenta é rosa ou roxo?

Nenhum dos dois. Fica exatamente entre o vermelho e o azul na roda de cores; o rosa-choque tende para o vermelho e o roxo tende para o azul.

### Que cores combinam com um gradiente magenta?

Violeta, azul elétrico, ciano, laranja e quase preto misturam-se bem com o magenta. Evita misturá-lo diretamente com verde, que fica cinzento.

### Posso usar texto branco sobre magenta?

Sobre #ff00ff puro, o branco atinge um contraste de cerca de 3,1 para 1, por isso limita-o a títulos grandes. Usa um magenta mais profundo por trás de texto branco mais pequeno.

### Porque é que o meu magenta fica baço quando imprimo?

As tintas de impressão não conseguem reproduzir a intensidade do magenta de ecrã. Espera uma cor mais suave, pede uma prova ou pergunta à tua gráfica por tinta rosa fluorescente.