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

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

O magenta é uma das cores mais fortes numa tela e uma das mais difíceis de domar. Estes códigos mostram onde ele fica entre o rosa e o roxo, com o que misturá-lo e o que acontece quando vai para a impressão.

## The short version

- O magenta fica a 300 graus na 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.
- Nas telas, o magenta puro é `#ff00ff`, o mesmo valor que o CSS chama de fuchsia.
- O magenta se mistura bem com violeta, azul, laranja e ciano, mas vira cinza quando misturado direto com verde.
- O magenta de impressão é bem menos intenso que o magenta de tela, então gradientes magenta brilhantes parecem mais opacos no papel.
- Texto branco sobre magenta puro chega a apenas cerca de 3,1 para 1 de contraste, o bastante 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 clima cibernético ou quase preto para dar profundidade. O magenta puro de tela é `#ff00ff`, e é tão intenso que o gradiente costuma funcionar melhor quando o magenta é uma ponta da mistura, e não ela inteira. Os códigos abaixo cobrem cada direção, com notas sobre texto e sobre como o magenta se comporta na impressão.

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

Na roda de cores HSL, o magenta fica a 300 graus, exatamente entre o vermelho e o azul. Deslize para o vermelho e ele vira rosa-choque; deslize para o azul e vira roxo e depois violeta. O magenta também é famoso por não aparecer no arco-íris: não existe um único comprimento de onda de luz para ele, e o olho o percebe quando recebe luz vermelha e azul juntas. Isso explica em parte por que ele parece tão artificial e elétrico.

| Cor | Hex | Tende a | Transmite |
| --- | --- | --- | --- |
| Violeta | `#7c3aed` | Azul | Calma, criatividade |
| Roxo | `#a21caf` | Um pouco de azul | Riqueza, realeza |
| Magenta | `#ff00ff` | Nenhum dos dois | Elétrico, forte |
| Magenta quente | `#e6007e` | Um pouco de vermelho | Ousadia, moda |
| Rosa-choque | `#ff4fa3` | Vermelho | Divertido, caloroso |

A vizinhança do magenta. Um gradiente magenta costuma tomar uma destas como segunda parada.

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

O magenta e seus melhores parceiros. Ultravioleta, tangerina e ciano o empurram, cada um, numa direção totalmente diferente.

Se o que você quer é algo mais suave e quente, mais perto de chiclete ou rosa-antigo do que de neon, a coleção de [gradiente rosa](https://gradiently.design/pt-br/guide/pink-gradient) é um ponto de partida melhor. O magenta ganha seu lugar quando você quer uma cor que ninguém consiga ignorar na rolagem.

## Códigos de gradiente magenta elétrico

Magenta indo para violeta ou azul é o par elétrico clássico. Ele anda pela roda de cores sem cruzar nada turvo, então a mistura continua vívida até o fim. Combina com música, vida noturna, games e ferramentas criativas. Se você quer essa direção com mais azul do que magenta, os códigos de [gradiente roxo](https://gradiently.design/pt-br/guide/purple-gradient) assumem.

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

Magentas frios. O magenta ao ciano passa por um suave azul-pervinca no meio, e por isso nunca fica cinza.

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

Gire para o outro lado da roda e o magenta esquenta: passa pelo rosa-choque e chega 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 parada escura no topo o transforma num entardecer. [Cores vaporwave](https://gradiently.design/pt-br/guide/vaporwave-colors) vai mais fundo nesse universo.

- Magenta à 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. Deixe o laranja como a ponta mais clara, para que o ponto mais brilhante seja quente e o mais profundo seja magenta.

## Magenta profundo sobre fundos escuros

O magenta parece mais caro quando brilha saindo da escuridão em vez de preencher o quadro. Um fundo vinho ou ameixa com uma luz magenta passa moda de luxo ou um bar de madrugada; espalhado por um cartaz inteiro, o mesmo magenta parece folheto de liquidação. Fundos escuros também dão ao texto branco um lar fácil.

- 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 você escolhe quando quer que o magenta pareça premium em vez de berrante.

> **Evite magenta com verde** O verde fica exatamente oposto ao magenta, e uma mistura direta entre eles passa por cinza no meio. Se quiser os dois, deixe que se encontrem numa borda nítida ou mantenha o verde como um pequeno acento. [Gradientes turvos](https://gradiently.design/pt-br/guide/muddy-gradients) mostra por quê.

## Magenta na tela e na impressão

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

### Magenta de tela

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

### Magenta de impressão

- Feito de tinta sobre papel
- Mais perto de `#ec008c`, nitidamente mais opaco
- Fundos escuros podem imprimir turvos
- Para um neon de verdade, as gráficas oferecem tintas especiais fluorescentes

## Texto sobre um gradiente magenta

O magenta é mais claro do que parece. Texto branco sobre `#ff00ff` puro chega a apenas cerca de 3,1 para 1 de contraste, 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 pesa. Na prática, ponha o texto branco na ponta mais profunda do gradiente ou escureça o magenta atrás das palavras pequenas para algo como `#a3006f`.

Em sites, o magenta também faz um título em gradiente marcante. Mantenha-o em tamanhos grandes de destaque, onde o contraste se sustenta, como descrito em [texto com gradiente em CSS](https://gradiently.design/pt-br/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 do magenta ao ultravioleta. Use numa página branca ou bem clara: ali o magenta chega a cerca de 3,1 para 1 e o ultravioleta a cerca de 7 para 1, enquanto a ponta violeta quase some no preto.

Um story vertical com fundo magenta e violeta vívido e as palavras Portas às dez em branco

Um story de noite de clube num Mark magenta. As palavras ficam na área mais escura, onde o texto branco fica à vontade.

Cores fortes são exatamente onde um fundo que responde às suas palavras mais ajuda. No Gradiently, um Mark magenta aprofunda a cor perto das letras e mantém sua parte mais calma atrás do título, então o brilho continua e as palavras ainda se leem. Para a prima mais fria do magenta, veja os códigos de [gradiente ciano](https://gradiently.design/pt-br/guide/cyan-gradient).

## FAQ

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

Nas telas, o magenta puro é #ff00ff, que o CSS também chama de fuchsia. O magenta de impressão é mais opaco e costuma ser mostrado na tela 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 ao vermelho e o roxo tende ao azul.

### Que cores combinam com um gradiente magenta?

Violeta, azul elétrico, ciano, laranja e quase preto se misturam bem com o magenta. Evite misturá-lo direto com verde, que vira cinza.

### Posso usar texto branco sobre magenta?

Sobre #ff00ff puro, o branco chega a cerca de 3,1 para 1 de contraste, então limite-o a títulos grandes. Use um magenta mais profundo atrás de texto branco menor.

### Por que meu magenta fica opaco quando impresso?

As tintas de impressão não reproduzem a intensidade do magenta de tela. Espere uma cor mais suave, peça uma prova ou pergunte à gráfica sobre tinta rosa fluorescente.