Amarelo é uma cor brilhante e alegre que irradia felicidade e energia. Posicionada entre o verde e o laranja na roda de cores, é um tom marcante (e matiz puro) que energiza com seu apelo vívido.
O amarelo é definido pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #FFDE21
- Valor RGB: 100% vermelho, 87,1% verde e 12,9% azul
A escolha de cores no design de UX e UI deve considerar critérios de acessibilidade, que são fundamentais. 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 o amarelo em designs:
- Atraia atenção. Use amarelo para destacar elementos, como botões, alertas ou ícones. Seu brilho natural chama a atenção, tornando-o perfeito para pontos de navegação importantes.
- Estimule positividade. Incorpore amarelo para criar uma atmosfera amigável e acolhedora. Sua associação com felicidade e calor pode fazer os usuários se sentirem mais otimistas e engajados.
- Melhore a visibilidade. O amarelo oferece excelente contraste contra tons mais escuros para legibilidade e destaque.
- Comunique energia. Aplique amarelo em ambientes dinâmicos ou criativos para transmitir energia e inspirar ação. É ideal para plataformas que promovem inovação, criatividade ou juventude.
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 vibrante e energizante do amarelo, considere:
- Limão (#FFF44F) oferece um amarelo brilhante e puro que compartilha a essência ensolarada e alegre do amarelo.
- Âmbar (#FFBF00) introduz um toque de laranja, proporcionando um tom dourado mais profundo que mantém a vivacidade do amarelo.
- Mostarda (#FFDB58) apresenta um amarelo terroso e suave que ecoa o calor do amarelo com uma intensidade sutil.
- Açafrão (#F4C430) oferece um amarelo levemente alaranjado, capturando o rico tom da especiaria e adicionando um calor exótico.
Para complementar os tons brilhantes do amarelo, considere combiná-lo com:
- Azul marinho (#000080) oferece um contraste profundo e rico que destaca o brilho do amarelo.
- Cinza (#898989) fornece um fundo neutro que permite que o amarelo se destaque vividamente.
- Lavanda (#D3D3FF) é uma cor suave e delicada que harmoniza sutilmente com o calor do amarelo.
- Verde-azulado (#069494) mescla tons de azul e verde que equilibram lindamente com a exuberância do amarelo.
- Branco (#FFFFFF) cria um visual nítido e limpo que realça a leveza e a sensação arejada do amarelo.
Cores adicionais a serem consideradas incluem verde escuro para um visual natural, vermelho para um impacto marcante e preto para uma combinação ousada e clássica.
Embora o amarelo seja versátil, ele pode entrar em conflito com:
- Roxo escuro (#800080) pode sobrecarregar a leveza do amarelo, levando a um impacto visual discordante.
- Verde oliva (#808000) às vezes apaga a vivacidade do amarelo devido à sua terrosidade suave.
- Rosa choque (#FF69B4) compete com o amarelo por atenção, potencialmente criando uma combinação visualmente chocante.
- Marrom escuro (#654321) pode ofuscar o amarelo, fazendo-o parecer desbotado.
- Vermelho brilhante (#FF0000) pode sobrepujar o amarelo, tornando a combinação muito agressiva para os olhos.
O amarelo simboliza alegria e otimismo e evoca calor. Está culturalmente ligado à riqueza, prosperidade e sabedoria, oferecendo um amplo espectro de significados emocionais e culturais.
Psicologicamente, o amarelo estimula a atividade mental e a energia, atraindo atenção e estimulando a comunicação. Seu tom vibrante pode melhorar o foco e elevar o humor, servindo como um estimulante eficaz em muitos ambientes.
No design de UI/UX, a presença viva do amarelo pode melhorar o engajamento do usuário, tornando as interfaces convidativas e energéticas. Apoia a imagem de uma marca como inovadora e amigável, usando seu brilho para criar designs marcantes que incentivam a interação e a positividade.
O amarelo tem sido usado ao longo dos tempos para capturar a essência da luz e da vida. Nos tempos antigos, as pessoas extraíam pigmento amarelo da argila ocre para pintar o sol e as estrelas nas paredes das cavernas, representando a luz guia do dia. Os egípcios reverenciavam o amarelo como a cor do sol, do ouro e da imortalidade. Tumbas e tesouros adornados de amarelo eram um testemunho da vida eterna.
Durante o Renascimento, artistas como Vermeer e Rembrandt usaram o amarelo para simbolizar iluminação e inovação em suas pinturas. Na China, o amarelo era reservado para o Imperador e seu palácio, representando autoridade, honra e uma conexão com os céus.
No final do século 19, a série "Girassóis" de Vincent van Gogh, pintada na década de 1880, capturou a essência da alegria e da natureza da vida, ilustrando a capacidade do amarelo de comunicar emoções e beleza profundas.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Mostarda Dijon
Prisma Iluminado
Cítrico Zestoso
Verificador de contraste
Contraste 1,34
- Texto grande
#FFDE21
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Reprovado | Reprovado | |
Reprovado | Reprovado |
Contraste 15,72
- Texto grande
#FFDE21
- 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 #ffde21, conhecida como Amarelo, tem valores RGB de R:255, G:222, B:33 e valores CMYK de C:0, M:13, Y:87, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #ffde21 | #ffde21 |
| RGB DECIMAL | 255, 222, 33 | RGB(255,222,33) |
| RGB PERCENTAGE | 100.0, 87.1, 12.9 | RGB(100.0%,87.1%,12.9%) |
| CMYK | 0, 13, 87, 0 | |
| HSL | HSL(51.1, 100.0%, 56.5%) | HSL(51.1, 100.0%, 56.5%) |
| HSV (OR HSB) | 51.1°, 87.1, 100.0 | |
| WEB SAFE | #25520451 | #25520451 |
| BINARY | 11111111, 11011110, 00100001 | |
| iOS - SwiftUI | Color(red: 1.000, green: 0.871, blue: 0.129) | |
| iOS - UIKit | UIColor(red: 1.000, green: 0.871, blue: 0.129, alpha: 1) | |
| Android - Compose | Color(0xFFFFDE21) |
