Color Picker: Escolha qualquer cor da tela

O que é o Color Picker?

Color Picker é uma ferramenta gratuita baseada em navegador que permite capturar qualquer cor da tela usando a EyeDropper API, ou inserir manualmente valores de cor em formato HEX, RGB ou HSL para ver instantaneamente as conversões em todos os principais modelos de cor. Designers recorrem a ele quando precisam combinar uma cor de uma captura de tela, site ou mockup de design sem abrir softwares pesados de desktop. Ao contrário dos seletores de cores nativos do sistema operacional, esta ferramenta converte imediatamente entre HEX, RGB, HSL, HSB e CMYK em uma única interface, sem login, sem instalação e sem que os dados saiam do seu navegador.

Principais funcionalidades

• Capturar cores de qualquer parte da tela — A EyeDropper API ativa um amostrador de cores no nível do sistema no Chrome, Edge e outros navegadores Chromium modernos. Clique em qualquer pixel e a cor é carregada instantaneamente na ferramenta.
• Suporte à EyeDropper API em navegadores modernos — A ferramenta detecta a disponibilidade da API em tempo de execução. Em navegadores não compatíveis, aparece uma mensagem clara em vez de um botão quebrado.
• Converter entre HEX, RGB, HSL, HSB, CMYK — O painel "All Formats" exibe todas as representações simultaneamente. Alterar qualquer campo de entrada atualiza todos os outros em tempo real.
• Copiar valores de cor para a área de transferência — Cada formato tem um botão de cópia dedicado. Uma marca de verificação substitui o ícone de cópia por dois segundos para confirmar que a cópia foi bem-sucedida.
• Histórico de cores (recurso para apoiadores) — Até 50 cores usadas recentemente são armazenadas no IndexedDB e exibidas como amostras clicáveis. O histórico persiste entre recarregamentos de página. Requer uma assinatura de apoiador Ko-fi.
• Funciona offline após o carregamento — Toda a lógica de conversão é executada em JavaScript. Após o carregamento da página, é possível desconectar da internet e a ferramenta continua funcionando.

Como usar o Color Picker

Passo 1: Abrir a ferramenta e escolher um método de entrada

Navegue para Color Picker. A ferramenta abre com a cor padrão #3B82F6 (um azul médio). Você tem três formas de definir uma cor:

• Clique no botão Pick From Screen (ícone de conta-gotas) para usar a EyeDropper API
• Clique na pequena entrada de amostra de cor no canto superior direito do painel do seletor para abrir a roda de cores nativa do seu navegador
• Digite diretamente nos campos de entrada HEX, R/G/B ou H/S/L

Passo 2: Amostrar uma cor da tela (método EyeDropper)

Clique em Pick From Screen. O rótulo do botão muda para "Picking..." enquanto o EyeDropper está ativo. Seu cursor se torna uma lupa com mira. Clique em qualquer pixel da tela, incluindo pixels fora da janela do navegador na maioria dos sistemas. A ferramenta captura o valor hex, atualiza todos os campos de formato e exibe uma notificação de sucesso. A cor amostrada é adicionada automaticamente ao painel de histórico.

Passo 3: Inserir ou ajustar um valor de cor manualmente

Se você já conhece o valor da cor, digite-o em qualquer campo de entrada. O campo HEX aceita valores com ou sem o prefixo #. As entradas RGB aceitam inteiros de 0 a 255. HSL aceita H (0–360), S (0–100) e L (0–100). Qualquer alteração de campo recalcula e atualiza os outros dois formatos simultaneamente.

Passo 4: Ver todas as conversões de formato de cor

Role até o cartão All Formats abaixo do seletor principal. Este painel exibe o conjunto completo de conversões: HEX, RGB, HSL, HSB e CMYK. Cada linha tem seu próprio botão de cópia. Clique no ícone Copiar ao lado de qualquer formato para gravar esse valor na área de transferência.

Passo 5: Reutilizar cores do histórico

As cores selecionadas anteriormente aparecem como amostras coloridas no painel Recent Colors. Clique em qualquer amostra para recarregar aquela cor no seletor e nos campos de formato. Use o botão Clear (ícone de lixeira) para limpar o histórico se necessário.

Exemplos práticos

Combinar uma cor de marca de um site

Você está construindo uma página de destino e precisa combinar o roxo exato usado no logotipo de um cliente exibido em uma aba do navegador. Clique em Pick From Screen, passe o cursor sobre o logotipo e clique. A ferramenta captura o valor hex, digamos #6B21A8, e exibe imediatamente rgb(107, 33, 168) e hsl(276, 61%, 40%). Copie o formato que seu arquivo CSS usa.

Converter uma cor do Figma para CSS

Sua especificação de design no Figma lista uma cor como rgb(234, 179, 8). Digite 234 no campo R, 179 em G e 8 em B. O campo HEX atualiza para #EAB308 e HSL exibe hsl(45, 93%, 47%). Copie o valor HEX para usar em uma classe Tailwind como bg-[#EAB308] ou o HSL para uma propriedade personalizada CSS.

Verificar como um código hex realmente parece

Uma revisão de código mostra background: #1E3A5F e você quer visualizá-lo. Cole o valor no campo HEX. A grande amostra de visualização de cor se preenche com a cor (um azul marinho escuro) e a cor do texto do rótulo se ajusta automaticamente entre preto e branco para legibilidade. Você pode compará-lo com outras cores usando as amostras do histórico.

Dicas e boas práticas

Use o painel de histórico como paleta temporária (recurso para apoiadores). A ferramenta armazena até 50 cores no IndexedDB para apoiadores premium. Construa uma pequena paleta amostrando ou inserindo cores uma de cada vez; cada uma se torna uma amostra clicável à qual você pode retornar sem anotar valores.

O EyeDropper funciona em qualquer pixel, incluindo quadros de vídeo. Pause um vídeo no quadro com a cor-alvo e use Pick From Screen. A API amostra o pixel renderizado, não a fonte comprimida.

Digite valores HSL para controle preciso. Se você quiser um matiz específico com saturação menor, digite diretamente nos campos H e S. HSL é mais intuitivo para ajustes como "mesma cor, 20% mais clara" (aumentar L em 20).

URLs compartilháveis codificam a cor atual. A ferramenta usa um hook de estado compartilhável: seu valor HEX atual está codificado na URL da página. Copie a URL do navegador para enviar uma cor específica a um colega.

Limpe o histórico antes de compartilhar um dispositivo. Se você selecionar cores que incluem ativos de design confidenciais, use o botão Clear no painel de histórico para removê-los do IndexedDB antes de entregar o dispositivo.

Problemas comuns e solução de problemas

A mensagem "EyeDropper não compatível" aparece. A EyeDropper API requer um navegador baseado em Chromium (Chrome 95+, Edge 95+). Firefox e Safari não a suportam no início de 2026. Use a amostra de entrada de cor nativa ou digite o valor manualmente em navegadores não compatíveis.

O campo HEX não mostra atualização após digitar. O campo requer um código hex válido de 3, 4, 6 ou 8 caracteres, com ou sem #. Valores parciais como #3B são aceitos na entrada, mas a conversão só é ativada quando um código válido completo está presente.

Valores RGB fora do intervalo. Cada campo R, G, B é limitado a 0–255. Digitar um valor acima de 255 é corrigido para 255 ao perder o foco. O fallback parseInt significa que caracteres não numéricos se resolvem para 0.

O formato copiado mostra o valor errado. Cada botão de cópia copia sua cadeia de formato específica. Certifique-se de clicar no ícone de cópia na linha do painel All Formats correspondente ao formato de que você precisa, não no da linha de entrada HEX principal.

O histórico não persiste após o recarregamento. O histórico é um recurso exclusivo para apoiadores que usa IndexedDB. Se você não for um apoiador premium, o painel de histórico não registrará entradas. Se o IndexedDB estiver desabilitado ou indisponível no modo privado/anônimo, o painel de histórico aparecerá vazio a cada visita. A ferramenta trata isso silenciosamente.

Privacidade e segurança

Color Picker processa tudo localmente no seu navegador usando JavaScript. Nenhum valor de cor, conteúdo de tela ou dados de uso são transmitidos a qualquer servidor. A EyeDropper API captura apenas o único pixel que você clica; nenhuma captura de tela ou gravação de tela ocorre. O histórico de cores é armazenado no IndexedDB do seu navegador, não em qualquer banco de dados externo. A ferramenta funciona completamente offline uma vez que a página foi carregada, e é segura para usar com ativos de design confidenciais.

Perguntas frequentes

O Color Picker é gratuito?

Sim, Color Picker é completamente gratuito sem necessidade de cadastro. Os recursos principais, amostragem com EyeDropper, conversão de múltiplos formatos e cópia para área de transferência, estão todos disponíveis sem uma conta de apoiador. Recursos de apoiador premium, como histórico de cores, predefinições e notas de ferramenta, estão disponíveis com uma assinatura de apoiador Ko-fi.

O Color Picker funciona offline?

Sim. Após o carregamento da página, o Color Picker funciona sem conexão com a internet. Toda a lógica de conversão de cores está implementada em JavaScript executado no seu navegador. A EyeDropper API também é um recurso nativo do navegador que não requer acesso à rede.

Meus dados estão seguros com o Color Picker?

Sim. Nenhum dado de cor ou conteúdo de tela sai do seu navegador. A EyeDropper API captura um valor de pixel no momento em que você clica; ela não tira capturas de tela nem grava sua tela. O histórico de cores é armazenado apenas no IndexedDB do seu navegador. A Glyph Widgets não tem visibilidade do lado do servidor sobre quais cores você seleciona.

Quais navegadores suportam o botão EyeDropper?

A EyeDropper API funciona no Chrome 95 e posterior, Edge 95 e posterior, e outros navegadores baseados em Chromium. Não é compatível com Firefox ou Safari. A ferramenta detecta o suporte em tempo de execução e exibe uma mensagem clara em vez de um botão quebrado em navegadores não compatíveis.

Quais formatos de cor a ferramenta produz?

A ferramenta converte e exibe HEX (ex.: #3B82F6), RGB (ex.: rgb(59, 130, 246)), HSL (ex.: hsl(217, 91%, 60%)), HSB (também chamado de HSV) e CMYK. O painel All Formats exibe os cinco simultaneamente e fornece botões de cópia individuais para cada um.

Posso inserir um valor de cor sem usar o conta-gotas?

Sim. Você pode digitar diretamente nos campos de entrada HEX, R/G/B ou H/S/L. Você também pode clicar na pequena entrada de cor nativa (o quadrado colorido ao lado do botão Pick From Screen) para abrir a roda de cores integrada do seu navegador. Os três métodos de entrada atualizam o mesmo estado de cor interno.

Quantas cores o painel de histórico armazena?

O painel de histórico armazena até 50 cores (recurso para apoiadores). Quando o limite é atingido, a entrada mais antiga é removida. O histórico é salvo no IndexedDB e persiste entre sessões do navegador. Este recurso requer uma assinatura de apoiador Ko-fi.

Posso compartilhar uma cor específica com alguém?

Sim. A cor atual está codificada na URL da página como estado compartilhável. Copie a URL da barra de endereços do navegador após selecionar uma cor. Quando seu colega abrir o link, a ferramenta carrega com aquela cor pré-selecionada e exibe uma notificação "Loaded from share". Você também pode usar os botões de compartilhamento na parte inferior da página para postar diretamente no Twitter, LinkedIn ou Reddit.

A ferramenta funciona com valores de alfa/transparência?

A ferramenta atual trabalha principalmente com cores completamente opacas. O campo de entrada HEX aceita códigos hex de 3, 4, 6 e 8 dígitos (códigos de 4 e 8 dígitos incluem um canal alfa), mas as entradas RGB e HSL não expõem um controle deslizante de alfa separado. Se você precisar de valores RGBA ou HSLA, os valores RGB e HSL exibidos podem ser estendidos manualmente com o valor alfa desejado.

O que acontece se eu digitar um código hex inválido?

O campo de entrada HEX aceita valores parciais ou inválidos enquanto você digita. A conversão de cor só é atualizada quando um código hex válido está presente (3, 4, 6 ou 8 caracteres, com ou sem #). Valores parciais não causam erros; a exibição simplesmente mantém a última cor válida.

Ferramentas relacionadas

• Contrast Checker — Teste se as cores de primeiro plano e plano de fundo escolhidas atendem aos padrões de acessibilidade WCAG 2.1 após selecioná-las com o Color Picker.
• Color Converter — Converta entre formatos de cor adicionais não mostrados na interface principal do seletor.
• Em breve: Palette Generator — Gere uma paleta de cores completa a partir do valor hex que você selecionou.
• Em breve: Gradient Generator — Use as cores que você amostrou para criar gradientes CSS com um editor visual.

Experimente o Color Picker agora: Glyph Widgets Color Picker