Cor Magenta: código #FF00FF

Magenta

#FF00FF

Códigos da cor

  • HEX#FF00FF
  • RGBrgb(255, 0, 255)
  • HSLhsl(300, 100%, 50%)
  • HSVhsv(300, 100%, 100%)
  • CMYKcmyk(0%, 100%, 0%, 0%)
  • LABlab(60.3% 98.2 -60.8)
  • OKLCHoklch(70.2% 0.323 328.4)

Sobre a cor Magenta

Magenta tem o código HEX #FF00FF, que corresponde a rgb(255, 0, 255) no modelo RGB. No círculo cromático, seu matiz fica em 300°, com 100% de saturação e 50% de luminosidade (hsl(300, 100%, 50%)).

Pelo matiz, é percebida como uma cor fria: tende a transmitir calma e distância e a “recuar” visualmente na composição.

Como fundo, pede texto escuro: o preto atinge contraste de 6,69:1 sobre ela, contra 3,13:1 do branco.

Para impressão, a conversão aproximada é cmyk(0%, 100%, 0%, 0%). Confirme sempre com o perfil de cor da gráfica, porque o resultado depende do papel e da tinta.

Tons mais claros

Tons mais escuros

Combinações com Magenta

Complementar

#FF00FF · #00FF00

Análoga

#8000FF · #FF00FF · #FF0080

Tríade

#FF00FF · #FFFF00 · #00FFFF

Tetrádica

#FF00FF · #FF8000 · #00FF00 · #0080FF

Complementar dividida

#FF00FF · #80FF00 · #00FF80

Monocromática

#800080 · #CC00CC · #FF00FF · #FF4DFF · #FF99FF

Magenta com texto branco e preto

Texto branco Aa Bb Cc 123
3,13:1 · só texto grande
Texto preto Aa Bb Cc 123
6,69:1 · AA

Testar outras combinações no verificador de contraste

Uma cor que não está no arco-íris

O magenta (#FF00FF, rgb(255, 0, 255)) tem uma particularidade física: não existe um único comprimento de onda de luz que produza essa cor. Ele é chamado de cor não espectral, porque surge quando o olho recebe ao mesmo tempo luz das pontas opostas do espectro, vermelho e azul, sem o verde do meio. Na tela, é exatamente isso que acontece: vermelho e azul no máximo, verde zerado.

Magenta × fúcsia, e o magenta da gráfica

No CSS, magenta e fuchsia são o mesmo valor, #FF00FF; a diferença é só de nome. Fora da tela, os termos variam: em moda, “fúcsia” costuma designar um rosa-arroxeado vibrante, e “magenta” pode ser mais frio ou mais escuro, conforme a marca.

A confusão maior é com o magenta da impressão. O M do CMYK é uma tinta de processo, com tom próximo a um rosa intenso, bem diferente do #FF00FF da tela. Ao converter o magenta RGB para CMYK, o resultado impresso fica visivelmente menos elétrico, porque esse tom está fora da gama que as tintas conseguem reproduzir. Se o projeto depende desse brilho, avise o cliente ou considere uma tinta especial. O guia RGB × CMYK explica o motivo em detalhe.

Usos e associações

O magenta costuma ser lido como ousado, criativo, pop e não convencional. Aparece em marcas de tecnologia, entretenimento, música e moda que querem se afastar dos azuis corporativos. Em interfaces, é forte demais para grandes áreas, mas excelente para chamar atenção a um único elemento: um selo, uma notificação, um cursor de destaque em gráfico. Em decoração, funciona em doses pequenas, como uma poltrona ou um quadro. Essas leituras são contextuais: o mesmo tom pode parecer festivo numa marca de cosméticos e deslocado num banco.

Combina com preto (#000000) para impacto máximo; com turquesa (#40E0D0) para uma paleta anos 80; com amarelo (#FFFF00) para um visual pop art; e com cinza-chumbo (#36454F) para equilibrar com sobriedade.

Dica: texto e modo escuro

Texto branco sobre #FF00FF tem contraste de 3,1:1, aceitável só para títulos grandes. Para botões com texto pequeno, escureça para algo como #A300A3 (6,8:1). No modo escuro, o magenta puro já tem quase 6:1 sobre #121212, mas pode vibrar demais; reduzir um pouco a saturação cansa menos a vista. Teste no verificador de contraste.

Como usar em CSS

:root {
  --color-magenta: #FF00FF;
  --color-magenta-rgb: 255, 0, 255;
}

.elemento {
  background-color: var(--color-magenta);
  color: #000000;
}

Cores parecidas

Use Magenta nas ferramentas