Color Picker Pro
Advanced color picker with multiple format support
Color Formats
Color Harmony
Color Picker Pro
Advanced color picker with multiple format support
Features
- Escolha cores via deslizadores tom/saturação/luminosidade ou cole um valor HEX, RGB ou HSL para sincronizar todos os canais instantaneamente
- Saída em seis formatos simultaneamente: HEX, RGB, RGBA, HSL, HSLA e CMYK (pronto para impressão, sem incorporação de perfil)
- Razão de contraste WCAG 2.1 contra qualquer cor de texto de teste, com selos AA (4.5:1) e AAA (7:1) usando luminância relativa pela fórmula W3C
- Gerador de harmonia de cor produzindo variantes complementar, triádica, análoga e monocromática a partir do tom atual
- Paletas curadas incluindo Material Design, Tailwind CSS e um conjunto de alto contraste focado em acessibilidade
- Histórico local de cores com até 20 escolhas recentes persistido em localStorage (limpo sob demanda, nunca sincronizado)
- Suporte de canal alfa para saídas RGBA e HSLA prontas para integrar em propriedades personalizadas CSS
- Cores de amostra aleatórias e cópia em um clique para qualquer string de formato individual
How to use
- Arraste os deslizadores tom/saturação/luminosidade ou cole um HEX conhecido para conduzir o seletor desde um ponto de partida definido.
- Ajuste o deslizador alfa se precisar de transparência (sobreposição, efeito vidro, token de design).
- Abra o painel Formatos para ver HEX, RGB(A), HSL(A) e CMYK lado a lado e copie o que seu stack espera.
- Ative o painel Acessibilidade e defina uma cor de texto teste para verificar que a razão WCAG cumpre AA ou AAA antes de enviar.
- Abra Harmonia de Cor para obter companheiros complementares, triádicos ou análogos para uma paleta equilibrada.
- Adicione escolhas ao Histórico enquanto experimenta; clique em qualquer amostra para recuperá-la mais tarde.
Tips & Best Practices
- Visualize mudanças em tempo real enquanto ajusta as configurações.
- Copie o código gerado diretamente para sua folha de estilo CSS.
- Teste seus designs em modo claro e escuro para acessibilidade.
- Use as ferramentas de desenvolvedor do navegador juntamente para testes ao vivo.
- Salve suas configurações favoritas para acesso rápido depois.
FAQ
Por que o mesmo HEX mostra valores RGB diferentes em outras ferramentas?
Valores de cor podem ser especificados em sRGB ou display-P3, e navegadores podem renderizá-los diferente dependendo da calibração do monitor e perfis ICC. Este seletor usa sRGB (padrão CSS Color Module Level 3) e arredonda para canais de 8 bits (0–255). Para tokens de design wide-gamut, use uma ferramenta P3-consciente e converta com notação color() do CSS Color Level 4.
Como a razão de contraste WCAG é calculada?
A razão usa a fórmula de luminância relativa W3C: cada canal sRGB é linearizado (gamma sRGB-para-linear), ponderado por 0.2126R + 0.7152G + 0.0722B, depois as luminâncias mais clara e mais escura são combinadas como (L1 + 0.05) / (L2 + 0.05). AA passa em 4.5:1 para texto normal e 3:1 para texto grande; AAA passa em 7:1. A matemática corre no seu navegador sobre o par primeiro plano/fundo atual.
Algo é enviado para um servidor quando escolho uma cor?
Não. Conversões de cor, pesquisa de paletas, matemática de contraste e histórico todos correm do lado cliente em JavaScript. O único armazenamento persistente é localStorage para histórico, que vive no seu dispositivo e nunca o deixa. Você pode usar a ferramenta offline depois que a página é cacheada.
Por que a saída CMYK não corresponde exatamente aos meus valores Pantone ou Adobe?
CMYK é dependente de dispositivo e requer um perfil ICC para ser preciso para impressão. Ferramentas de navegador não podem embutir um perfil CMYK, então a saída aqui é uma conversão sRGB-para-CMYK ingênua útil apenas para referência rápida. Para trabalho de produção, gere CMYK no Photoshop ou Illustrator com o perfil da sua impressora.
Como o gerador de harmonia escolhe suas cores?
O gerador rotaciona o tom HSL atual: complementar é +180 graus, triádico adiciona duas cores em +120 e +240, análogo adiciona vizinhos em +30 e +330, monocromático desloca saturação e luminosidade. Esta é uma abordagem mecânica de roda de cores: dá um ponto de partida mas não leva em conta uniformidade perceptual, que requereria espaços de cor Oklch ou Lab.
Posso usar esses valores diretamente como propriedades personalizadas CSS?
Sim. A saída HSL cai direto em CSS moderno como `--brand: hsl(217 100% 60%)` ou com alfa como `hsla(217, 100%, 60%, 0.8)`. HSL é geralmente preferida para tokens de design porque torna rampas de luminosidade triviais — empurrar o terceiro valor dá estados hover e ativo instantâneos sem recomputar RGB.
O seletor suporta saída display-P3 ou wide-gamut?
Atualmente não. O seletor assume sRGB e emite HEX/RGB de 8 bits por canal. Se precisar de P3 ou Rec.2020, use uma ferramenta que emita sintaxe CSS Color Level 4 como `color(display-p3 0.4 0.5 0.9)`. Podemos adicionar isso quando o suporte do navegador se estabilizar em todos os alvos.
Por que meu histórico de cores salvo desapareceu?
Histórico persiste em localStorage vinculado a este domínio. Limpar dados do navegador, usar modo privado/anônimo ou mudar de navegador o redefine. O limite é 20 entradas para evitar problemas de cota — escolhas mais antigas são despejadas conforme novas são adicionadas.