Guia de paletas de cores — copie cores padrão da Web e do Material Design
Uma coleção de referência com as paletas de design mais consultadas: cores padrão da Web, o sistema de cores do Material Design e uma rampa de cinzas, cada uma com seu código HEX e um botão de cópia com um clique.
Cores padrão da Web
Paleta do Material Design
Escala de cinza (cores neutras)
O que é uma paleta de cores
Esta página é uma coletânea das paletas de cores clássicas empregadas em design, apresentadas com os seus códigos HEX. Reúne três conjuntos: as 16 cores padrão da web em uso desde os começos do CSS, as cores representativas do sistema de cores Material Design que a Google sistematizou, e uma escala de cinzas que divide do branco ao preto em dez passos. Um clique sobre o código de uma cor de que goste, como #2196F3, o copia para colar diretamente em CSS ou numa ferramenta de design.
Escolher as cores uma a uma a olho costuma deixar uma confusão de tons parecidos e um design que nunca acaba de firmar. Todas as cores desta página pertencem a um sistema concebido como um todo: escolher simplesmente ao longo dos números de claridade do Material Design (50 a 900) ou dos passos de cinza (cinza a 90 %, a 80 % e assim por diante) facilita montar um esquema coerente, alinhado em tom e claridade. A teoria das combinações — complementares, análogas e demais — é exposta na seção do glossário.
Como usar a paleta de cores
- Escolha o grupo que convém ao seu uso Os três grupos — cores padrão da web, Material Design e escala de cinzas — se sucedem na vertical. Role até o que mais se aproxime do seu uso.
- Julgue a cor na amostra Cada amostra aparece junto ao nome da cor e ao código HEX, então você delimita candidatas enquanto vê na tela o seu aspecto real.
- Pressione o botão de cópia Clique no botão de cópia sob uma cor de que goste e o código HEX passa automaticamente para a área de transferência.
-
Cole em CSS ou numa ferramenta de design
Cole o código HEX copiado diretamente numa propriedade CSS
colorou no seletor de cor do Figma, do Adobe XD e afins.
Dicas para aproveitar melhor
- Clique no botão "Copiar" abaixo de qualquer amostra para copiar instantaneamente o código HEX (ex.: #F44336) para a área de transferência.
- Cole o código copiado diretamente no CSS ou em ferramentas de design como Figma e Adobe XD, sem precisar reformatar nada.
- As cores do Material Design são nomeadas como "cor + número de tonalidade" (ex.: Red 500): quanto maior o número, mais escuro o tom.
- A rampa de cinzas é útil quando você precisa de um conjunto consistente de tons para texto, fundo e bordas em uma mesma interface.
- Se estiver em dúvida sobre qual cor escolher, começar pelas 16 cores padrão da Web costuma gerar uma paleta legível e com bom contraste.
Quando a paleta de cores ajuda
Escolher a base de um esquema para a web
Ao fixar a cor base de um site inteiro, tomar matizes de um mesmo tom de uma escala de claridade do Material Design faz com que a repartição de cores entre cabeçalho, corpo e botões se encaixe por si só.
Cores de estado dos componentes de interface
Prepare as cores dos estados normal, com o cursor por cima e pressionado de um botão como claridades distintas de um mesmo tom — Blue 500 a Blue 700, por exemplo — e você exprimirá a mudança de estado conservando a unidade.
Projetar o contraste entre texto e fundo
Ao escolher cores de fundo e de texto na escala de cinzas, combinar passos afastados dá melhor legibilidade. Para um veredito rigoroso, vale a pena um verificador de contraste à parte.
Unificar as cores de apresentações e gráficos
Em vez de escolher a cada vez a olho as cores de slides e gráficos, transpor os nomes e códigos HEX desta página como guia interno evita que as cores se desviem de um documento a outro.
O vocabulário dos esquemas de cor
- Código HEX
- Uma notação que exprime uma cor mediante seis dígitos hexadecimais na forma #RRGGBB. Vermelho, verde e azul recebem dois dígitos cada um; é a notação mais difundida em CSS e nas ferramentas de design.
- Material Design
- O sistema de design que a Google publicou em 2014. Sistematiza as paletas mediante números de claridade de 50 a 900 para cada tom, e quanto maior o número mais escuro é o matiz.
- Cores complementares
- Uma combinação de cores situadas em posições opostas do círculo cromático. Como se realçam mutuamente, recorre-se a ela para escolher uma cor de destaque quando se busca um contraste marcado.
- Cores análogas
- Uma combinação de cores vizinhas no círculo cromático. Sendo pequena a diferença de tom, o conjunto sai de bom grado unido e sereno, e recorre-se a ela amiúde para escolher a cor base de um site.
- Esquema triádico
- Uma técnica que combina três cores nas posições que dividem o círculo cromático em três. Mais suave do que as complementares, equilibra-se com maior facilidade do que as análogas oferecendo mais variedade.
- Escala de cinzas
- Uma série de passos sem tom, feita só de claro e escuro do branco ao preto. Serve de base para ajustar a diferença de claridade entre fundo e texto e assegurar a legibilidade.
- HSL
- Uma maneira de exprimir uma cor mediante três grandezas: tom, saturação e luminosidade. Frente ao HEX, presta-se a ajustes intuitivos, como mudar só o brilho mantendo o mesmo tom.
Perguntas frequentes
color: #F44336;. A mesma notação também funciona sem alterações na maioria das ferramentas de design e linguagens de programação.
Curiosidade — Por que designers evitam escolher cores "no olho"
Quando o Google apresentou o "Material Design" em 2014, não era apenas um guia de estilo visual, mas um sistema de design completo criado para unificar cor, tipografia, movimento e layout sob um único conjunto coerente de regras. A paleta de cores em particular foi projetada com um rigor incomum: cada matiz (Red, Blue, Green e assim por diante) vem com números de tonalidade de 50 a 900, permitindo que os designers construam um esquema de cores coeso em todo o aplicativo sem depender apenas do "olho".
Escolher cores de forma improvisada, uma a uma, tende a espalhar pelo aplicativo tons parecidos, porém sutilmente diferentes, resultando em um design que parece inconsistente. Escolher a partir de uma paleta sistemática pronta, em vez disso, mantém o esquema de cores coerente e ainda permite expressar naturalmente os diferentes estados de um botão (padrão, hover, pressionado) apenas subindo ou descendo na escala de tonalidade dentro do mesmo matiz.
A forma de especificar cores em CSS foi ampliada muitas vezes ao longo dos anos. O CSS1, lançado em 1996, suportava apenas 16 cores nomeadas básicas e códigos HEX. Hoje também é possível especificar cores em espaços mais próximos da percepção humana, como HSL, HWB e LAB. Mesmo assim, o código HEX continua sendo, de longe, a notação mais usada na prática — ainda é a língua comum compartilhada entre designers e engenheiros.