Loading…

Sobre Seletor e Conversor de Cores Online

Solte uma imagem, cole uma cor ou use a roda para capturar cores com precisão de pixel. A ferramenta executa uma análise rica no lado do cliente: normaliza seu HEX, calcula RGB/HSL/HSV/CMYK, converte para XYZ/LAB/LCH, calcula luminância e contraste WCAG, e gera paletas harmônicas. Você pode então copiar qualquer formato como um token pronto para CSS ou usar as harmonias para construir um sistema de design coeso.

O Que Este Seletor de Cores Pode Fazer

  • Amostre cores de imagens* ou comece com uma roda de cores precisa ou entrada HEX/RGB
  • Conversões avançadas: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
  • Verificador de contraste WCAG integrado contra #000000 e #FFFFFF usando luminância relativa
  • Sugestões de HEX seguras para a web e abreviadas quando aplicável
  • Harmonias de cores: complementar, triádica, tetrádica, análoga, monocromática (calculadas via rotação de matiz)
  • Visualização de luminância e brilho percebido para antecipar problemas de contraste
  • Correspondência aproximada estilo Pantone baseada na distância RGB mais próxima (com conjunto de dados em cache)
  • A análise é executada no lado do cliente; apenas dados mínimos são usados quando a busca opcional por Pantone está ativada

🔧 Como Usar o Seletor de Cores for color-picker

1

1. Escolha ou selecione uma cor base

Cole um valor HEX, digite RGB/HSL ou use o seletor para capturar uma cor de uma imagem ou da roda. A ferramenta normaliza internamente para um valor HEX seguro.

2

2. Ajuste matiz e luminosidade

Ajuste matiz, saturação e luminosidade até que a amostra pareça correta. Uma visualização ampla mostra a cor em superfícies claras e escuras para contexto.

3

3. Leia e copie os formatos que você precisa

Copie HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB e LCH com um clique. Use-os para variáveis CSS, tokens de design ou notas de entrega.

4

4. Verifique o contraste WCAG

Veja as taxas de contraste versus #000000 e #FFFFFF baseadas na luminância sRGB. Use os resultados para decidir rapidamente se uma cor funciona para texto do corpo, títulos grandes ou elementos de UI.

5

5. Gere harmonias e construa uma paleta

Explore cores complementares, triádicas, tetrádicas, análogas e monocromáticas geradas via rotação de matiz. Adicione suas favoritas a uma paleta/histórico e exporte-as como tokens.

Detalhes Técnicos

Manipulação e Normalização de Entrada

A ferramenta aceita códigos de cores hexadecimais e os converte em um HEX normalizado de 6 dígitos como referência interna.

AspectoComportamentoNotas
Normalização HEXHEX de 3 e 6 dígitos, # opcional no inícioHEX curto (ex: #0f8) é expandido para #00ff88; caracteres não hexadecimais são removidos.
Suporte HEX8RGBA via #RRGGBBAACanal alfa é convertido para 0–255 e anexado como o 4º byte.
Sugestão web-safeAjuste para o múltiplo de 51 mais próximo por canalValores são arredondados para o múltiplo mais próximo de 51 (0, 51, 102, 153, 204, 255).
Sugestão de HEX abreviadoApenas quando compressívelMostrado quando cada par de dígitos HEX é repetido (ex: #112233 → #123).

Espaços de Cor & Conversões

Todos os cálculos são baseados em sRGB com branco de referência D65.

EspaçoCálculoUso
RGBA partir de HEX normalizado (0–255 por canal)Representação base para conversões.
HSL / HSVTransformações cilíndricas padrão de sRGBUsado para edições intuitivas e cálculos de harmonia.
CMYKAproximação independente de dispositivoCalculado como 1−max(R,G,B) com componentes 0–100%; não vinculado a perfis ICC.
XYZsRGB linearizado → XYZ usando matriz D65Espaço intermediário para LAB/LCH e análises mais profundas.
LABCIE L*a*b* a partir de XYZEspaço métrico perceptualmente mais uniforme.
LCHCIE L*C*h° a partir de LABÚtil para ajustes de matiz/croma/luminosidade e design de paletas perceptuais.

Luminância & Contraste WCAG

O contraste é calculado usando a fórmula padrão de luminância relativa WCAG.

AspectoDetalhesNotas
Luminância relativaCalculada a partir do sRGB linearizado (componente Y)Usa coeficientes 0,2126R + 0,7152G + 0,0722B.
Taxa de contraste(L1 + 0,05) / (L2 + 0,05)A ferramenta reporta contraste vs #000000 e #FFFFFF.
Limiares WCAGAA/AAA para texto normal e grandeLimiares típicos: 4,5:1 (AA normal), 3:1 (AA grande), 7:1 (AAA normal), 4,5:1 (AAA grande).

Harmonias & Cores Derivadas

As harmonias são geradas como rotações simples de matiz em HSL, preservando saturação e luminosidade.

HarmoniaRegraExemplo
Complementar+180° de matizPonto oposto no círculo cromático.
Triádica±120° de matizTrês cores igualmente espaçadas.
Tetrádica+90°, +180°, +270° de matizQuatro cores formando um retângulo no círculo.
Análoga−30° / +30° de matizVizinhos ao redor da cor base.
MonocromáticaClarear/escurecer em LVersões mais claras e escuras da mesma matiz.

Correspondência Estilo Pantone (Aproximada)

Quando o conjunto de dados Pantone está disponível, a ferramenta calcula uma correspondência mais próxima no espaço RGB.

AspectoComportamentoNotas
Carregamento do conjunto de dadosCarregamento em cache + assíncrono via getPantoneColors / getPantoneColorsCachedA interface pode mostrar uma correspondência instantaneamente quando o cache está quente, ou após um curto carregamento assíncrono.
Métrica de correspondênciaDistância euclidiana quadrada em RGB (0–255)Aproximação rápida e simples; não é uma métrica perceptual ΔE*.
SaídaID e nome semelhantes ao PantoneExibido apenas como orientação; não é um mapeamento oficial Pantone.

Desempenho e Privacidade

Conversões, luminância, contraste e harmonias são calculados inteiramente no lado do cliente. A consulta Pantone pode acessar um conjunto de dados local ou remoto dependendo da configuração, mas as cores brutas permanecem como simples strings HEX, a menos que você as compartilhe ou exporte explicitamente.

Casos de Uso Populares

UI/UX e Front-End

  • Crie pares acessíveis de primeiro plano/fundo para botões, links e texto.
  • Exporte variáveis CSS e tokens de design diretamente das cores escolhidas.
  • Verifique o contraste para modos claro/escuro antes de implementar um comutador de tema.
/* Tokens de cor CSS */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

Branding e Identidade Visual

  • Derive uma paleta primária/secundária/acentos a partir de uma única cor principal.
  • Explore opções complementares ou triádicas para um logotipo ou linha de produtos.
  • Obtenha uma nomenclatura aproximada semelhante à Pantone antes de preparar um guia de marca.

Visualização de Dados e Painéis

  • Defina cores de série que permaneçam distinguíveis em fundos claros e escuros.
  • Use LAB/LCH para projetar paletas com passos perceptuais controlados.
  • Verifique rapidamente se as cores do gráfico atendem às expectativas de contraste na legenda e rótulos.

❓ Frequently Asked Questions

Qual é a diferença entre HEX, RGB, HSL e HSV?

HEX é apenas uma forma compacta de escrever valores RGB em base 16. RGB descreve os componentes vermelho/verde/azul em sRGB. HSL e HSV são modelos cilíndricos mais intuitivos: H é matiz na roda de cores, S é saturação e L/V controla brilho ou luminosidade.

Por que os valores CMYK parecem aproximados?

A saída CMYK real depende de perfis de impressora, tinta, papel e calibração. Esta ferramenta mostra uma aproximação independente de dispositivo útil para decisões iniciais de design, mas o trabalho final de impressão deve ser verificado com os perfis ICC do seu fornecedor de impressão.

Para que servem LAB e LCH?

LAB e LCH são mais uniformes perceptualmente do que RGB bruto. Passos numéricos iguais em L ou C tendem a parecer mais consistentes aos olhos, o que os torna ótimos para gerar tons, sombras e paletas equilibradas ou para medir distância visual entre cores.

Como o contraste é calculado?

Calculamos a luminância relativa a partir do sRGB usando a fórmula WCAG, depois derivamos a razão de contraste (L1 + 0,05) / (L2 + 0,05). O resultado é comparado com limites comuns, como 4,5:1 (texto normal AA) e 7:1 (texto normal AAA).

Os nomes Pantone são exatos?

Não. Qualquer rótulo semelhante ao Pantone é uma correspondência aproximada do vizinho mais próximo no espaço RGB e é fornecido apenas para orientação. Para trabalhos críticos de produção, valide sempre com bibliotecas e ferramentas oficiais Pantone.

Vocês armazenam minhas imagens ou cores?

Os cálculos de cor (formatos, contraste, harmonias) são realizados no lado do cliente. Dependendo da configuração, uploads de imagem e conjuntos de dados Pantone podem envolver um servidor, mas a ferramenta é projetada para processamento transitório, não para armazenamento de longo prazo. Para ativos altamente confidenciais, prefira ferramentas locais/offline.

Pro Tips

Best Practice

Sempre visualize as cores em superfícies claras e escuras; a saturação e o contraste percebidos podem mudar drasticamente com o contexto.

Best Practice

Use LAB ou LCH ao gerar tons e sombras para que as mudanças de brilho pareçam mais uniformes aos olhos humanos.

Best Practice

Verifique o contraste AA/AAA para todos os estados interativos (hover, ativo, desativado), não apenas a cor padrão do botão.

Best Practice

Exporte variáveis CSS ou tokens de design da aba de formatos para manter as cores consistentes em seus componentes.

Best Practice

Ao amostrar de imagens, faça a média de uma pequena área em vez de um único pixel para reduzir o ruído da compressão e anti-aliasing.

Additional Resources

WCAG 2.2 – Contraste (Mínimo)
Documentation
Módulo de Cor CSS Nível 4
Documentation
MDN – Valores de <color>
Documentation
Colorimetria CIE (XYZ/LAB)
Documentation

Other Tools