Seletor de Cor
Seletor de cor grátis — escolha qualquer cor visualmente e obtenha instantaneamente os códigos HEX, RGB, HSL, HSV e CMYK. Gere sombras, tons, harmonias e...
Atualizado em maio de 2026
This color meets WCAG 2.1 AA standards for normal text (4.5:1) on at least one background.
Shades & Tints
Color Harmonies
Como usar
Canvas visual, cinco formatos ao vivo
1. Clique ou arraste no canvas
Saturação no eixo X, brilho no Y — ajuste o matiz na barra arco-íris abaixo.
2. Ou digite um hex direto
Cole qualquer código de 6 dígitos e o picker vai direto para essa cor.
3. Copie e explore variações
HEX, RGB ou HSL com um clique; explore sombras, tons e harmonias nos painéis abaixo.
O que esta ferramenta faz
Cinco formatos, sombras, tons e verificação WCAG
HEX, RGB, HSL, HSV e CMYK
HEX, RGB, HSL, HSV e CMYK, além de LAB, valor decimal e a versão web-safe — todos atualizados simultaneamente em tempo real.
Sombras e tons
10 gradações mais escuras e 10 mais claras a partir da cor selecionada.
5 harmonias de cor
Complementar, análoga, triádica, split-complementar e tetrádica.
Verificador de contraste WCAG
Mostra se a cor atende à proporção 4.5:1 do nível AA.
Nome CSS mais próximo
Calcula a distância euclidiana em RGB para sugerir a keyword CSS mais parecida.
100% no navegador
Sem cadastro, sem instalação, tudo roda localmente.
Exemplos de conversão
Quando você vai usar isso
Os cenários mais comuns entre quem usa a ferramenta
Desenvolvimento web e UI
Copie HEX ou RGB direto para CSS, config do Tailwind ou design tokens.
Auditoria de acessibilidade
O verificador WCAG identifica problemas de contraste antes de chegar à produção.
Criação de design systems
Use o painel de sombras e tons para construir uma rampa de cores completa.
Preparação para impressão
Os valores CMYK mostram como sua cor de tela se traduz em pigmentos.
Captura de cor de qualquer parte da tela
Use o conta-gotas (Eye Dropper) para pegar a cor exata de uma imagem, site ou app aberto no navegador, sem precisar de captura de tela externa.
Erros comuns
Confundir HSL com HSV
Ambos usam matiz e saturação, mas o terceiro eixo difere — veja a comparação abaixo.
Achar que nome CSS mais próximo é match exato
É a keyword mais parecida por distância RGB, não necessariamente a cor idêntica.
Esperar que CMYK reproduza a cor de tela exatamente
Alguns azuis e verdes vívidos ficam fora da gama imprimível.
Tentar usar o conta-gotas em Firefox ou Safari
O botão Eye Dropper depende da Eye Dropper API nativa do navegador, disponível hoje apenas em Chrome, Edge e outros baseados em Chromium.
Achar que a paleta salva e o histórico persistem após recarregar
Cores salvas e o histórico de seleções ficam só na memória da aba atual — copie os códigos para onde vai usá-los antes de fechar ou atualizar a página.
Achar que a cor "Web Safe" ainda é obrigatória hoje
É um resquício da paleta de 216 cores para monitores de 8 bits dos anos 1990 — telas modernas exibem milhões de cores sem essa limitação.
Por que usar esta ferramenta
Combina conversão, sombras/tons, exploração de harmonias e verificação de contraste WCAG numa única página — a maioria dos color pickers só converte formatos.
Mostra HSL e HSV simultaneamente, então você não precisa adivinhar qual o CSS espera versus o que o Photoshop usa internamente.
Além da conversão, dá para capturar qualquer cor da tela com o conta-gotas, guardar até 20 cores numa paleta e revisitar o histórico das últimas seleções — tudo sem sair da página.
HSL vs. HSV
Mesmos dois primeiros eixos, terceiro eixo diferente
Perguntas frequentes
Representação hexadecimal de 6 dígitos de uma cor RGB (#RRGGBB). Cada par representa um canal — RR vermelho, GG verde, BB azul, de 00 a FF.
Referências
Referência completa de todos os formatos de cor CSS.
Documentação oficial sobre o requisito de contraste 4.5:1.
Explica o modelo LAB usado na aba de especificações técnicas do picker e por que ele é perceptualmente mais uniforme que RGB.
Ferramentas Relacionadas
- Gerador de Paleta de Cores Design Gere paletas de cores harmoniosas a partir de qualquer cor base. Escolha harmonia Análoga, Complementar, Triádica ou Tetrádica — exporte como CSS variables...
- Verificador de Contraste de Cores Design Verificador de contraste de cores grátis — verifique conformidade WCAG 2.2 AA e AAA instantaneamente. Preview ao vivo, simulação de daltonismo e sugestões...
- Conversor de Cores Design Converta cores entre HEX, RGB, HSL e CMYK instantaneamente. Ferramenta gratuita com seletor de cores, verificador de contraste WCAG e gerador de paletas.
- Gerador de Paleta de Cores por Imagem Design Extraia paletas de cores de qualquer imagem — obtenha códigos HEX, RGB, HSL e exporte como CSS variables, Tailwind, JSON ou PNG. 100% no browser, sem upload.
- Gerador CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Gerador CSS box shadow grátis com preview em tempo real. Crie sombras, efeitos neumorfismo e glassmorfismo. Exporte para CSS, Tailwind ou variáveis CSS.
