Seletor de cores, busca de nomes de cores e extração de paleta de imagens | Conversão HEX, RGB e HSL

O que esta ferramenta de cores e paletas pode fazer

Converta HEX, RGB e HSL, encontre os nomes CSS mais próximos, colete pixels de uma imagem e extraia uma paleta de 2 a 16 cores. A imagem permanece no navegador.

Passos para converter códigos de cor

1. Escolher formato de entradaUse HEX para códigos web, RGB para valores na tela e HSL para ajustar matiz, saturação e luminosidade.
2. Inserir valor para analisarHEX pode ser inserido com ou sem #. RGB varia de 0 a 255; S e L do HSL variam de 0 a 100.
3. Verificar resultados nos 3 formatosSe houver transparência, exibimos em HEX de 8 dígitos e na sintaxe com barra do CSS.
4. Escolher sugestões de combinaçãoClique em uma cor sugerida para reanalisar usando essa cor como nova referência.
5. Verifique o contraste com a cor de fundoO texto do corpo deve ter, no mínimo, 4,5:1 e não deve depender apenas da cor para transmitir informação.

Passos para extrair cores principais de uma imagem

1. Escolher imagem do dispositivoSuporta PNG, JPEG, WebP, GIF e BMP até 25 MB. GIFs animados usam o primeiro quadro.
2. Clique na imagem se necessárioVocê pode verificar primeiro a cor exata de uma posição específica, como logotipo, roupa ou fundo.
3. Definir número de cores a extrairLogotipos: 3 a 5 cores; fotos: 6 a 10 cores como referência. Aumentar demais o número de cores faz com que cores semelhantes fiquem lado a lado.
4. Extrair cores principaisReduz a imagem para uma resolução mais leve e agrupa até cerca de 14.000 pixels.
5. Salve em CSS, JSON e PNGPara desenvolvimento web, CSS é adequado; para análise e reutilização, JSON; para materiais compartilhados, PNG.

Diferença entre HEX, RGB e HSL

Pesquise nomes e confira cores próximas

Pesquise nomes em português, palavras-chave CSS como midnightblue, valores HEX ou famílias de cor. Correspondências CSS exatas são separadas de candidatos visualmente próximos calculados no espaço Oklab.

Nomes de cor variam entre setores, países, impressão e catálogos de produtos. Use HEX ou RGB na especificação final; trate nomes como “caqui” apenas como referência.

Precisão e limites da extração de paleta

Esta ferramenta agrupa pixels por distância de cor e calcula a cor central e a proporção de cada grupo. Diferente de contar apenas cores idênticas frequentes, é melhor para lidar com compressão JPEG e gradientes finos.

Por outro lado, não é uma IA que entende o significado ou assunto da foto para escolher cores. Cores de logotipo pequenas, texto fino e cores de destaque com área pequena podem não entrar nas cores principais. Nesse caso, clique diretamente na imagem para capturar a cor. A aparência na tela varia com monitor, perfil de cor e navegador.

Como interpretar a taxa de contraste

Para texto de tamanho normal, a proporção de contraste com o fundo deve ser de pelo menos 4,5:1; para texto grande, 3:1 (WCAG AA). Combinações com matizes diferentes, mas luminosidade próxima, como branco sobre amarelo vivo, são difíceis de ler.

Logotipos, decorações e texto incidental em fotos têm tratamento diferente, mas para informações importantes, como corpo do texto, botões e rótulos, garanta contraste confortável. Em gradientes ou fundos de foto, a proporção varia por local; verifique na posição mais difícil de ler.

Como usar cores complementares, análogas e tríades

Processamento sem envio de imagem e dados de cor

Carregamento de imagem, redução, obtenção de pixels, agrupamento, conversão de cores, cálculo de contraste e criação de CSS, JSON e PNG são feitos no navegador. Não enviamos imagens ou cores extraídas para servidores da WiseChecker, APIs externas ou IA generativa.

‘Selecionar cor na tela’ usa a API EyeDropper fornecida pelo navegador. Recebemos apenas uma cor permitida, sem salvar ou enviar a imagem inteira da tela. Recarregar a página apaga a imagem e os resultados.

Perguntas frequentes sobre seletor de cores e extração de paleta

Ferramentas gratuitas relacionadas