O cinzento simboliza equilíbrio, neutralidade e sofisticação. Situado entre o branco e o preto, é uma das cores mais versáteis no design.
O cinzento é um neutro situado entre o branco e o preto. Simboliza equilíbrio, neutralidade e sofisticação, e é fundamental para estrutura, tipografia e superfícies na UI.
Em design web, branding e interfaces digitais, é usado para acrescentar elegância, melhorar a legibilidade e criar composições limpas que deixam o conteúdo principal destacar-se sem distrair o utilizador.
O cinzento associa-se frequentemente a conceitos como:
O seu significado pode variar consoante o contexto, embora comunique em geral calma, objetividade e sofisticação.
Na psicologia das cores, o cinzento transmite calma, estabilidade e racionalidade. Por não ser uma cor dominante, ajuda a reduzir o ruído visual e favorece a concentração, pelo que é uma das cores mais usadas em interfaces digitais e produtos tecnológicos.
As emoções que habitualmente transmite são:
Quando usado em excesso pode parecer frio, pelo que é frequentemente combinado com cores mais vivas para acrescentar dinamismo.
O cinzento está presente em praticamente todas as disciplinas relacionadas com design. Encontra-se com frequência em:
A sua neutralidade torna-o uma excelente cor de apoio para praticamente qualquer projeto.
Entre as cores HTML e CSS mais conhecidas relacionadas com cinzento estão:
| Nome | Amostra | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Gainsboro | |||||
| LightGray | |||||
| Silver | |||||
| DarkGray | |||||
| Gray | |||||
| DimGray | |||||
| SlateGray | |||||
| LightSlateGray | |||||
| DarkSlateGray |
Desde os cinzentos mais claros aos tons antracite, cada variante traz uma personalidade diferente à interface.
Cores HTMLNem todos os cinzentos se sentem da mesma forma. A sua temperatura cromática altera completamente o ambiente de uma interface e é uma das ideias-chave que as pessoas procuram ao trabalhar com paletas neutras.
Têm um ligeiro matiz castanho, vermelho ou amarelo e criam ambientes mais acolhedores. Encaixam bem em branding artesanal, e-commerce de produtos físicos e interfaces com tom humano.
Contêm subtons azuis ou verdes e parecem mais tecnológicos e minimalistas. São comuns em software, dashboards e produtos digitais.
São amplamente usados em sistemas de design como Material Design, Tailwind CSS ou Bootstrap. Escalas como gray, slate, zinc ou cool gray ajudam a construir tipografia, bordas e superfícies consistentes.
Muitos designers procuram termos como paleta de cinzentos, cinzento neutro, cinzento ardósia ou cinzento frio. Compreender estas diferenças ajuda a escolher a escala certa e a usar o cinzento de forma mais eficaz na UI.
O cinzento combina com praticamente qualquer cor graças à sua neutralidade. Algumas combinações muito usadas são:
#FFFFFF#111111#2563EB#16A34A#FFA500#FFD700#EF4444#7C3AED#EC4899#DAA520Estas combinações ajudam a criar interfaces elegantes, modernas e fáceis de ler.
O cinzento não tem cor complementar, pois pertence ao grupo das cores acromáticas juntamente com o branco e o preto. A sua principal vantagem é poder equilibrar quase qualquer combinação cromática sem perturbar a harmonia do design.
As harmonias desta página usam a mesma lógica do Círculo cromático e do Gerador de paletas do Matizly. O cinzento funciona como neutro dentro de qualquer harmonia cromática.
Suaviza transições entre cores próximas e reduz a saturação visual.
As variações são geradas com as mesmas funções do estúdio Matizly. Para cinzentos, as mais úteis são escalas de luminosidade e subtons quentes ou frios:
Cinzentos claros
Estas escalas ajudam a construir tipografia secundária, bordas, estados desativados e superfícies de forma consistente.
As paletas com cinzento transmitem elegância, profissionalismo e minimalismo. Algumas combinações populares são:
3 cores
3 cores
3 cores
3 cores
3 cores
3 cores
Estas combinações são comuns em design web, aplicações móveis e branding corporativo.
Paletas de coresO cinzento desempenha um papel muito importante na acessibilidade das interfaces.
Cinzentos claros podem ser difíceis de ler sobre fundos brancos, enquanto cinzentos escuros oferecem normalmente excelente contraste sem a dureza visual do preto puro.
Verificar sempre a razão de contraste face às orientações WCAG ajuda a criar experiências mais acessíveis.
Texto cinzento escuro / fundo branco
10.31:1AA ✓
Texto branco / fundo cinzento escuro
10.31:1AA ✓
Texto cinzento médio / fundo branco
4.83:1AA ✓
Texto branco / fundo ardósia
7.58:1AA ✓
O cinzento permite criar gradientes elegantes e discretos. Algumas combinações comuns são:
#6B7280 → #FFFFFF#6B7280 → #111111#6B7280 → #2563EB#6B7280 → #C0C0C0#6B7280 → #16A34A#6B7280 → #7C3AEDEstes gradientes aparecem frequentemente em dashboards, aplicações móveis, produtos tecnológicos e interfaces minimalistas.
Gerador de gradientesO cinzento é uma das cores mais importantes no design de interfaces. A sua capacidade de organizar visualmente a informação torna-o essencial em praticamente qualquer sistema de design moderno.
O cinzento simboliza equilíbrio, neutralidade, profissionalismo e estabilidade. É uma cor que transmite calma e sofisticação.
O cinzento combina muito bem com branco, preto, azul, verde, laranja, amarelo, vermelho, roxo e dourado.
O cinzento não tem cor complementar porque pertence às cores acromáticas juntamente com o branco e o preto.
É amplamente usado em design web, interfaces de utilizador, aplicações móveis, branding corporativo, tecnologia, arquitetura e design industrial.
Cinzentos quentes têm um ligeiro matiz castanho, vermelho ou amarelo e parecem mais acolhedores. Cinzentos frios contêm subtons azuis ou verdes e parecem mais tecnológicos e minimalistas. Cinzentos neutros são a base de muitos sistemas de design.
Escolha qualquer cor e copie Hex, RGB, HSL ou OKLCH com tons e harmônicas.
ExperimentarExplore paletas prontas e guarde as favoritas neste dispositivo.
ExperimentarExplore harmônicas num círculo interativo e crie paletas equilibradas.
Experimentar