Cinza é uma cor neutra e esfumaçada criada pela mistura de preto e branco, conferindo-lhe uma qualidade equilibrada. É acromática, o que significa que tecnicamente não possui cor, por isso não aparece na roda de cores. Enquanto o cinza pode transmitir formalidade e sofisticação, sua neutralidade também pode evocar sentimentos de tristeza ou monotonia em certos contextos.
Cinza é definido pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #898989
- Valor RGB: 53,7% vermelho, 53,7% verde e 53,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 em seus designs:
- Crie uma estética minimalista. Cinza pode criar um visual limpo e moderno, perfeito para interfaces que priorizam simplicidade e foco no conteúdo.
- Defina o clima. Cinza pode criar uma sensação de sofisticação e seriedade ou evocar sentimentos de tristeza.
- Use como base. Este tom neutro e equilibrado é uma excelente escolha para elementos como fundos e textos, proporcionando uma aparência limpa e discreta que apoia vários estilos de design e paletas de cores.
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 esfumaçado do cinza, considere:
- Cinza frio (#CBCBCB) é uma versão mais clara do cinza, adicionando um toque de leveza.
- Prata (#C4C4C4) é um tom de cinza mais brilhante que adiciona um pouco de elegância.
- Pewter (#909EAE) é um tom acinzentado com um sutil toque azulado.
- Slate (#6D8196) é um cinza mais profundo e frio com um toque de azul.
Cinza é uma cor neutra, o que permite que ela combine bem com praticamente qualquer cor do espectro. Aqui estão algumas ideias para inspirar sua criatividade:
- Azul-cinza (#6A89A7) complementa a frieza do cinza enquanto adiciona vivacidade, perfeito para estéticas limpas e modernas.
- Terra queimada (#ED7B58) adiciona um toque quente e terroso que complementa a neutralidade do cinza.
- Gunmetal (#353E43) fornece profundidade e dimensão, criando uma sensação sofisticada e profissional.
- Vermelho carmesim (#B22222) oferece uma explosão de energia sem sobrecarregar a calma do cinza.
Outras cores a considerar incluem off-white para um efeito elegante, aqua para um contraste brilhante e verdes sutis para complementar a neutralidade do cinza, como musgo sobre uma pedra.
Embora o cinza seja neutro, ele pode entrar em conflito com cores extremamente saturadas, como:
- Verde neon (#2CFF05) perturba a neutralidade do cinza, criando um contraste intenso.
- Índigo (#560591) é uma cor profunda, criando discórdia em vez de complementar a frieza do cinza.
- Rosa (#FF1D8D) entra em conflito com a frieza do cinza, resultando em tensão visual.
- Amarelo (#FFFF00) sobrecarrega o cinza médio, produzindo um contraste áspero.
Cinza simboliza neutralidade e equilíbrio, transmitindo imparcialidade e sofisticação. É comumente usado em ambientes profissionais para estabelecer autoridade e confiança.
Na psicologia das cores, o cinza representa imparcialidade e é frequentemente associado ao sistema judicial, justiça e busca pela verdade. Tons mais claros evocam calma e segurança, enquanto tons mais escuros podem trazer sentimentos de melancolia e pessimismo devido à sua falta de vivacidade.
No design de UI, o cinza pode melhorar a legibilidade e transmitir profissionalismo. No entanto, o uso excessivo de cinza pode tornar os designs sem inspiração ou deprimentes. Tons mais claros funcionam bem para fundos, enquanto os mais escuros podem adicionar seriedade. Use cinzas escuros com moderação para evitar criar uma experiência de usuário monótona.
A palavra “cinza” origina-se das línguas germânicas, especificamente do inglês antigo “græg,” que significa “amanhecer” ou “clarear”. O primeiro uso registrado de “cinza” em inglês data de cerca de 700 d.C.
Cinza tem sido um elemento básico na moda, desde as túnicas simples dos camponeses até os elegantes vestidos da nobreza. Artistas o usaram para sombreamento e representação da natureza, enquanto arquitetos incorporaram pedras e tijolos cinza em edifícios ao longo de diferentes eras. Mesmo em joias, pérolas e gemas aparecem em vários tons de cinza.
Hoje, o cinza reflete eficiência moderna e inovação enquanto transmite profissionalismo, sofisticação e luxo. Tons mais claros continuam populares por sua estética minimalista, enquanto tons mais escuros podem evocar uma sensação de vida urbana.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Escala de cinza
Borda Afiada
Questões de Cinza
Verificador de contraste
Contraste 3,5
- Texto grande
#898989
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Aprovado | Reprovado | |
Aprovado | Reprovado |
Contraste 6
- Texto grande
#898989
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Aprovado | Reprovado | |
Aprovado | Aprovado | |
Aprovado | Aprovado |
Simulações de cor
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
A cor hexadecimal #898989, conhecida como Cinza, tem valores RGB de R:137, G:137, B:137 e valores CMYK de C:0, M:0, Y:0, K:46.
| VALUE | CSS | |
|---|---|---|
| HEX | #898989 | #898989 |
| RGB DECIMAL | 137, 137, 137 | RGB(137,137,137) |
| RGB PERCENTAGE | 53.7, 53.7, 53.7 | RGB(53.7%,53.7%,53.7%) |
| CMYK | 0, 0, 0, 46 | |
| HSL | HSL(0.0, 0.0%, 53.7%) | HSL(0.0, 0.0%, 53.7%) |
| HSV (OR HSB) | 0.0°, 0.0, 53.7 | |
| WEB SAFE | #153153153 | #153153153 |
| BINARY | 10001001, 10001001, 10001001 | |
| iOS - SwiftUI | Color(red: 0.537, green: 0.537, blue: 0.537) | |
| iOS - UIKit | UIColor(red: 0.537, green: 0.537, blue: 0.537, alpha: 1) | |
| Android - Compose | Color(0xFF898989) |
