Cinza claro é um tom de cinza quase imperceptível, com pouca saturação, conferindo uma qualidade limpa e arejada. Embora o cinza claro não ocupe uma posição específica no círculo cromático, ele tende mais para o azul, criando uma vibe sólida e minimalista.
Cinza claro é definido pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #D3D3D3
- Valor RGB: 82,7% vermelho, 82,7% verde e 82,7% 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 cinza claro em seus designs:
- Melhorar a legibilidade. Cinza claro pode proporcionar um excelente contraste para textos de cor escura e garantir a legibilidade ideal para os usuários. Isso é crucial para as melhores práticas de acessibilidade.
- Adicionar elementos interativos. Designers podem usar cinza claro para implementar um efeito de hover sutil que altera o fundo de um elemento para um tom mais claro ou mais escuro de cinza claro. Isso pode criar um feedback visual para os usuários sobre os elementos visuais.
- Criar uma estética profissional. Cinza claro é uma cor de fundo perfeita para sites ou aplicativos nas indústrias financeira ou de saúde que precisam transmitir estabilidade e praticidade.
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 as considerações de cor para suas regiões específicas.
Para variações dentro do mesmo espectro minimalista do cinza claro, considere:
- Cinza frio (#CBCBCB) é um tom mais escuro que se assemelha mais à cor do concreto.
- Prata (#C4C4C4) é uma cor metálica que é ligeiramente mais escura que o cinza claro.
- Branco (#FFFFFF) é semelhante ao cinza claro, pois ambas as cores têm pouca ou nenhuma saturação.
- Off-white (#F2F0EF) é outra cor neutra com uma quantidade muito pequena de calor.
Para complementar o cinza claro, considere combiná-lo com:
- Laranja (#FFA500) cria uma combinação de cores divertida e criativa com cinza claro.
- Preto (#000000) complementa o cinza claro adicionando um toque de ousadia e luxo.
- Azul claro (#90D5FF) adiciona um contraste suave ao cinza claro, criando uma sensação calma e convidativa.
- Vermelho (#FF2C2C) cria um contraste marcante com o cinza claro, chamando a atenção e fazendo uma declaração.
Outras cores que valem a pena considerar incluem marfim para criar um esquema de cores mais natural, celadon para uma estética floral, e marrom para uma vibe mais terrosa.
Embora o cinza claro seja modesto, ele pode entrar em conflito com:
- Rosa (#FF1D8D) é uma cor vibrante e ousada que pode ofuscar o cinza claro.
- Água-marinha (#66F1C2) tende a ser um pouco fria e pode criar uma paleta fria e estéril quando combinada com cinza claro.
- Fúcsia (#FF00FF) é uma cor altamente saturada que pode sobrepujar o cinza claro.
- Amarelo-esverdeado (#CCFF00) tem uma vivacidade que pode entrar em conflito com as qualidades sutis do cinza claro.
Cinza claro simboliza inteligência, sabedoria e refinamento. Ele pode gerar sentimentos de nostalgia pelo passado ou esperança por um novo começo e um futuro ainda a ser escrito.
Na psicologia das cores, os tons neutros e calmantes do cinza claro evocam sentimentos de imparcialidade e desapego emocional. Escritórios e prédios legislativos ao redor do mundo incorporam essa cor para criar uma atmosfera formal e imparcial.
No design de UI, o cinza claro é ideal para evitar incitar emoções fortes entre os usuários. É uma cor ótima para estilos de fonte tradicionais como Arial ou Times New Roman, permitindo que os usuários se concentrem mais nas informações que seu texto transmite do que em sua aparência.
Cinza claro era extremamente proeminente em comunidades medievais, já que a lã naturalmente se assemelhava a essa cor, e roupas de lã eram acessíveis ao público. O grande número de castelos e estátuas medievais tingidos de cinza claro também fala da importância dessa cor.
Estruturas contemporâneas, como o Flatiron Building em Manhattan, Nova York, apresentam a cor cinza claro de forma proeminente em tudo, desde alvenaria até estátuas e designs decorativos.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Industrial
Pinho Prateado
Quadro-negro
Verificador de contraste
Contraste 1,5
- Texto grande
#D3D3D3
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Reprovado | Reprovado | |
Reprovado | Reprovado |
Contraste 14,03
- Texto grande
#D3D3D3
- 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 #d3d3d3, conhecida como Cinza claro, tem valores RGB de R:211, G:211, B:211 e valores CMYK de C:0, M:0, Y:0, K:17.
| VALUE | CSS | |
|---|---|---|
| HEX | #d3d3d3 | #d3d3d3 |
| RGB DECIMAL | 211, 211, 211 | RGB(211,211,211) |
| RGB PERCENTAGE | 82.7, 82.7, 82.7 | RGB(82.7%,82.7%,82.7%) |
| CMYK | 0, 0, 0, 17 | |
| HSL | HSL(0.0, 0.0%, 82.7%) | HSL(0.0, 0.0%, 82.7%) |
| HSV (OR HSB) | 0.0°, 0.0, 82.7 | |
| WEB SAFE | #204204204 | #204204204 |
| BINARY | 11010011, 11010011, 11010011 | |
| iOS - SwiftUI | Color(red: 0.827, green: 0.827, blue: 0.827) | |
| iOS - UIKit | UIColor(red: 0.827, green: 0.827, blue: 0.827, alpha: 1) | |
| Android - Compose | Color(0xFFD3D3D3) |
