Seletor de Cores Pro

Seletor de Cores Pro - Ferramenta de Cores Profissional

Seletor de cores avançado com recursos profissionais para designers, desenvolvedores e artistas. Gere harmonias de cores, crie tons e matizes, visualize gradientes, salve cores favoritas e obtenha informações detalhadas sobre cores. Todos os recursos funcionam offline com atualizações instantâneas. Veja também nosso Misturador de Cores e nosso Verificador de Contraste de Cores.

Qual a diferença entre HEX, RGB, HSL e CMYK?

São quatro maneiras de descrever a mesma cor, cada uma adequada a um fluxo diferente. HEX é uma abreviação hexadecimal de 6 dígitos do RGB (#FF5733); é o padrão em HTML e CSS por ser compacta e fácil de copiar. RGB expressa o mesmo valor como três canais 0-255 (rgb(255,87,51)) e é o formato que você manipula em JavaScript ou canvas. HSL re-parametriza a mesma cor como Matiz, Saturação e Luminosidade (hsl(9,100%,60%)); é o modelo mais humano para criar temas porque você pode manter o matiz e ajustar só a luminosidade para gerar matizes e tons. CMYK usa porcentagens de Ciano, Magenta, Amarelo e Preto e existe para impressão — sua tela não consegue exibir CMYK real, então os valores aqui são uma aproximação matemática.

Como escolho uma cor e copio em um clique?

Clique na amostra principal para abrir o seletor nativo do navegador, arraste dentro do degradê e ao longo do controle de matiz até encontrar a cor desejada, e feche o diálogo. Os quatro campos de formato (HEX, RGB, HSL, CMYK) atualizam em tempo real. Clique em qualquer campo — ou no ícone de copiar — para copiar essa representação para a área de transferência; um aviso confirma. Para pegar uma cor que você viu na tela, use o conta-gotas de sistema oferecido pelo Chrome (o pequeno ícone dentro do seletor nativo em navegadores Chromium). Para experimentar rápido, clique em Aleatório várias vezes até algo ressoar e refine ajustando valores HSL. Salve o resultado com o botão Salvar para mantê-lo na biblioteca de localStorage entre sessões.

O que são harmonias cromáticas e quando usar cada uma?

Harmonias cromáticas são grupos de matizes relacionados matematicamente que o olho lê como agradáveis juntos. Complementar (oposta no círculo, azul + laranja) dá o contraste mais alto — use para um acento sobre fundo neutro. Análoga (três matizes a 30 graus) parece natural e serena — use para páginas editoriais e temas de natureza. Triádica (três matizes a 120 graus) é ousada e equilibrada — use para marcas lúdicas e infográficos. Tetrádica (dois pares complementares formando quadrado) é a mais rica e mais difícil — deixe um matiz dominar enquanto os outros apoiam. Monocromática (um matiz, várias luminosidades) é a opção mais segura — use para UI minimalista sofisticada. Aplique a regra 60-30-10: 60% dominante, 30% secundário, 10% acento, seja qual for a harmonia.

Qual a diferença entre tons (shades), matizes (tints) e tons-cinza (tones)?

Na teoria clássica das cores, um tom é sua cor base misturada com preto (mais escura, frequentemente mais dramática); um matiz é sua cor base misturada com branco (mais clara, frequentemente mais suave); um tom-cinza é sua cor base misturada com cinza (mais abafada, frequentemente mais sofisticada). Em termos digitais, tudo é ajuste HSL: um tom abaixa a luminosidade, um matiz aumenta a luminosidade e um tom-cinza abaixa a saturação. Design systems normalmente geram uma rampa de 9 paradas de 50 (matiz mais claro) a 900 (tom mais escuro) para cada cor de marca, para que qualquer elemento de UI — botões, alertas, fundos, bordas — possa puxar um valor consistente do mesmo matiz. Esta ferramenta gera tons e matizes automaticamente; copie a faixa inteira como ponto de partida para seus design tokens.

Como crio um gradiente CSS linear ou radial a partir deste seletor?

Escolha sua cor principal, depois use uma harmonia como Análoga ou Complementar para obter uma segunda cor que o olho aceite como mistura suave. Alterne a prévia entre Linear e Radial. Gradientes lineares fluem em linha reta em um ângulo definido (linear-gradient(135deg, #A 0%, #B 100%)) e são melhores para fundos, hero sections e botões; 135deg é o padrão mais seguro porque lê como luz natural do canto superior esquerdo. Gradientes radiais emanam de um ponto focal (radial-gradient(circle at center, #A, #B)) e são melhores para efeitos de brilho, holofotes e avatares estilo orbe. Copie a string CSS gerada direto no seu stylesheet. Para melhor contraste, coloque texto sobre uma camada sólida, não direto no gradiente.

Como a ferramenta decide se recomenda texto branco ou preto sobre minha cor?

Ela calcula a luminância percebida do fundo usando a fórmula WCAG de luminância relativa: converte cada canal RGB para valor linear, depois soma com pesos L = 0.2126 R + 0.7152 G + 0.0722 B (verde domina porque o olho humano é mais sensível a ele). Se a luminância do fundo supera o limiar (cerca de 0.179, o ponto de contraste igual com branco e preto), texto preto dá maior razão de contraste; caso contrário, branco vence. É um guia rápido, não a resposta final — sempre rode o par real primeiro plano/fundo em um verificador de contraste WCAG para confirmar 4.5:1 para texto corpo ou 3:1 para texto grande. A cor recomendada atualiza no momento em que você muda a cor principal.

Como salvo cores de marca e reconstruo uma paleta depois?

Escolha ou cole sua cor e clique em Salvar. A ferramenta guarda cada amostra no localStorage do navegador, então sobrevive a recarregamentos e fechar a aba mas fica neste dispositivo. Salve todo seu espectro de marca de cara — primária, secundária, três ou quatro acentos, um neutro e cores semânticas (sucesso, aviso, perigo) — e você terá uma biblioteca pessoal que carrega instantaneamente a cada visita. Clique em qualquer amostra salva para enviá-la de volta para o slot principal e derivar harmonias, gradientes ou rampas de matizes. Para compartilhamento em equipe, exporte os HEX para JSON de design tokens ou cole em um documento de estilos do Figma; localStorage não sincroniza entre dispositivos sozinho. Use Limpar Tudo para esvaziar a biblioteca ao começar projeto novo de cliente.

Quais implicações de daltonismo considerar ao projetar com paleta de cinco cores?

Cerca de 8% dos homens e 0.5% das mulheres têm alguma deficiência de visão de cores, sendo confusão vermelho-verde a mais comum (deuteranopia e protanopia). Uma paleta que dependa de vermelho contra verde para transmitir significado (um ícone de erro vermelho ao lado de um verde de sucesso) será idêntica para esses usuários. Três defesas: (1) nunca use cor sozinha para transmitir estado — adicione forma de ícone, rótulo ou padrão; (2) teste sua paleta em um simulador de daltonismo (o Simulador de Daltonismo deste site serve); (3) prefira diferenças de matiz no eixo azul-amarelo quando precisar depender de cor, porque essas distinções sobrevivem à maioria dos tipos de daltonismo. Rode seus pares finais primeiro plano/fundo em um verificador WCAG e um simulador CVD antes de publicar.

Recursos Profissionais

• Seletor de cores avançado com visualização grande
• 5 modos de harmonia de cores (Complementar, Análogo, Triádico, Tetrádico, Monocromático)
• Gere tons (mais escuros) e matizes (mais claros) automaticamente
• Crie gradientes lineares e radiais com visualização
• Salve cores favoritas ilimitadas no navegador
• Copie todos os formatos de cores (HEX, RGB, HSL, CMYK, gradientes CSS)
• Informações de cores em tempo real (brilho, luminância)
• Recomendação de melhor cor de texto (branco/preto sobre cor)
• Clique em qualquer cor para usá-la como cor principal
• Atualizações instantâneas - nenhum botão de conversão necessário
• Processamento 100% do lado do cliente
• Funciona offline após primeiro carregamento
• Suporte a modo escuro
• Design responsivo amigável para mobile
• Exportar paletas de cores
• Ferramentas de cores de nível profissional