Amarelo claro é um tom suave com qualidades calorosas e alegres. Como outros tons de amarelo, simboliza paz e luz do sol, enquanto incorpora novos começos e uma sensação de frescor.

O amarelo claro é definido pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #FFFFC5
- Valor RGB: 100% vermelho, 100% verde e 77,3% azul
Considerações de acessibilidade desempenham um papel crucial 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 o amarelo claro em seus designs:
- Crie uma sensação de calor. O amarelo claro evoca sentimentos de felicidade, otimismo e simpatia. É uma excelente escolha para interfaces como sites e aplicativos educacionais que precisam ser acolhedores e convidativos.
- Melhore a legibilidade. Quando combinado com uma cor de texto escura, fundos amarelo claro podem melhorar a legibilidade e reduzir a fadiga ocular dos usuários.
- Realce outras cores. O amarelo claro pode atuar como uma cor de destaque brilhante e alegre, complementando uma paleta de cores mais ampla dentro do seu design.
Lembre-se de que a cor e seu significado podem mudar de cultura para cultura — e a qualquer momento. Se você está projetando para um público global, pesquise considerações de cor para suas regiões específicas.
Para variações dentro do mesmo espectro suave do amarelo claro, considere:
- Amarelo pastel (#FFEE8C) captura uma suavidade semelhante ao amarelo claro, criando uma experiência gentil e calma.
- Creme (#FDFBD4) é um amarelo pálido, quase branco, que oferece neutralidade ao lado do calor do amarelo claro.
- Pêssego (#FFD3AC) é um rosa suave com tons de amarelo que combinam com a delicadeza do amarelo claro.
- Laranja claro (#FFDBBB) combina com a suavidade do amarelo claro, mas pende mais para o laranja com um toque de calor.
Para complementar o amarelo claro, considere combiná-lo com:
- Laranja pastel (#FFC067) adiciona um toque de vivacidade quando combinado com amarelo claro, criando uma experiência calorosa e convidativa.
- Verde pastel (#80EF80) complementa o calor do amarelo claro com seus tons refrescantes e frios.
- Cinza frio (#CBCBCB) é um tom neutro atemporal que cria um contraste limpo e calmo.
- Lavanda (#D3D3FF) combina com a alegria do amarelo claro para criar uma combinação de cores tranquila.
Outras cores que valem a pena considerar incluem azul marinho para criar um contraste lúdico, terracota para adicionar um toque de rusticidade e turquesa para uma combinação marcante.
Embora o amarelo claro seja pálido, ele pode entrar em conflito com:
- Verde neon (#2CFF05) conflita com a suavidade do amarelo claro e pode criar uma aparência visual chocante.
- Mocha (#6D3B07), quando combinado com amarelo claro, parece sem graça.
- Verde oliva (#636B2F) pode parecer turvo quando combinado com amarelo claro devido à sua proximidade no círculo cromático.
- Vermelho carmesim (#B22222) cria tensão com seus tons profundos e frios contrastando com o calor do amarelo claro.
- Preto (#000000) com amarelo claro forma um contraste marcante, evocando uma atmosfera sombria.
O amarelo claro incorpora o otimismo e a alegria associados à luz do sol. Evoca imagens de prados primaveris, pintinhos fofos e o início de um novo dia. Este tom pálido também carrega conotações de intelecto e clareza mental.
Na psicologia das cores, o amarelo claro é um sopro de ar fresco. Ele eleva o humor, desperta a criatividade e gera sentimentos de felicidade e paz. A falta de intensidade o torna acessível e agradável aos olhos, reduzindo o estresse e a ansiedade.
No design de UI, o amarelo claro promove uma atmosfera calorosa e serve como uma cor de destaque suave, capturando a atenção sem sobrecarregar o usuário. No entanto, usar o amarelo claro sozinho pode reduzir o contraste. Combine-o com cores ou textos mais escuros para melhorar a legibilidade e o apelo visual.
O amarelo claro se origina da cor primária amarela, remontando às pinturas rupestres pré-históricas, quando artistas usavam pigmentos de ocre amarelo para representar o sol e as estrelas. Além disso, a associação precoce com o ouro fez do amarelo uma cor sagrada em muitas culturas.
Antes de existirem nomes específicos para tons de amarelo claro, as pessoas descreviam objetos com base no material, como “cor de açafrão” ou “cor de marfim”. O amarelo claro surgiu como um nome de cor distinto durante os séculos 18 e 19 com a evolução da teoria das cores.
Hoje, o amarelo claro aparece na moda primavera, decoração de interiores e designs para elementos mais suaves.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Mundo Antigo
Promenade
Pradaria
Verificador de contraste
Contraste 1,03
- Texto grande
#FFFFC5
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Reprovado | Reprovado | |
Reprovado | Reprovado |
Contraste 20,36
- Texto grande
#FFFFC5
- 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 #ffffc5, conhecida como Amarelo Claro, tem valores RGB de R:255, G:255, B:197 e valores CMYK de C:0, M:0, Y:23, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #ffffc5 | #ffffc5 |
| RGB DECIMAL | 255, 255, 197 | RGB(255,255,197) |
| RGB PERCENTAGE | 100.0, 100.0, 77.3 | RGB(100.0%,100.0%,77.3%) |
| CMYK | 0, 0, 23, 0 | |
| HSL | HSL(60.0, 100.0%, 88.6%) | HSL(60.0, 100.0%, 88.6%) |
| HSV (OR HSB) | 60.0°, 22.7, 100.0 | |
| WEB SAFE | #255255204 | #255255204 |
| BINARY | 11111111, 11111111, 11000101 | |
| iOS - SwiftUI | Color(red: 1.000, green: 1.000, blue: 0.773) | |
| iOS - UIKit | UIColor(red: 1.000, green: 1.000, blue: 0.773, alpha: 1) | |
| Android - Compose | Color(0xFFFFFFC5) |


