✦ Introdução
Bem-vinda (ou bem-vindo) ao mundo das cores!
Se você já ficou olhando para uma tela tentando encontrar aquele tom perfeito de azul — nem muito escuro, nem muito claro — você está no lugar certo.
Este material nasceu de uma necessidade muito prática: ter à mão uma referência visual de cores com seus respectivos códigos hexadecimais, sem precisar ficar rodando a roda de cores ou tentando adivinhar qual código gera qual tom.
Aqui você vai encontrar mais de 2.300 cores organizadas, nomeadas e prontas para usar — seja no seu projeto de design gráfico, na edição de uma planilha, na criação de um post, num site, ou em qualquer lugar onde a cor faça diferença.
Este material foi pensado para todos: para quem está chegando agora e quer entender o básico, e para quem já trabalha com design e só precisa de uma consulta rápida.
✦ Como Funciona um Código Hexadecimal?
Toda cor que você vê numa tela é formada pela mistura de três cores de luz: vermelho, verde e azul — o famoso sistema RGB.
O código hexadecimal diz ao computador quanto de cada cor misturar. Sempre começa com # seguido de 6 caracteres em 3 pares:
# RR GG BB↑ vermelho ↑ verde ↑ azul
Cada par varia de 00 (ausência) até FF (máximo). São mais de 16 milhões de combinações possíveis! 🎨
| Código | R | G | B | Resultado |
|---|---|---|---|---|
| #FF0000 | FF | 00 | 00 | Vermelho |
| #00FF00 | 00 | FF | 00 | Verde |
| #0000FF | 00 | 00 | FF | Azul |
| #FF8C00 | FF | 8C | 00 | Laranja |
| #FFFFFF | FF | FF | FF | Branco |
| #000000 | 00 | 00 | 00 | Preto |
Tabela de Cores Hexadecimais
Clique na amostra de cor para copiar o código hex automaticamente.
Paletas da Natureza
Paletas extraídas de fotografias originais — um diferencial autoral único.
📍 Gruta do Lago Azul — Bonito, MS
Antes de viajar com minha família para Bonito / MS, não imaginava que a Gruta do Lago Azul fosse algo tão colossal. Para se ter uma ideia, a gruta fica a cerca de 200m (mais ou menos 300 degraus) da superfície. É uma paisagem gigantesca, sendo que a profundidade do lago que se encontra abaixo da gruta foi medida nos mergulhos de exploração realizados até o momento e chegaram a uma profundidade de 96 metros. Este lindo lago subterrâneo adquire a cor azul intensa sob incidência dos raios solares, e a paleta de cores que extraímos desse cenário é tão linda quanto suas fotografias.
🌹 Rosas do Quintal
O design das rosas que capturei no quintal da casa da minha mãe nesta fotografia mostra como elas são perfeitas. Esta paleta de cores que extraí são como um poema sensitivo que, ao invés de palavras, traz em si as suas cores encantadoras.
✦ Mais paletas da natureza serão adicionadas aqui conforme você enviar suas fotografias 📷
✦ Como Utilizar Cores Hexadecimais em Design
No Canva
Clique em qualquer elemento colorido, vá até a opção de cor e procure o campo que começa com #. Cole o código e a cor é aplicada imediatamente.
Em Planilhas (Excel e Google Sheets)
No menu de cores, selecione cor personalizada e insira o código hex. Ideal para manter identidade visual em relatórios e dashboards.
Em Apresentações (PowerPoint e Google Slides)
O campo de cor personalizada aceita o código hex. Perfeito para seguir um manual de identidade visual.
Em Web Design e Programação
color: #FF6B35;
background-color: #F5F5F5;A Grande Vantagem: Consistência
Usar códigos hex garante que a mesma cor apareça igual em qualquer ferramenta, em qualquer momento.
✦ Dicas para Combinação de Cores
Cores Complementares
Opostas no círculo cromático — como azul e laranja. Criam contraste forte e vibrante.
Cores Análogas
Vizinhas no círculo cromático. Criam harmonia e fluidez — ideais para designs sofisticados.
A Regra dos 60-30-10
60% cor dominante · 30% cor secundária · 10% cor de destaque. Equilíbrio garantido.
Cores Neutras como Âncora
Branco, preto, cinza e bege equilibram qualquer paleta intensa.
✦ Ferramentas Úteis
ColorZilla
Extensão gratuita para Chrome e Firefox. Identifica o código hex de qualquer cor na tela — indispensável para designers.
Adobe Color (color.adobe.com)
Cria e explora paletas com base em regras cromáticas. Gratuita no navegador.
Coolors (coolors.co)
Gera combinações de paletas rapidamente pressionando a barra de espaço.
Colour Contrast Checker (colourcontrast.cc)
Verifica se o contraste entre duas cores garante boa legibilidade.
Glossário de Termos
Termos relacionados ao universo das cores e do design.