Go Toolstack

Seletor de Cores e Conta-gotas

Extraia cores de qualquer imagem e copie os códigos HEX, RGB e HSL em um clique.

Seletor de Cores e Conta-gotas

Extraia cores de qualquer imagem e copie os códigos HEX, RGB e HSL em um clique.

Como funciona

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.

Descubra mais utilitários do lado do cliente nesta categoria

Central de Imagens & Design • Fluxos de trabalho e guia de comparação

Explore todas as ferramentas de imagens & design, limites técnicos e guia de seleção.

Explorar central →
Gerador de Códigos QR Personalizado

Crie QR Codes de alta qualidade para links, senhas de Wi-Fi, cartões de contato e textos.
Compressor de Imagens

Comprima fotos e ilustrações em JPEG, PNG e WebP para otimizar velocidade de sites.
Redimensionador de Imagens

Altere as dimensões das suas fotos em pixels com proporção travada.

Guias do blog relacionados

Guias técnicos, resolução de problemas e tutoriais de melhores práticas

Central de Conhecimento e Conceitos

Seletor de Cores Online, Conta-Gotas (Eyedropper) e Harmonias Cromáticas

A captura, calibração e composição de paletas visuais no design gráfico e desenvolvimento front-end dependem de instrumentos de amostragem precisos capazes de converter valores cromáticos em tempo real entre diferentes sistemas de coordenadas digitais (HEX, RGB, HSL e CMYK). O seletor de cores integra um conta-gotas digital (Eyedropper API) de nível de tela para extrair qualquer pixel visível e calcula regras de harmonia cromática fundamentadas na teoria clássica das cores.

Um designer de produto precisa definir a paleta visual de uma nova aplicação a partir de um tom de Azul Cobalto (#1E40AF). Ao posicionar o cursor no espectro cromático, a ferramenta decompõe a cor instantaneamente: RGB(30, 64, 175), HSL(226°, 71%, 40%) e CMYK(83%, 63%, 0%, 31%). O motor calcula simultaneamente as relações no círculo cromático: gera a cor complementar direta (#AF8D1E - Amarelo Ouro), a tríade harmônica equilibrada (#AF1E40 e #40AF1E) e paletas de tons análogos suaves e variações monocromáticas, viabilizando a cópia do código hexadecimal ou snippet CSS com um clique.

A conversão de modelos cromáticos e o cálculo de harmonias acontecem 100% no seu navegador. Nenhuma paleta de cores ou conceito visual de seus projetos de design é transferido para a rede.

Arquitetura Central e Fórmula Matemática

Círculo Cromático: Complementar = ( Matiz HSL + 180° ) mod 360° | Tríade = ( Matiz HSL ± 120° ) mod 360°

Algoritmos geométricos de teoria das cores aplicados sobre o cilindro cromático HSL que calculam relações harmônicas angulares de matiz e saturação.

Melhores Práticas e Diretrizes Essenciais

  • Utilize o modelo HSL para fazer ajustes finos de luminosidade e saturação: Alterar a porcentagem de Lightness no HSL preserva o tom da cor original muito melhor do que tentar ajustar códigos hexadecimais.
  • Adote esquemas de cores complementares para botões de conversão (CTAs): Contrastar a cor de destaque contra a cor dominante da interface orienta a atenção visual do usuário para o ponto de ação.
  • Valide o contraste das cores selecionadas contra o fundo antes da homologação: Certifique-se de que combinações cromáticas atendam à exigência mínima de contraste WCAG AA para textos legíveis.
  • Consulte os valores CMYK caso o projeto envolva impressão gráfica física: Cores digitais muito saturadas no espaço RGB podem perder intensidade quando impressas em papel pelo sistema CMYK.

Perguntas Frequentes (FAQ)

O que é o recurso de conta-gotas (Eyedropper) e como ele funciona?
O conta-gotas utiliza a API nativa dos navegadores modernos para permitir clicar em qualquer pixel visível na tela do computador e capturar sua cor exata em hexadecimal.
Por que cores vistas na tela ficam diferentes quando impressas em gráfica?
Porque telas emitem luz através do espaço aditivo RGB (gerando milhões de tons brilhantes), enquanto impressoras utilizam tintas no espaço subtrativo CMYK com espectro mais estreito.
O que são cores 'análogas' na composição visual?
Cores análogas são aquelas que ficam lado a lado no círculo cromático (distância de cerca de 30° a 60°), criando combinações visuais serenas, suaves e com pouca tensão de contraste.
A ferramenta permite salvar minhas cores favoritas na tela?
Sim. Você pode fixar amostras na barra de paleta rápida para alternar entre diferentes tons e copiar os códigos conforme avança no desenvolvimento do layout.