Seletor de Cores
Ferramenta de seleção de cores online, conversão de formato HEX, RGB, HSL, gerar esquemas de cores
O que é um Seletor de Cores?
Um seletor de cores ajuda a escolher, inspecionar e converter cores para design e desenvolvimento front-end. A mesma cor pode ser escrita em vários formatos: HEX é compacto e comum em CSS, RGB descreve canais vermelho-verde-azul, e HSL expressa matiz, saturação e luminosidade, muitas vezes mais fácil para ajustar paletas. A ferramenta serve para transformar uma cor de marca em código, comparar modelos de cor, criar uma pequena paleta ou verificar amostras relacionadas como cores complementares e análogas. Escolha de cor não é só estética: contraste, legibilidade, acessibilidade, impressão e calibração de tela importam. Cores importantes de interface devem ser testadas no fundo final e contra requisitos de acessibilidade.
Como Usar
Como usar
- Clique no seletor de cores para escolher uma cor ou digite um valor no campo de entrada
- Veja os resultados de conversão nos formatos HEX, RGB e HSL
- Clique no botão de cópia ao lado de um formato para copiar o valor da cor
- Consulte os esquemas de cores para sugestões de combinações complementares, análogas e outras
- Veja os tons e matizes para variantes mais escuras e mais claras da mesma cor
Dicas sobre Cores
- Verifique o contraste antes de usar uma cor em texto, ícones ou controles; cores visualmente agradáveis ainda podem falhar nos requisitos de acessibilidade.
- Use HSL ao ajustar luminosidade ou saturação, e HEX ou RGB ao copiar valores para CSS ou tokens de design.
Casos de uso
Princípio técnico
Todos os valores nesta ferramenta residem no espaço de cores sRGB definido pela IEC 61966-2-1, que é o padrão assumido para literais hexadecimais em CSS, a função rgb() e qualquer leitura de <canvas>. HEX #RRGGBB é um inteiro compacto de 24 bits (8 bits por canal, 0-255); HEX #RRGGBBAA adiciona um byte alfa; rgb()/rgba() expõem os mesmos canais como inteiros ou porcentagens; hsl()/hsla() mudam para coordenadas cilíndricas com matiz em graus [0, 360), saturação e luminosidade em [0%, 100%]. A conversão RGB para HSL calcula L = (max + min) / 2, S = (max - min) / (1 - |2L - 1|) para croma não zero, e H a partir de uma fórmula segmentada em seis partes baseada em qual canal é o máximo. A conversão inversa HSL para RGB usa o algoritmo padrão t = L < 0.5 ? L(1+S) : L+S-LS antes de escalar cada canal de volta para 0-255. O seletor ao vivo usa o elemento nativo <input type="color">, que em navegadores compatíveis também expõe a EyeDropper API (Chrome 95+, Edge 95+; ainda não disponível no Safari/Firefox até 2026). A EyeDropper aciona uma amostragem de tela em nível do sistema operacional e retorna uma string hexadecimal sRGB, mas não pode amostrar dentro de iframes cross-origin ou superfícies protegidas por DRM. A geração de paleta rotaciona a matiz HSL: complementar é +180 graus, triádica é +/-120 graus, análoga é +/-30 graus, complementar dividida é +150 e +210 graus. Tintas e tons incrementam a luminosidade em passos fixos (tipicamente +10% em direção ao branco para tintas, -10% em direção ao preto para tons) mantendo matiz e saturação constantes. O contraste segue WCAG 2.1 SC 1.4.3/1.4.6: cada canal é decodificado com a função de transferência sRGB segmentada (segmento linear abaixo de 0,03928, expoente 2,4 acima), combinado com pesos de luminância 0,2126R + 0,7152G + 0,0722B para luminância relativa, depois a proporção é (L_mais_claro + 0,05) / (L_mais_escuro + 0,05). Os limiares são 4,5:1 para texto normal AA, 3:1 para texto grande AA e componentes de UI, e 7:1 para AAA. Observe que sRGB é um espaço de 8 bits por canal, então telas de amplo gamut usando Display P3 (Apple) ou Rec. 2020 podem renderizar o mesmo código hexadecimal com primárias visivelmente mais saturadas; para trabalho crítico de cor entre dispositivos, associe a cor a um perfil em vez de depender de triplas RGB brutas.
- Espaço de cores sRGB conforme IEC 61966-2-1; 8 bits por canal, total de 16.777.216 cores representáveis.
- HSL para RGB usa t = L<0.5 ? L(1+S) : L+S-LS, depois busca hue2rgb() por canal.
- A EyeDropper API requer Chrome/Edge 95+ e um gesto do usuário; superfícies de iframes cross-origin são bloqueadas.
- Contraste WCAG: decodificação gama sRGB, luminância ponderada 0,2126R + 0,7152G + 0,0722B, depois (L1+0,05)/(L2+0,05).
- Complementar = +180 graus de matiz, triádica = +/-120 graus, análoga = +/-30 graus, complementar dividida = +150/+210 graus.
- canvas.getImageData retorna pixels RGBA em Uint8ClampedArray, mas exige que o canvas seja da mesma origem (sem imagens contaminadas).
- Telas de amplo gamut Display P3 / Rec. 2020 renderizam o mesmo hexadecimal com primárias mais fortes - associe perfil para trabalho crítico de cor.
Exemplos
Escolha uma cor primária da marca e copie em três formatos
Selecionada: Tailwind blue-600
HEX: #2563eb
RGB: rgb(37, 99, 235)
HSL: hsl(217, 91%, 53%)
Copie a forma que combina com o código ao redor. Os três valores
descrevem a mesma cor sRGB (IEC 61966-2-1, 8 bits por canal);
a página converte entre eles com a matemática padrão RGB <-> HSL.Gerar um esquema complementar
Base: #2563eb (azul)
Complementar: #eb7a25 (laranja) matiz +180 graus
Análogo-1: #5a25eb (violeta) matiz +60 graus
Análogo-2: #256beb (azul-céu) matiz -30 graus
Triádico-1: #25eb56 (verde) matiz +120 graus
Triádico-2: #eb2525 (vermelho) matiz -120 graus
Use complementar para destaques de alto contraste, análogo para
fundos harmoniosos e triádico para ilustrações vibrantes.
Luminosidade e saturação são mantidas constantes; apenas o matiz gira.Verificar contraste WCAG antes de publicar
Primeiro plano: #1f2937 (gray-800, luminância relativa 0,022)
Fundo: #ffffff (branco, luminância relativa 1,000)
Razão de contraste: (1,000 + 0,05) / (0,022 + 0,05) = 14,5:1
Passa no WCAG AAA para texto normal (>= 7:1) e texto grande (>= 4,5:1),
e também atende ao limite de 3:1 para componentes de UI. Execute a mesma
verificação em todo par texto/fundo que vai para produção;
a página calcula a luminância relativa com a função de transferência
sRGB por partes (decodificação gama, peso 0,2126R + 0,7152G +
0,0722B).Perguntas frequentes
Quais formatos de cor são exibidos?
HEX (#RRGGBB), RGB (rgb(R, G, B)) e HSL (hsl(H, S%, L%)). A página também mostra esquemas de cores complementares, análogos, triádicos e complementares divididos, além de tons claros (tints) e escuros (shades) com base na cor selecionada.
Qual a diferença entre HSL e HSV?
Ambos decompõem a cor em matiz (0-360°), saturação e um componente parecido com brilho. A terceira dimensão do HSL é luminosidade (50% é a mais saturada, 0% é preto, 100% é branco). A terceira dimensão do HSV é valor (100% é a mais saturada, 0% é preto, sem branco). HSL é mais intuitivo para tons claros e escuros; HSV é mais próximo de como artistas misturam tinta.
Qual a precisão das conversões de cor?
HEX, RGB e HSL são conversões matemáticas exatas — todos descrevem a mesma cor sRGB. A página converte entre eles usando fórmulas padrão sem perda de precisão.
A mesma cor hex aparece igual em todas as telas?
Não. sRGB é o espaço de cor padrão da web; telas com gama amplo (P3, Adobe RGB) sem gerenciamento de cor podem renderizar o mesmo hex com mais saturação. A calibração também varia. Teste cores críticas no dispositivo de destino, especialmente em trabalhos de identidade visual.
Como os esquemas de cor são gerados?
Os esquemas giram o matiz HSL mantendo saturação e luminosidade constantes. Complementar é +180°, triádica é +120° / +240°, análoga é ±30° e complementar dividida é +150° / +210°. Os tons claros aproximam a luminosidade de 100% (branco) e os tons escuros, de 0% (preto).
O seletor de cores serve só para cores de tela?
Funciona no espaço de cor sRGB, que é o modelo certo para web e para a maioria das telas de consumo. As conversões são padrão e bem testadas para CSS e design de interface.
Algo é enviado para algum servidor?
Não. A página é puramente JavaScript no navegador. Os valores de cor não são salvos nem transmitidos.