Ferramenta de seleção de cores – Domine os códigos de cores HEX, RGB e HSL para design
A cor é o elemento mais poderoso do design visual. Estudos mostram que a cor aumenta o reconhecimento da marca em até 80%, e os usuários formam uma impressão visual inicial em 90 milissegundos – 62–90% da qual é baseada apenas na cor. Quer você seja um desenvolvedor web, designer gráfico ou profissional de marketing digital, compreender os códigos de cores é uma habilidade fundamental.
HEX vs RGB vs HSL – Quando usar cada um
| Formatar | Melhor para | Exemplo |
|---|---|---|
| HEX | Folhas de estilo CSS, códigos copiáveis, transferência de design | #667eea |
| RGB | Controle de opacidade, renderização de tela, processamento de imagem | rgb(102, 126, 234) |
| HSL | Criando paletas de cores, ajustando o brilho programaticamente | hsl(231, 77%, 66%) |
Por que os designers preferem HSL para criação de paletas
HSL (Hue, Saturation, Lightness) é o formato mais intuitivo para a construção de sistemas de cores harmoniosos. Para criar uma versão clara de uma cor de marca, basta aumentar o valor L. Para silenciá-lo, reduza S. Você pode gerar uma escala completa de 10 tons a partir de uma única cor base ajustando L de 10 a 90 em etapas iguais – algo impossível de fazer intuitivamente em HEX ou RGB.
Dicas profissionais para fluxo de trabalho de cores
- Escolha diretamente de qualquer elemento da tela— use nosso conta-gotas para obter amostras de cores de janelas do navegador, imagens ou componentes de UI.
- Verifique as taxas de contraste— A acessibilidade das WCAG AA requer uma taxa de contraste de 4,5:1 para o corpo do texto. Teste suas combinações de primeiro e segundo plano.
- Crie paletas consistentes- depois de encontrar um valor H de sua preferência, crie 9 tons em L=10, 20, 30...90 para um token de sistema de design completo.
- Salve as cores da sua marca— marque a página com seu código HEX no URL para compartilhar cores instantaneamente com colegas de equipe.
- Use HSL para estados de foco— escureça o L em 10% ao passar o mouse para botões e links para manter a harmonia das cores.
Perguntas frequentes
Qual é a diferença entre HEX #000000 e rgb(0,0,0)?
Eles representam a mesma cor – preto puro – em notações diferentes. Os navegadores os tratam de forma idêntica. HEX é mais compacto; RGB é mais explícito.
Posso escolher cores das imagens?
Sim – clique no ícone do conta-gotas e selecione qualquer lugar da tela, incluindo imagens renderizadas pelo navegador.
Por que as cores impressas parecem diferentes das cores da tela?
As telas usam o modelo de cores RGB (aditivo); as impressoras usam CMYK (subtrativo). Para obter cores com precisão de impressão, converta seus valores HEX em CMYK usando uma ferramenta profissional como o Adobe Color.