A areia é um neutro quente e claro que captura perfeitamente a essência de um ambiente natural e terroso. Ela se posiciona no lado mais claro e quente do espectro marrom na roda de cores, variando de creme pálido a bege dourado. Seu tom suave e convidativo confere um toque de elegância discreta.
A areia é definida pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #CBBD93
- Valor RGB: 79,6% vermelho, 74,1% verde e 57,6% azul
Considerações de acessibilidade desempenham um papel crucial na escolha de cores no design de UX e UI. O 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 aproveitar as qualidades naturais e calmantes da areia para criar um design amigável e visualmente atraente:
- Crie um fundo neutro. O tom suave e neutro da areia cria um pano de fundo calmo e discreto que ajuda o conteúdo a se destacar sem sobrecarregar os olhos.
- Melhore a legibilidade. Combine a areia com tons mais profundos como azul-marinho, verde floresta ou carvão para o texto, garantindo legibilidade enquanto mantém um contraste esteticamente agradável.
- Promova uma atmosfera relaxante. A areia é perfeita para aplicativos ou sites focados em bem-estar, meditação, viagens ou lazer. Ela ajuda a criar um clima relaxado que se alinha com atividades de lazer ou tranquilidade.
- Complete com tons terrosos. Para criar um design harmonioso e coeso, combine a areia com outros tons terrosos, como verdes, marrons e cremes. Essa paleta é agradável aos olhos e reforça a conexão com o mundo natural, o que pode melhorar os elementos temáticos de marcas ecológicas ou orgânicas.
- Destaque elementos interativos. Combine a areia com cores mais vibrantes para chamar a atenção para elementos como botões ou links, ou use variações de tons de areia para criar uma hierarquia sutil em 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 terroso da areia, considere:
- Caqui (#C3B091) oferece um tom ligeiramente mais escuro, mantendo a sensação quente e neutra da areia.
- Bege (#F5F5DC) é mais claro e proporciona uma aparência mais suave, mantendo a vibração natural.
- Castanho (#D6B588) tem um pouco mais de marrom, ecoando a elegância discreta da areia.
- Creme (#FDFBD4) introduz um tom mais pálido e suave que complementa o tom sutil da areia.
Para complementar os tons suaves da areia, considere combiná-la com:
- Azul-marinho (#000080) cria um contraste clássico, realçando a elegância discreta da areia.
- Verde floresta (#228B22) oferece um contraste rico e natural que harmoniza com a terrosidade da areia.
- Bordô (#660033) proporciona um contraste profundo e rico que faz os tons suaves da areia se destacarem.
- Cinza quente (#D3D3D3) alinha-se de perto com as propriedades neutras da areia, oferecendo uma paleta moderna e chique.
- Pêssego suave (#FFE5B4) complementa a areia com um calor suave e convidativo.
Cores adicionais que valem a pena considerar incluem verde-azulado profundo para enfatizar um contraste sofisticado, coral claro para um visual suave e convidativo, e lilás pálido para uma interação sutil e lúdica.
Embora a areia seja versátil, ela pode entrar em conflito com:
- Rosa brilhante (#FF69B4) pode ofuscar a natureza sutil e discreta da areia com sua vivacidade.
- Azul elétrico (#00F0FF) pode ser muito chamativo, criando um visual discordante contra a suavidade da areia.
- Amarelo limão (#FFF44F) tende a contrastar de forma muito acentuada, potencialmente sobrecarregando a natureza suave da areia.
- Prata (#C4C4C4) pode parecer muito frio e metálico contra o tom quente e terroso da areia.
- Cinza carvão (#4A4A4A) pode ser muito ousado e escuro, o que pode diminuir a qualidade calmante da areia.
A areia evoca sentimentos de calma, relaxamento e estabilidade. A psicologia das cores vê a areia como conservadora, simbolizando conforto, simplicidade e uma conexão natural. Ela transmite abertura e tranquilidade.
No design de UI/UX, a areia oferece um fundo limpo e descomplicado, sinalizando confiabilidade e praticidade. Ela se adequa a designs que visam transmitir calor e acolhimento, fazendo os usuários se sentirem à vontade.
Diversas culturas e contextos históricos há muito favorecem a cor areia devido à sua ocorrência natural generalizada e aplicações versáteis. A escolha de usar materiais de cor areia em roupas e arquitetura muitas vezes veio dos recursos disponíveis. Por exemplo, edifícios e vestimentas em regiões desérticas frequentemente combinam com a paisagem arenosa para se misturar ao ambiente natural e refletir a luz solar, reduzindo a absorção de calor.
Por séculos, a areia permaneceu uma cor popular na moda por causa de seu tom neutro, que combina facilmente com outras cores. Sua popularidade recorrente em uniformes militares também decorre de seus benefícios funcionais em desertos e outros ambientes de cor clara, onde a camuflagem de cor areia oferece uma vantagem.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Areias Noturnas
Turmalina
Siltstone
Verificador de contraste
Contraste 1,87
- Texto grande
#CBBD93
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Reprovado | Reprovado | |
Reprovado | Reprovado |
Contraste 11,24
- Texto grande
#CBBD93
- 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 #cbbd93, conhecida como Cor areia, tem valores RGB de R:203, G:189, B:147 e valores CMYK de C:0, M:7, Y:28, K:20.
| VALUE | CSS | |
|---|---|---|
| HEX | #cbbd93 | #cbbd93 |
| RGB DECIMAL | 203, 189, 147 | RGB(203,189,147) |
| RGB PERCENTAGE | 79.6, 74.1, 57.6 | RGB(79.6%,74.1%,57.6%) |
| CMYK | 0, 7, 28, 20 | |
| HSL | HSL(45.0, 35.0%, 68.6%) | HSL(45.0, 35.0%, 68.6%) |
| HSV (OR HSB) | 45.0°, 27.6, 79.6 | |
| WEB SAFE | #204204153 | #204204153 |
| BINARY | 11001011, 10111101, 10010011 | |
| iOS - SwiftUI | Color(red: 0.796, green: 0.741, blue: 0.576) | |
| iOS - UIKit | UIColor(red: 0.796, green: 0.741, blue: 0.576, alpha: 1) | |
| Android - Compose | Color(0xFFCBBD93) |
