TMHue: um conta-gotas de cores de verdade para Windows

O problema que motivou o produto

Tem tarefa que parece boba até você precisar fazer ela de verdade. Me preocupo bastante em criar elementos bonitos e bem feitos, seguindo boas práticas de UX Design - até porque é a natureza do meu trabalho -, e nesse processo é comum precisar copiar uma cor específica de alguma referência visual.

Vamos imaginar: você está ajustando um layout, vê uma cor irada em algum lugar - um site, uma imagem, uma print antiga - e só quer o código HEX (hexadecimal) ou RGB daquilo. Isso já aconteceu com você?

Como eu costumava fazer:

Tirava print da imagem, colava no PowerPoint e usava o conta-gotas de lá. Ou instalava uma extensão de navegador, que na maioria das vezes era bugada ou travava. Sem falar dos apps "gratuitos" cheios de anúncio que testei. Resultado: só passei raiva. E eu só queria usar um atalho, clicar na cor e seguir minha vida.

Foi dessa dor que resolvi criar meu próprio conta gotas. Sem frescura. Sem botões demais. Rápido, leve e prático de usar. Assim nasceu o TMHue.

A ideia sempre foi manter o escopo pequeno de propósito.

Entenda todas as funcionalidades

1. Captura em qualquer lugar da tela

O atalho de teclado é personalizável e ativa o modo de captura a qualquer momento, mesmo com outra janela em foco. Por padrão:

• CTRL + ALT + T: Ativa o modo de captura de cor
• CTRL + ALT + O: Abre a interface do aplicativo
• CTRL + ALT + K: Abre a interface de contraste (WCAG)

Se preferir, também dá pra capturar clicando no botão "Capturar uma cor" dentro do próprio app.

2. Uma lupa para ajudar na precisão

Durante a captura, uma janela de ampliação mostra o pixel sob o cursor em tempo real. Parece pequeno, mas faz diferença: sem isso é fácil errar o pixel por um ou dois de distância e pegar uma cor diferente da que você queria.

Na prática: com a captura ativa, o ponteiro do mouse vira um pincel e uma mini tela dá zoom no local, mostrando a cor em tempo real. Ao clicar, uma notificação no centro do sua tela confirma que a cor foi copiada e já está pronta para o CTRL+V.

Navegação precisa pelo teclado

Durante a captura com o conta-gotas, as setas do teclado movem o cursor um pixel por vez. Com Shift + Setas, o cursor avança até a próxima mudança de cor detectada na direção escolhida. A lupa também exibe uma dica rápida durante a captura:

Setas: mover 1 px · Shift + Setas: próxima mudança de cor

Escolha o formato antes de copiar

Agora o formato da cor pode ser definido durante a própria captura:

• 1 — HEX
• 2 — RGB
• 3 — HSL

A lupa mostra os atalhos logo abaixo do valor da cor e destaca o formato ativo. Nas configurações, também é possível definir qual formato será usado por padrão nas próximas capturas.

3. Amostragem por área, não só um pixel isolado

Essa função eu criei para os mais perfeccionistas. Já aconteceu de você capturar a mesma cor duas vezes e o resultado dar X numa vez e Y na outra?

Isso acontece quando o conta-gotas lê um único pixel, e a depender da imagem esse pixel pode estar distorcido por compressão, anti-aliasing ou degradê.

No TMHue, essa é uma configuração que a decisão está na sua mão: você escolhe o tamanho da área de amostragem, podendo optar entre precisão (1 pixel) ou estabilidade visual (5x5px ou 11x11px). Isso é útil, por exemplo, ao capturar cores de fotos com textura, ícones com anti-aliasing ou designs com gradientes — onde um único pixel pode não representar bem a cor "real" daquele elemento.

Explicando o funcionamento:

• Pixel único (1x1): lê exatamente o pixel onde o cursor está. É preciso, mas sensível a ruído — se aquele pixel específico tiver uma leve variação (por anti-aliasing, compressão JPEG ou um gradiente sutil), você pode capturar uma cor "errada" que não representa visualmente a região.
• Amostragem em área (ex.: 5x5 ou 11x11): em vez de um único pixel, o app lê um pequeno quadrado de pixels ao redor do cursor e calcula uma cor representativa (mediana) daquela região. Isso suaviza ruído, bordas e transições de cor, entregando um resultado mais estável e fiel ao "que o olho vê".

4. Histórico das últimas cores

As últimas capturas ficam guardadas automaticamente, sem duplicar quando você repete a mesma cor em sequência. E se tem uma cor que você sabe que vai usar de novo mais tarde, dá pra fixar ela pra que não suma quando o histórico for rodando.

5. Contraste WCAG integrado

WCAG (Web Content Accessibility Guidelines) é o padrão internacional de acessibilidade que define, entre outras coisas, o contraste mínimo entre texto e fundo para garantir que qualquer pessoa consiga ler um conteúdo — inclusive quem tem baixa visão.

Por isso, agora dá pra comparar uma cor de texto com uma cor de fundo direto no TMHue e checar a razão de contraste segundo o WCAG, com o resultado nos níveis AA (o padrão mínimo esperado) e AAA (um nível extra, não obrigatório). Quando a combinação não passa nem no AA, o app traz sugestões para atingir esse nível.

6. Harmonia de Cor

Toda cor forte tem "parentes" — tons que combinam com ela de forma natural, seguindo regras que artistas e designers usam há séculos (como cores complementares, análogas ou triádicas). A função pega uma cor que você escolheu e sugere automaticamente esse grupo de tons que funcionam bem juntos.

Na prática: você escolhe uma cor base e a ferramenta te mostra outras cores que combinam com ela — seja para criar contraste (cores opostas, que se destacam) ou para criar uma sensação de unidade (cores próximas, que combinam suavemente). É como ter um consultor de cores ao seu lado, sem precisar saber teoria de cores.

7. Extrair Paleta

Já reparou como fotos, logos e ilustrações têm sempre um conjunto de cores que "conversam" entre si? A função de extrair paleta analisa uma imagem e identifica automaticamente essas cores principais, te entregando uma paleta pronta.

Na prática: você envia uma imagem — uma foto, um design, uma referência visual que gostou — e a ferramenta identifica as cores dominantes nela. É perfeito para quando você quer recriar o clima de uma imagem em outro projeto, ou simplesmente descobrir os códigos exatos das cores que estão ali.

Juntas, as duas se completam: extrair paleta te ajuda a descobrir cores a partir de uma imagem; harmonia de cor te ajuda a expandir e combinar cores a partir de uma escolha manual.

8. Interface intuitiva

Optei por uma interface minimalista, mostrando o histórico de cores capturadas, a lupa de ampliação e o menu de configurações: simples e direto ao ponto.

Confira outros recursos da ferramenta:

• Cópia automática: a cor capturada já vai direto pra área de transferência, pronta pra colar onde for preciso.
• Bandeja do sistema: o app roda em segundo plano com um ícone discreto na bandeja, sem ficar ocupando espaço na barra de tarefas.
• Inicialização com o Windows: opcional, pra quem quer o app sempre disponível sem precisar abrir manualmente.
• Instância única: não tem risco de abrir o app três vezes sem perceber e ficar com processos duplicados rodando.
• Performance: não se preocupe com memória ram sendo drenada, enquanto ele está aberto não deve consumir mais do que 100MB de ram.
• Atualização Automática: o app é atualizado automaticamente quando uma nova versão está disponível. Tudo isso sair sair do app

Sobre a arquitetura

Resumo técnico da stack: o app foi construído em C# e .NET com WPF, usando a API nativa do Windows (P/Invoke, GDI, GetPixel) pra ler a cor diretamente da tela, sem depender de bibliotecas pesadas ou de capturar e salvar imagens.

A separação em três camadas tem um racional bem estruturado:

• TMHue.Core: guarda as regras de negócio sem nenhuma dependência do Windows
• TMHue.Windows: concentra tudo que é específico da plataforma (tela, clipboard, bandeja, inicialização)
• TMHue.App: junta as duas coisas numa interface WPF com MVVM

Na prática, isso significa que a lógica de "como decidir qual cor foi capturada" não fica misturada com "como o Windows enxerga um pixel".

O histórico e as configurações ficam salvos em JSON, com uma proteção simples mas importante: se o arquivo corromper ou crescer além do esperado, o app faz backup do que tinha e recomeça, em vez de travar ou perder tudo silenciosamente.

Por que esse projeto é open source

Não existe versão paga escondida nem funcionalidade trancada atrás de assinatura - é um utilitário gratuito, e qualquer pessoa pode ler o código, sugerir melhoria ou simplesmente compilar a própria versão.

Escolhi deixar aberto porque foi exatamente a falta de uma ferramenta assim, leve e sem frescura, que me fez construir o app. Faz sentido devolver isso pra quem passar pelo mesmo problema.

Conheça o projeto

Esse é um projeto Open Source (código aberto) e totalmente de graça. Se você quiser baixar o app ou dar uma olhada no código, o repositório está logo abaixo.

→Baixar o TMHue→→Repositório no GitHub→

👇 Curtiu este conteúdo?

Se esse projeto te ajudou de alguma forma, deixa uma estrela no repositório e compartilhe com quem também precisa de um conta-gotas leve.
Aproveite para conferir mais artigos aqui no blog!