Cor Amarelo: código #FFFF00

Amarelo

#FFFF00

Códigos da cor

  • HEX#FFFF00
  • RGBrgb(255, 255, 0)
  • HSLhsl(60, 100%, 50%)
  • HSVhsv(60, 100%, 100%)
  • CMYKcmyk(0%, 0%, 100%, 0%)
  • LABlab(97.1% -21.6 94.5)
  • OKLCHoklch(96.8% 0.211 109.8)

Sobre a cor Amarelo

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

Pelo matiz, é percebida como uma cor quente: tende a transmitir energia e proximidade e a “avançar” visualmente na composição.

Como fundo, pede texto escuro: o preto atinge contraste de 19,55:1 sobre ela, contra 1,07:1 do branco.

Para impressão, a conversão aproximada é cmyk(0%, 0%, 100%, 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 Amarelo

Complementar

#FFFF00 · #0000FF

Análoga

#FF8000 · #FFFF00 · #80FF00

Tríade

#FFFF00 · #00FFFF · #FF00FF

Tetrádica

#FFFF00 · #00FF80 · #0000FF · #FF0080

Complementar dividida

#FFFF00 · #0080FF · #8000FF

Monocromática

#808000 · #CCCC00 · #FFFF00 · #FFFF4D · #FFFF99

Amarelo com texto branco e preto

Texto branco Aa Bb Cc 123
1,07:1 · não passa na WCAG
Texto preto Aa Bb Cc 123
19,55:1 · AAA

Testar outras combinações no verificador de contraste

Antes de tudo: amarelo e legibilidade

O amarelo puro, #FFFF00, é a cor mais clara do espectro depois do branco. Na prática, isso significa duas coisas. Primeiro, texto preto sobre amarelo tem contraste de cerca de 19,6:1, um dos pares mais legíveis que existem, e por isso ele domina placas de advertência, faixas de obra e sinalização de segurança. Segundo, amarelo sobre branco (ou texto branco sobre amarelo) fica em apenas 1,07:1: praticamente invisível.

Nunca use amarelo como cor de texto em fundo claro. Se precisar de um “texto amarelo” em interface, escureça-o para um tom âmbar ou mostarda e confira o resultado no verificador de contraste. O guia de contraste e acessibilidade explica os níveis AA e AAA.

Significado e percepção

O amarelo costuma evocar sol, alegria, calor e otimismo, mas também atenção e cautela. No Brasil, é a segunda cor da bandeira e virou símbolo do Setembro Amarelo, campanha de prevenção ao suicídio. Em partes da Ásia, historicamente foi associado à realeza; em alguns países da Europa e da América Latina, flores amarelas têm conotação de despedida. Em excesso, o amarelo cansa a vista, e isso vale tanto para telas quanto para paredes.

Combinações recomendadas

CorEfeito
Cinza #808080Equilibra a energia do amarelo; dupla moderna em decoração.
Azul-marinho #000080Contraste forte, mas mais elegante que o preto.
Preto #000000Máxima visibilidade, linguagem de sinalização.
Roxo #800080Complementar no círculo tradicional; vibrante e ousado.

Onde o amarelo brilha

Em branding, o amarelo funciona bem para marcas acessíveis, de varejo e de alimentação, sobretudo como cor de destaque ao lado de um tom escuro. Em UI, é a cor tradicional de avisos (“atenção”), entre o verde de sucesso e o vermelho de erro. Na moda, o amarelo puro é difícil de usar perto do rosto; tons mais quentes, como o mostarda, e mais metálicos, como o dourado, são mais fáceis de combinar. Na impressão, é uma das cores que melhor sobrevivem à conversão: o #FFFF00 vira cmyk(0%, 0%, 100%, 0%), praticamente o próprio amarelo de processo.

Como usar em CSS

:root {
  --color-yellow: #FFFF00;
  --color-yellow-rgb: 255, 255, 0;
}

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

Cores parecidas

Use Amarelo nas ferramentas