Seletor de Cores Online

O que é um seletor de cores?

Um seletor de cores é uma ferramenta que deixa você escolher qualquer cor visualmente e sair com o código pronto para colar — hex, rgb() ou hsl() — sem precisar adivinhar valores ou abrir o Photoshop só para isso. É o tipo de coisa que você procura quando vê uma cor em algum lugar (um site, uma logo, uma print) e precisa pegar o código de cor exato para usar no seu próprio projeto.

Este roda inteiro no navegador: arraste dentro do quadrado, ajuste o matiz e a opacidade, ou simplesmente cole um código hexadecimal que você já tem e o seletor pula direto para aquela cor. Funciona bem tanto para quem trabalha com CSS e está fechando uma paleta de cores online quanto para quem só precisa do código de uma cor específica, rapidamente.

Como usar

1. Escolha a cor. Arraste dentro do quadrado para ajustar saturação e brilho, mova o controle de matiz para trocar a cor base, ajuste a opacidade se precisar de transparência, ou use o conta-gotas para pegar a cor de qualquer pixel da tela (nos navegadores compatíveis). Também dá para colar um hex direto no campo — de 3, 6 ou 8 dígitos, com ou sem #.
2. Copie o código. Clique no hex, no rgb()/rgba() ou no hsl()/hsla() para copiar exatamente aquele texto — um check confirma a cópia por dois segundos.
3. Explore variações. Veja os dez tons claros e os dez tons escuros da cor atual e clique em qualquer um para adotá-lo, ou confira a cor nomeada mais próxima e acesse a página com todos os tons daquela família.

Para que servem os códigos de cor

No CSS, cada cor de um site é escrita como hex, rgb() ou hsl() — é o código que define o fundo de um botão, a cor de um texto ou a borda de um card. Ferramentas de design como Figma, Photoshop e Canva trabalham com os mesmos formatos, então o valor que você copia aqui entra direto no campo de cor de qualquer uma delas.

Fora do design, o código de cor aparece na hora de fechar a paleta de uma marca — para garantir que o azul do logo seja sempre o mesmo azul, em qualquer material —, em apresentações, documentos e planilhas que aceitam cor personalizada por hex, e em qualquer situação em que “uma cor parecida” não resolve: você precisa do valor exato.

Limitações honestas

O código hex que você copia é exato, mas a cor que aparece na tela não é: o mesmo valor pode parecer levemente diferente em cada monitor ou celular, dependendo da gama de cores e da calibração, e uma impressão CMYK nunca reproduz todas as cores que uma tela mostra. O quadrado de seleção também trabalha em HSV (matiz, saturação, brilho), enquanto o CSS usa HSL (matiz, saturação, luminosidade) — são dois jeitos diferentes de descrever a mesma cor, por isso os números do HSL não batem exatamente com a posição marcada no quadrado.

O botão de conta-gotas usa a API EyeDropper do navegador, disponível hoje só em navegadores baseados em Chromium (Chrome, Edge, Opera) — no Safari e no Firefox ele simplesmente não aparece, e a captura é sempre em sRGB. Os valores de RGB e HSL mostrados são arredondados para números inteiros, para ficarem legíveis, então converter de hex para HSL e voltar pode fechar com uma unidade de diferença; o campo hex continua sendo o valor sem perda. O hex de 8 dígitos (#RRGGBBAA) carrega a opacidade e funciona em qualquer navegador atual, mas rgba() e hsla() são a opção mais segura para suportar navegadores bem antigos. E a cor nomeada mais próxima é calculada por distância entre valores RGB — não é uma medida de percepção humana, então é o nome mais próximo matematicamente, não necessariamente o mais parecido aos olhos.

Por que é grátis?

Todas as ferramentas do FreeToGenerate.com rodam direto no seu navegador — não pedimos conta, não colocamos marca d’água em nada e não existe versão paga escondida atrás de um limite diário. Este seletor de cores não é diferente: dá para usar quantas vezes precisar, sem cadastro.