Escolha cores, converta entre espaços, gere escalas e cheque contraste WCAG.
Selecionar uma cor é fácil; escolher uma cor que funcione bem em interface já é outra história. Aqui a cor pode entrar de quatro jeitos: digitada (HEX, rgb(), hsl() ou nome CSS), ajustada nos sliders de HSL ou HSB, capturada da tela pelo conta-gotas do navegador (o botão só aparece onde essa API existe) ou amostrada pixel a pixel numa imagem que você abre. A partir dela, a ferramenta devolve seis leituras copiáveis: HEX, RGB, HSL e OKLCH saem prontas para colar em CSS; HSB é o formato dos editores gráficos e CMYK serve à impressão, e por isso vêm marcados como fora do CSS. A aba de escala gera os degraus 50 a 950 mantendo matiz e croma e variando só a claridade em OKLCH, que é o jeito de montar uma escala de design token sem que os tons claros lavem e os escuros mudem de cor. Também gera tints (mistura com branco), shades (com preto) e tones (com cinza). Na aba de contraste, a razão WCAG contra branco e contra preto vem com veredito por critério, AA e AAA, para texto normal, texto grande e componentes, e não apenas dois números soltos. As cores que interessam vão para uma paleta salva no próprio navegador e saem como custom properties CSS, variáveis SCSS ou JSON.
A cor escolhida aparece em HEX (#RRGGBB, dois dígitos hexadecimais por canal, #0EA5E9 corresponde a R=14, G=165, B=233), RGB (canais de 0 a 255), HSL (matiz, saturação e luminosidade), OKLCH (claridade perceptual, croma e matiz), HSB (o mesmo matiz com saturação e brilho, formato dos editores gráficos) e CMYK (ciano, magenta, amarelo e preto, do mundo impresso).
Nem todos são CSS. HEX, RGB, HSL e OKLCH podem ser colados direto numa folha de estilo; HSB e CMYK não existem como função CSS e por isso a ferramenta os marca, evitando o erro clássico de colar cmyk() no navegador e ver a regra ser ignorada.
Clarear e escurecer em HSL costuma decepcionar: a mesma variação de luminosidade produz saltos de brilho percebido muito diferentes conforme o matiz, e amarelos e cianos ficam lavados enquanto azuis escurecem cedo demais. OKLCH foi desenhado para que passos iguais de L correspondam a passos parecidos de claridade percebida.
Por isso os degraus 50 a 950 são gerados fixando matiz e croma da sua cor e variando apenas o L, com o croma afinando nas pontas. Quando um degrau pedido cai fora do que o sRGB alcança, a ferramenta reduz o croma até caber em vez de cortar canal por canal, o que preservaria o número mas trocaria o matiz na tela. O degrau mais próximo da sua cor recebe o valor original, intacto, e é marcado como base.
Tints, shades e tones seguem as definições clássicas e são feitos por mistura direta: tint é a cor com branco, shade é com preto e tone é com cinza médio, útil quando você quer dessaturar sem mudar de matiz.
O contraste é calculado pela fórmula do WCAG: cada canal é linearizado, combinado por luminância (0,2126·R + 0,7152·G + 0,0722·B), e a razão sai como (mais claro + 0,05) / (mais escuro + 0,05). Ela vale de 1:1 (cores idênticas) a 21:1 (preto sobre branco).
A ferramenta calcula a razão contra branco e contra preto e, para cada uma, diz o que ela cumpre: 4,5:1 para texto normal em AA, 7:1 para texto normal em AAA, 3:1 para texto grande em AA e para componentes de interface e ícones, 4,5:1 para texto grande em AAA. Cada critério vem com sinal de aprovado ou reprovado e com o texto correspondente, nunca só pela cor, porque um indicador que depende de enxergar verde ou vermelho é exatamente o que uma ferramenta de acessibilidade não pode fazer.
O HEX copiado alimenta CSS, tokens de design system, handoff entre design e desenvolvimento e documentação de marca; a escala exportada como custom properties entra direto no :root do projeto, e o mesmo conjunto sai como variáveis SCSS ou JSON quando o pipeline de tokens pede outro formato.
No lado da acessibilidade, cor bonita não é sinônimo de cor legível: além de mirar 4,5:1 para texto, nunca comunique um estado importante (erro, sucesso, seleção) apenas pela cor, pois quem tem baixa visão ou daltonismo pode não distinguir. Combine a cor com ícone, texto ou forma para não excluir ninguém.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/color-picker"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Color Picker"
></iframe>Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
Seis, todos copiáveis com um clique: HEX, RGB, HSL, OKLCH, HSB e CMYK. Os quatro primeiros podem ser colados direto em CSS; HSB é o formato dos editores gráficos e CMYK é de impressão, então vêm marcados como fora do CSS. Todos descrevem a mesma cor, apenas por sistemas de coordenadas diferentes.
#14b8a6Tudo roda no seu navegador: a imagem aberta não sai do dispositivo, e a paleta salva fica só neste aparelho.