Cor Laranja: código #FFA500

Laranja

#FFA500

Códigos da cor

  • HEX#FFA500
  • RGBrgb(255, 165, 0)
  • HSLhsl(39, 100%, 50%)
  • HSVhsv(39, 100%, 100%)
  • CMYKcmyk(0%, 35%, 100%, 0%)
  • LABlab(74.9% 23.9 79)
  • OKLCHoklch(79.3% 0.171 70.7)

Sobre a cor Laranja

Laranja tem o código HEX #FFA500, que corresponde a rgb(255, 165, 0) no modelo RGB. No círculo cromático, seu matiz fica em 39°, com 100% de saturação e 50% de luminosidade (hsl(39, 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 10,63:1 sobre ela, contra 1,97:1 do branco.

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

Complementar

#FFA500 · #0059FF

Análoga

#FF2600 · #FFA500 · #D9FF00

Tríade

#FFA500 · #00FFA6 · #A600FF

Tetrádica

#FFA500 · #00FF26 · #0059FF · #FF00D9

Complementar dividida

#FFA500 · #00D9FF · #2600FF

Monocromática

#805300 · #CC8500 · #FFA500 · #FFC14D · #FFDB99

Laranja com texto branco e preto

Texto branco Aa Bb Cc 123
1,97:1 · não passa na WCAG
Texto preto Aa Bb Cc 123
10,63:1 · AAA

Testar outras combinações no verificador de contraste

O laranja desta página é o #FFA500, a cor nomeada orange do CSS. Ele é mais amarelado do que o laranja que muita gente imagina (o da fruta ou de um cone de trânsito). Se você procura algo mais avermelhado, compare com o darkorange (#FF8C00) ou com o coral, que puxa para o rosa.

Significado e percepção

Por ficar entre o vermelho e o amarelo, o laranja herda a energia de um e a leveza do outro. É associado a entusiasmo, criatividade, calor e informalidade, e também a alerta: coletes refletivos, boias e cones usam laranja porque ele se destaca contra quase qualquer paisagem. No Brasil, dá nome ao Dezembro Laranja, campanha de prevenção ao câncer de pele. Em outras culturas, tem leituras religiosas (o açafrão no hinduísmo e no budismo) ou políticas. Como qualquer cor, o laranja não tem um significado fixo.

Onde o laranja funciona

Como combinar

A combinação mais forte é com o azul-marinho (#000080), já que azul e laranja são complementares no círculo tradicional. Para algo mais tropical, experimente o verde-azulado (#008080) ou o turquesa (#40E0D0). Em paletas terrosas, o laranja conversa com o marrom (#8B4513) e ganha respiro sobre o off-white (#FAF9F6). O guia de harmonia de cores mostra como chegar a esses pares.

Dica: laranja no modo claro e no escuro

Com texto branco, o #FFA500 tem contraste de só 1,97:1; com texto preto, chega a 10,6:1. Ou seja, botão laranja pede texto escuro. Se a marca exige texto branco, escureça o laranja até algo como #B35C00, que fica perto de 4,7:1. No modo escuro acontece o contrário: o #FFA500 original funciona muito bem como cor de destaque sobre fundos quase pretos, sem precisar de ajuste.

Como usar em CSS

:root {
  --color-orange: #FFA500;
  --color-orange-rgb: 255, 165, 0;
}

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

Cores parecidas

Use Laranja nas ferramentas