Ir para o conteúdo principal

Amarelo-claro

Tudo o que você precisa saber sobre amarelo claro para inspirar seu próximo design.

Obter paleta de cores

Escolha uma cor

Hex

RGB

HSB

HSL

Escolha as configurações da paleta

Paletas personalizadas

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.

color Amarelo Clarocolor Amarelo Claro

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.

Este é um texto #FFFFC5 sobre fundo #FFFFFF.
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.

Este é um texto #FFFFC5 sobre fundo #000000.
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.

VALUECSS
HEX#ffffc5#ffffc5
RGB DECIMAL255, 255, 197RGB(255,255,197)
RGB PERCENTAGE100.0, 100.0, 77.3RGB(100.0%,100.0%,77.3%)
CMYK0, 0, 23, 0
HSLHSL(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
BINARY11111111, 11111111, 11000101
iOS - SwiftUIColor(red: 1.000, green: 1.000, blue: 0.773)
iOS - UIKitUIColor(red: 1.000, green: 1.000, blue: 0.773, alpha: 1)
Android - ComposeColor(0xFFFFFFC5)
Obter paleta de cores