Seletor de Cores v2.0

Sobre Seletor de Cores

O seletor de cores é uma ferramenta que transforma uma cor escolhida na tela em todos os códigos que um projeto digital precisa, de HEX e RGB até CMYK e OKLCH. Quem trabalha com design ou front-end costuma perder tempo pulando entre três ou quatro sites: um para pegar a cor, outro para converter formato, outro para conferir contraste. A versão 2.0 do seletor de cores do ToolsPivot junta tudo em uma página só, roda inteiramente no seu navegador e não pede cadastro nem envia nada para servidor algum.

Visão Geral do Seletor de Cores do ToolsPivot

Funcionalidade Principal

A ferramenta captura uma cor por três caminhos e devolve dez formatos copiáveis com um clique. Você pode arrastar o quadrado de saturação e valor junto com os controles de matiz e alfa, digitar um código HEX, uma função rgb() ou um nome de cor do CSS, ou ainda amostrar um pixel usando o conta-gotas nativo do navegador ou uma imagem enviada. Internamente o ToolsPivot guarda a cor como um valor HSV de ponto flutuante e arredonda apenas na hora de exibir, o que elimina aquele desvio clássico em que arrastar o controle e voltar não devolve o mesmo HEX de origem.

Usuários-Alvo e Casos de Uso

O público principal é quem precisa de código de cor exato para colocar em produção: desenvolvedores front-end, designers de interface, freelancers que montam sites para clientes e microempreendedores construindo a própria identidade visual. Também atende quem cuida de acessibilidade e precisa provar que uma combinação de texto e fundo passa nos critérios do WCAG antes de subir a página.

Problema e Solução

O problema real não é escolher a cor, é o que vem depois dela. Um mesmo tom precisa virar HEX para a folha de estilo, RGB para o Figma, CMYK para a gráfica que vai imprimir o cartão de visitas e uma proporção de contraste para a auditoria de acessibilidade. Antes disso significava abrir um conversor de RGB para HEX, um verificador de contraste e um gerador de paleta em abas separadas. Agora a mesma cor produz todas essas saídas na hora, sem recalcular nada à mão nem recorrer a uma calculadora hexadecimal para fechar a conta.

Principais Benefícios do Seletor de Cores

• Dez formatos de uma vez: HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, OKLCH e o nome CSS mais próximo aparecem juntos. A maioria dos seletores grátis para em três.
• Conta-gotas de tela: pegue a cor de qualquer coisa visível no seu monitor, não só do que está dentro da página. Serve para copiar o tom de um PDF de manual de marca ou de um concorrente.
• Acessibilidade sem segunda aba: o verificador de contraste devolve a proporção e o resultado AA, AA-Large e AAA na mesma sessão em que você escolhe a cor.
• Nada sai do navegador: a imagem que você usa para amostrar cores é lida localmente pelo canvas. Não existe upload, então não há arquivo seu em servidor nenhum.
• OKLCH pronto para CSS moderno: o formato perceptualmente uniforme que os navegadores atuais aceitam, útil para gerar escalas de tom que parecem uniformes ao olho.
• Precisão que não escorrega: o valor interno de alta precisão evita o arredondamento acumulado que faz a cor mudar sozinha depois de alguns ajustes.
• Cores salvas entre visitas: a paleta fica guardada no seu próprio navegador e continua lá quando você voltar, sem conta e sem sincronização com servidor.
• Sem limite e sem gate: nenhum recurso fica atrás de assinatura. Ferramentas como Coolors e Adobe Color reservam parte das funções para planos pagos, e você pode usar o resultado direto junto de um minificador de CSS ou de um compressor de imagens na mesma sessão de trabalho.

Funcionalidades-Chave do Seletor de Cores

• Quadrado de saturação e valor: área grande onde o eixo horizontal controla a saturação e o vertical controla o valor. Funciona com clique, arrasto ou toque no celular.
• Controle de matiz: faixa de 0° a 360° que redesenha o quadrado inteiro conforme você percorre o espectro.
• Controle de alfa: ajusta a opacidade e faz a saída migrar automaticamente para HEX8 e RGBA quando a cor deixa de ser totalmente opaca.
• Conta-gotas nativo: usa a EyeDropper API do navegador. Ela é detectada automaticamente e o botão fica oculto onde o navegador não oferece suporte, sem prometer o que não vai funcionar.
• Entrada direta de código: cole um HEX, uma função rgb() ou escreva steelblue e a ferramenta reconhece e converte.
• Prévia de legibilidade: mostra texto preto e texto branco sobre a cor atual, para você ver na hora qual dos dois é legível.
• Harmonias de cor: gera complementar, análoga, tríade, tétrade, complementar dividida e monocromática por rotação de matiz.
• Faixas de tons claros, escuros e neutros: três tiras de variação criadas por passos de luminosidade e saturação a partir da mesma cor base.
• Verificador de contraste WCAG: receba duas cores e devolva a proporção calculada pela luminância relativa, com aprovação ou reprovação em AA, AA-Large e AAA.
• Amostragem por imagem: envie uma foto ou logo, clique em qualquer pixel e receba a cor. A ferramenta ainda monta sozinha uma paleta das cores dominantes, o que ajuda quando você só tem o arquivo da imagem em Base64 ou um recorte feito no cortador de imagem online.
• Construtor de gradiente CSS: escolha a segunda cor, o ângulo e o tipo linear ou radial, e copie o CSS pronto para colar. Combina bem com um minificador de JavaScript quando o gradiente entra em componente animado.
• Cores salvas: guardadas no armazenamento local do navegador, disponíveis quando você voltar ao site no mesmo dispositivo e no mesmo navegador.

Como Funciona o Seletor de Cores do ToolsPivot

1. Defina a cor. Arraste no quadrado de saturação e valor, mova a matiz, digite um código ou clique no conta-gotas para amostrar da sua tela.
2. Ajuste a opacidade. Mexa no controle de alfa se o projeto usa transparência. A saída passa a incluir HEX8 e RGBA automaticamente.
3. Escolha o formato. Olhe a grade de dez formatos e clique no botão de copiar do que você precisa. O valor vai direto para a área de transferência.
4. Derive o que faltar. Na mesma cor, gere harmonias, tons claros e escuros ou um gradiente CSS sem precisar recomeçar a seleção.
5. Confira o contraste. Coloque a cor do texto e a do fundo no verificador e veja a proporção com o veredito AA e AAA antes de colar no editor HTML online.
6. Salve a paleta. Guarde as cores aprovadas para encontrá-las na próxima visita ao ToolsPivot pelo mesmo navegador.

Quando Usar o Seletor de Cores

A ferramenta rende mais em qualquer momento no qual uma cor precisa sair da cabeça e virar código verificado. Ela é especialmente útil quando o mesmo tom vai atravessar plataformas diferentes ou quando existe uma exigência de acessibilidade envolvida.

• Montagem de design tokens: gere a escala de tons de uma cor base e copie tudo como variáveis de CSS.
• Criação de identidade visual: defina primária, secundárias e neutros e leve os códigos para peças impressas e digitais.
• Auditoria de acessibilidade: teste combinações de texto e fundo antes que virem apontamento em revisão.
• Amostragem de referência: pegue a cor exata de um print, de uma foto de produto ou de um material que veio em PDF.
• Preparo para gráfica: obtenha a aproximação CMYK do tom da marca antes de conversar com o fornecedor de impressão.
• Ajuste de tema escuro: use as faixas de tons para derivar as versões escuras de cores que já existem.
• Padronização de ícones: alinhe a cor de um gerador de favicon com o resto do site.
• Revisão em telas pequenas: confira se o contraste escolhido continua legível e passe a página pelo teste de compatibilidade com celular.

Existe um limite honesto: para provas de cor com fidelidade de gráfica, a conversão CMYK aqui é uma aproximação a partir do sRGB e não substitui um fluxo com perfil ICC. Ela serve para orientar a conversa, não para fechar o material final.

Casos de Uso e Aplicações

Desenvolvedor freelancer entregando site de cliente

Contexto: o briefing pede "azul confiável" e nada mais específico do que isso.

• Explora a faixa azul no quadrado e trava a cor primária
• Gera a faixa de tons para estados de hover e desativado
• Confere o contraste do texto branco sobre o botão

Resultado: um conjunto completo de variáveis CSS pronto em poucos minutos, já validado em AA.

Lojista de e-commerce trocando cores sazonais

Contexto: um vendedor com loja no Mercado Livre e site próprio quer um banner de campanha.

• Envia a foto do produto e amostra as cores dominantes
• Salva os tons quentes que saíram da própria imagem
• Monta o gradiente do banner e copia o CSS

Resultado: banner alinhado ao produto real, sem contratar design e sem abrir editor pesado, com o texto de apoio gerado no conversor de texto para imagem.

MEI criando identidade visual do zero

Contexto: um microempreendedor individual vende doces pelo Instagram e pelo WhatsApp e precisa de cores próprias.

• Escolhe um rosa quente como primária no quadrado
• Gera a harmonia análoga e a complementar para o destaque
• Copia o CMYK para o cartão de visitas impresso

Resultado: paleta consistente entre post, embalagem e o gerador de QR Code do cardápio.

Analista de acessibilidade em órgão público

Contexto: um portal precisa atender o eMAG e as exigências da Lei Brasileira de Inclusão.

• Insere cada par de texto e fundo do tema atual
• Registra a proporção e o veredito de cada combinação
• Corrige a luminosidade das cores reprovadas

Resultado: lista de correções objetiva, com número de contraste para cada item questionado.

Os Dez Formatos de Saída e Quando Usar Cada Um

Cada formato existe para resolver um problema diferente, e escolher errado gera retrabalho na implementação. A tabela abaixo resume o que o ToolsPivot devolve a cada seleção.

Vale entender o que "mais próximo" significa no nome CSS: a ferramenta compara a cor atual com uma tabela de 148 palavras-chave do CSS e devolve a que menos se distancia. Quase nunca é uma correspondência exata, e sim a etiqueta mais útil para você se orientar. Se a cor vai virar uma imagem de compartilhamento, o valor HEX é o que você leva para o gerador de Open Graph.

Contraste, WCAG e a Lei Brasileira de Inclusão

No Brasil, contraste de cor não é só questão de gosto, é obrigação legal. O artigo 63 da Lei nº 13.146/2015, a Lei Brasileira de Inclusão, determina que sites de empresas com sede ou representação comercial no país sejam acessíveis a pessoas com deficiência, e o padrão técnico cobrado na prática é o WCAG. No setor público, o eMAG cumpre esse papel como especialização brasileira das mesmas diretrizes.

Os números que importam são poucos e fáceis de guardar. Texto normal precisa de proporção mínima de 4,5:1 contra o fundo. Texto grande, a partir de 18pt ou 14pt em negrito, pode ficar em 3:1. O nível AAA aperta para 7:1 em texto normal. O verificador embutido calcula essa proporção pela luminância relativa e mostra os três vereditos de uma vez, então você descobre o problema enquanto ainda está escolhendo a cor, e não durante uma auditoria.

Pontos essenciais:

• Conformidade é binária: não existe página parcialmente conforme, uma falha já reprova o critério
• Cinza-claro sobre branco: a combinação que mais reprova botões em temas prontos
• Cor sozinha não informa: complemente com ícone ou rótulo, já que parte do público tem daltonismo

Depois de resolver o contraste, a clareza do texto continua sendo um fator à parte, e o verificador de legibilidade ajuda nessa outra metade do problema.

Perguntas Frequentes

O seletor de cores do ToolsPivot é grátis?

Sim, é totalmente grátis e não exige cadastro nem login. Todos os recursos ficam liberados, incluindo o conta-gotas, o verificador de contraste, as harmonias e o construtor de gradiente. Não existe funcionalidade reservada para plano pago.

Minhas imagens e cores são enviadas para algum servidor?

Não, absolutamente nada é enviado. A ferramenta roda inteiramente no seu navegador: a leitura da imagem acontece localmente pelo elemento canvas e as cores salvas ficam no armazenamento local do próprio navegador. Não há requisição de servidor nem chave de API envolvida.

Quantos formatos de cor a ferramenta gera?

São dez formatos gerados a cada seleção: HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, OKLCH e o nome CSS mais próximo. Cada um tem botão próprio de copiar. A maioria dos seletores grátis entrega apenas três.

O conta-gotas funciona em todos os navegadores?

Não, ele depende da EyeDropper API nativa, que ainda não existe em todos os navegadores. A ferramenta detecta o suporte automaticamente e oculta o botão onde ele não funcionaria. Nesses casos, use a amostragem por imagem enviando um print da tela.

As cores salvas continuam lá depois que eu fecho o navegador?

Sim, elas ficam guardadas no armazenamento local do navegador e reaparecem na próxima visita. Como o armazenamento é local, a paleta não é sincronizada entre dispositivos e some se você limpar os dados de navegação. Para arquivar de vez, copie os códigos para um documento.

O que é OKLCH e por que ele está aqui?

OKLCH é um formato de cor do CSS moderno construído sobre o espaço OKLab, no qual variações iguais de valor produzem variações que parecem iguais ao olho. Ele resolve o problema do HSL, no qual dois tons com a mesma luminosidade podem parecer bem diferentes em brilho. É especialmente útil para gerar escalas de tons consistentes em design systems.

Posso confiar no CMYK para mandar material para a gráfica?

Use como referência inicial, não como prova final. O CMYK aqui é calculado pela fórmula padrão a partir do sRGB, sem perfil ICC nem gestão de cor, então é uma aproximação. Para tiragem com fidelidade crítica, valide com a gráfica usando o perfil de cor que ela realmente utiliza.

Como extraio as cores de uma imagem ou de um logo?

Use o painel de amostragem por imagem, envie o arquivo e clique em qualquer pixel para receber a cor. A ferramenta ainda monta automaticamente uma paleta com as cores dominantes da imagem. Nenhum arquivo sai do seu dispositivo nesse processo.

Qual a diferença entre HSV e HSL?

Os dois descrevem matiz e saturação, mas divergem no terceiro eixo. No HSV, o valor mede o brilho máximo da cor, então valor 100% pode ser uma cor pura e vibrante. No HSL, a luminosidade distribui o brilho de forma linear, e 100% é sempre branco.

A ferramenta funciona no celular?

Funciona, e os controles respondem a toque além de mouse. O quadrado de saturação e valor, os controles de matiz e alfa e os botões de copiar operam normalmente em navegadores móveis. O conta-gotas de tela, por depender de API nativa, geralmente não está disponível nesse contexto.

Como aplico a cor escolhida em um site WordPress?

Copie o HEX e cole no campo de cor do personalizador do tema, que é o formato aceito pela maioria dos temas. Para CSS adicional, HSL costuma ser mais prático porque facilita derivar variações. O detector de tema WordPress ajuda a identificar o que o tema já usa antes de você mexer.

Por que o código muda sozinho em outros seletores e aqui não?

Porque a maioria das ferramentas guarda a cor já arredondada e reconverte a cada ajuste, acumulando erro a cada volta. O ToolsPivot mantém um único valor HSV de alta precisão como fonte da verdade e arredonda somente na exibição. O resultado é que arrastar e voltar devolve exatamente o mesmo código.

Preciso de outra ferramenta para checar acessibilidade de cor?

Não para contraste de texto e fundo, que o verificador embutido resolve com o veredito AA, AA-Large e AAA. Ele cobre a parte de cor exigida pelo WCAG e pelo eMAG. Para uma varredura do site inteiro, o verificador de SEO do website aponta outros problemas técnicos da página.

Related Tools You Might Like

Redimensionador de Imagens Efeito de Lápis em Imagens Girar Imagem Online Imagem para Base64 Base64 para Imagem Cortar Imagem Online