Laranja é a cor secundária vibrante entre vermelho e amarelo na roda de cores. Quando usada nos contextos adequados, evoca sensações de diversão e entusiasmo. Você pode criar tons mais claros e alegres de laranja adicionando mais amarelo ou um laranja mais escuro e intenso adicionando mais vermelho.
Para alcançar consistência em várias plataformas e dispositivos, use os códigos de cor específicos relacionados ao laranja.
- Código HEX: #FFA500
- Valor RGB: 100% vermelho, 64,7% verde e 0% azul
Considerações de acessibilidade são fundamentais na escolha de cores no design de UX e UI. Figma oferece plugins na Comunidade para garantir que seus designs atendam às Diretrizes de Acessibilidade de Conteúdo da Web.
Aqui estão algumas maneiras de usar laranja em seus designs:
- Indicar áreas importantes ou clicáveis. Use laranja para elementos que precisam parecer dinâmicos e envolventes, como efeitos de hover ou outros elementos interativos.
- Destacar chamadas para ação. Combine laranja com um fundo neutro para fazer o texto ou botões se destacarem.
- Guiar os espectadores com acentos. Use laranja para acentos em ícones ou ilustrações para adicionar um toque de cor e guiar o olhar do espectador.
- Indicar progresso com pistas visuais. Laranja pode ser usado para indicar progresso positivo ou a conclusão de tarefas, formulários ou processos dentro da UI.
Dica: Ao projetar para um público global, pesquise o simbolismo da cor em diferentes culturas — o vermelho não significa o mesmo em todos os lugares.
Para variações dentro do mesmo espectro energético do laranja, considere:
- Vermelho (#FF2C2C) é uma cor ousada e estimulante que combina com o calor energético do laranja.
- Vermelho-laranja (#FF4B33) é laranja infundido com a intensidade ardente do vermelho, tornando-o mais ousado e dramático.
- Amarelo-laranja (#FFB800) capitaliza a essência alegre do laranja com um toque mais leve.
- Laranja escuro (#C76E00) compartilha o calor do laranja, mas com uma intensidade mais profunda.
Laranja combina lindamente com paletas de cores que realçam ou suavizam sua vivacidade, como azuis profundos ou cremes neutros. Para complementar o laranja, considere combiná-lo com:
- Azul marinho (#000080) é uma cor complementar que contrasta bem com o laranja.
- Carvão (#4A4A4A) é versátil e maduro, combinando bem com a energia vibrante e alegre do laranja.
- Creme (#FDFBD4) cria um calor natural quando combinado com laranja.
- Preto (#000000) oferece uma declaração ousada e dramática para qualquer design.
Acentos mais brilhantes como teal ou roxo também criam paletas de cores ousadas com laranja. Embora façam uma declaração mais forte, essas cores adicionam um toque de energia e se inclinam para a diversão do laranja.
Embora o laranja seja brilhante e ousado, ele pode entrar em conflito com:
- Verde neon (#2CFF05) pode criar um contraste visual extremo quando combinado com laranja.
- Marrom (#895129) combinado com laranja pode fazer um design parecer plano, pois não há contraste suficiente para fazer qualquer cor se destacar.
- Fúcsia (#FE3894) com laranja pode criar um visual intenso onde o laranja parece em desacordo com o vibrante fúcsia.
- Verde esmeralda (#00674F) e laranja criam umforte contraste que pode ser chocante. É como apresentar duas energias opostas ao mesmo tempo.
A energia vibrante do laranja captura o espírito de entusiasmo e simboliza amizade, felicidade e até prosperidade. Em diversas culturas, o laranja possui significados variados. Na mitologia grega, deuses vestidos de laranja frequentemente representavam imortalidade, enquanto em religiões orientais como o hinduísmo e o budismo, o laranja é reverenciado como uma cor sagrada.
Psicólogos de cores frequentemente associam o laranja a emoções e atitudes que inspiram ação ou otimismo. Isso inclui encorajar a criatividade, a autoexpressão e um senso de diversão.
No design de UI, o laranja é frequentemente usado para incitar ação através de botões de CTA, transmitir avisos ou alertas e enfatizar informações críticas. Sua energia vibrante confere uma impressão amigável e criativa, tornando-o uma escolha popular para marcas com identidades semelhantes, como Dunkin’ Donuts ou Reese’s.
A palavra “laranja” deriva do antigo persa “nārang”, que se refere à fruta laranja amarga. A palavra inglesa “orange” também apareceu no século 12 e provavelmente foi derivada da palavra francesa “orenge”.
Essa cor intensa era uma favorita entre artistas como Vincent van Gogh. Você pode encontrar representações de laranja em várias de suas pinturas.
O laranja teve outro momento de destaque durante o século 20, quando foi usado principalmente para decorações de palco teatrais e enfeites de fantasias. Uma vez que o corante se tornou mais comercialmente disponível, foi associado à acessibilidade e alegria.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Infusão Cítrica
Citrino Celestial
Renascimento da Fênix
Verificador de contraste
Contraste 1,97
- Texto grande
#FFA500
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Reprovado | Reprovado | |
Reprovado | Reprovado |
Contraste 10,63
- Texto grande
#FFA500
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Aprovado | Aprovado | |
Aprovado | Aprovado | |
Aprovado | Aprovado |
Simulações de cor
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
A cor hexadecimal #ffa500, conhecida como Laranja, tem valores RGB de R:255, G:165, B:0 e valores CMYK de C:0, M:35, Y:100, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #ffa500 | #ffa500 |
| RGB DECIMAL | 255, 165, 0 | RGB(255,165,0) |
| RGB PERCENTAGE | 100.0, 64.7, 0.0 | RGB(100.0%,64.7%,0.0%) |
| CMYK | 0, 35, 100, 0 | |
| HSL | HSL(38.8, 100.0%, 50.0%) | HSL(38.8, 100.0%, 50.0%) |
| HSV (OR HSB) | 38.8°, 100.0, 100.0 | |
| WEB SAFE | #2551530 | #2551530 |
| BINARY | 11111111, 10100101, 00000000 | |
| iOS - SwiftUI | Color(red: 1.000, green: 0.647, blue: 0.000) | |
| iOS - UIKit | UIColor(red: 1.000, green: 0.647, blue: 0.000, alpha: 1) | |
| Android - Compose | Color(0xFFFFA500) |