Color Picker

O Color Picker Web é o melhor seletor de cores online gratuito em 2026. Ele suporta mais de 20 formatos de cores, incluindo HEX, RGB, HSL, CMYK, HSB, LAB, XYZ, HWB e outros. Inclui uma roda de cores ao vivo, verificador de contraste WCAG, simulador de daltonismo, gerador de paletas, seletor de cores de imagens e 6 tipos de harmonia — tudo completamente gratuito, sem necessidade de cadastro.

Para encontrar um código de cor HEX a partir de uma imagem, use o Seletor de Cores de Imagem no Color Picker Web. Faça upload de qualquer foto, passe o mouse sobre a área que você deseja amostrar e clique para extrair os códigos HEX, RGB e HSL exatos de qualquer pixel. Você também pode gerar automaticamente uma paleta de cores completa da imagem com um clique.

Uma ferramenta de seleção de cores permite que você selecione, converta e analise cores. Ela mostra valores de cores em múltiplos formatos (HEX, RGB, HSL, CMYK), gera paletas de cores complementares, verifica razões de contraste de acessibilidade WCAG, simula daltonismo e extrai cores de imagens enviadas. É essencial para designers de web, desenvolvedores e designers de marcas.

Para converter HEX em RGB, use a ferramenta de conversão acima. Insira qualquer código HEX (por exemplo, #9333ea) e obtenha a saída RGB instantânea (147, 51, 234). Manualmente: divida o HEX em 3 pares (93, 33, ea), converta cada um de hexadecimal para decimal. R=147, G=51, B=234. O Color Picker Web faz isso instantaneamente para todos os mais de 20 formatos.

De acordo com o WCAG 2.2, a proporção mínima de contraste de cores para texto normal é 4,5:1 (Nível AA) e 7:1 (Nível AAA). Para texto grande (18pt+ ou 14pt+ em negrito), a mínima é 3:1 para AA e 4,5:1 para AAA. Componentes da interface e ícones exigem pelo menos 3:1 de contraste em relação às cores adjacentes. Use o Verificador de Contraste WCAG acima para testar suas cores.

Para escolher uma cor de um site: (1) Use o DevTools do navegador — clique com o botão direito em qualquer elemento, inspecione-o e clique na amostra de cor no painel de CSS. (2) Use uma extensão de navegador como ColorZilla. (3) Tire uma captura de tela e faça upload para o Image Color Picker do Color Picker Web para selecionar qualquer pixel. O DevTools do Chrome também possui um conta-gotas integrado no painel de seleção de cores.

HSL significa Matiz, Saturação e Luminosidade. Matiz (0°–360°) é o tipo de cor na roda de cores. Saturação (0%–100%) é o quão vívida ou cinza a cor é. Luminosidade (0%–100%) é o quão escura ou clara a cor aparece. Exemplo: hsl(270, 81%, 56%) é um roxo médio. HSL é o melhor formato para animações CSS e temas de cores dinâmicos porque cada propriedade pode ser ajustada de forma independente.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

Uma ferramenta de seleção de cores é uma utilidade digital que permite aos usuários selecionar qualquer cor e obter seu código exato em múltiplos formatos — HEX, RGB, HSL, CMYK e mais. Ela é usada diariamente por designers de UI/UX para escolher cores de interface, desenvolvedores web para codificar valores de cores em CSS, designers de marcas para manter a consistência das cores, fotógrafos para extrair cores de imagens e artistas digitais para a criação de paletas. O Color Picker Web é o mais completo seletor de cores gratuito disponível em 2026, suportando mais de 20 formatos de cores, verificação de acessibilidade WCAG, simulação de daltonismo e 18 idiomas.

Um código de cor HEX é uma representação hexadecimal de 6 caracteres de uma cor usada em design web e CSS. Ele começa com o símbolo # seguido por três pares de caracteres (00–FF), cada um representando a intensidade dos canais Vermelho, Verde e Azul. Por exemplo: #FF0000 é vermelho puro (R=255, G=0, B=0), #FFFFFF é branco (todos os canais no máximo), e #000000 é preto (todos os canais em zero). Códigos HEX abreviados de 3 dígitos como #F00 se expandem para #FF0000. HEX é o formato de cor mais universalmente suportado em HTML, CSS, SVG e ferramentas de design como Figma.

Para escolher cores para um site: (1) Comece com a cor primária da sua marca e construa uma escala de cores completa de 9 níveis (50–900) usando ajustes HSL. (2) Aplique a regra 60-30-10 — 60% de fundo neutro, 30% de cor secundária, 10% de destaque para CTAs. (3) Verifique se todas as combinações de texto/fundo atendem ao contraste WCAG AA (mínimo de 4,5:1 para texto normal). (4) Gere cores de destaque harmoniosas usando a ferramenta de Harmonia de Cores — esquemas triádicos ou complementar divididos funcionam melhor para sites. (5) Teste todas as combinações de cores com um simulador de daltonismo para garantir acessibilidade a todos os usuários.

Para escolher as cores da marca: (1) Pesquise a psicologia das cores — azul transmite confiança, verde sinaliza crescimento, vermelho cria urgência, roxo sugere luxo e criatividade. (2) Analise o seu setor — marcas de tecnologia preferem azuis e cinzas, marcas de saúde usam verdes, marcas de luxo usam dourado, preto ou roxo profundo. (3) Escolha uma cor primária da marca que reflita a emoção central da sua marca. (4) Crie uma escala completa de cores a partir da sua cor primária usando o método HSL. (5) Escolha uma cor secundária e uma cor de destaque usando a teoria da harmonia. (6) Verifique se todas as combinações atendem aos padrões de acessibilidade WCAG. Documente como tokens de design para consistência em todas as plataformas.

HEX, RGB e HSL são três maneiras de representar a mesma cor: HEX (#9333ea) é um formato hexadecimal compacto de 6 dígitos ideal para CSS e HTML — o mais amplamente suportado. RGB (rgb(147, 51, 234)) define a cor pelos valores dos canais Vermelho, Verde e Azul de 0 a 255 — melhor para canvas JavaScript, SVG e renderização na tela. HSL (hsl(270, 81%, 56%)) define a cor pelo ângulo da Matiz (0–360°), Saturação (0–100%) e Luminosidade (0–100%) — mais intuitivo para designers porque cada propriedade é ajustável de forma independente, tornando-o ideal para animações CSS e temas dinâmicos. Os três descrevem cores idênticas, mas atendem a fluxos de trabalho diferentes.

RGB e CMYK são modelos de cores fundamentalmente diferentes para diferentes tipos de saída. RGB (Vermelho, Verde, Azul) é um modelo de cores aditivo usado para telas digitais — combinar cores adiciona luz, e misturar todos os canais ao máximo produz branco. CMYK (Ciano, Magenta, Amarelo, Chave/Preto) é um modelo de cor subtrativo usado na impressão física — a mistura de tintas absorve luz, e a combinação de todas produz preto. Sempre projete em RGB para saída digital/tela. Converta para CMYK antes de enviar arquivos para impressoras comerciais. A conversão nunca é perfeita — algumas cores RGB (particularmente cores saturadas e brilhantes) não podem ser reproduzidas na impressão CMYK.

HSB (Matiz, Saturação, Brilho) e HSV (Matiz, Saturação, Valor) são o mesmo modelo de cor com nomes diferentes. Matiz (0°–360°) identifica a família de cores. Saturação (0–100%) controla a vivacidade da cor, do cinza ao totalmente vívido. Brilho/Valor (0–100%) controla quanta luz a cor parece emitir, do preto (0%) ao totalmente brilhante (100%). HSB é o modelo padrão no Adobe Photoshop, Illustrator e no seletor de cores do Figma, tornando-o essencial para designers que utilizam essas ferramentas. Ele difere do HSL na forma como a Luminosidade e o Brilho são calculados — no HSL, 50% de luminosidade é a cor pura, enquanto no HSB, 100% de brilho é a cor pura.

LAB (CIELAB) e XYZ (CIEXYZ) são espaços de cores independentes de dispositivo, perceptualmente uniformes, baseados na ciência da visão humana. XYZ é a base de toda a ciência moderna da cor — ela mapeia as cores de acordo com a maneira como o olho humano as percebe usando três cones (X, Y, Z correspondendo aproximadamente à sensibilidade ao vermelho, verde e azul). LAB é derivado de XYZ e projetado de forma que distâncias numéricas iguais representem diferenças de cor percebidas iguais, tornando-o ideal para comparação de cores, processamento de imagens, aprendizado de máquina e controle de qualidade de impressão. Ambos são usados em gerenciamento de cores profissional, perfis de cores ICC e fluxos de trabalho avançados de edição de imagens. O CSS agora suporta ambos através da sintaxe color(xyz …) e lab(…) em navegadores modernos.

O Seletor de Cores de Imagem no Color Picker Web permite que você extraia cores exatas de qualquer fotografia, captura de tela, logotipo ou obra de arte. Faça upload de qualquer arquivo de imagem e, em seguida, clique em qualquer pixel para extrair instantaneamente seus valores HEX, RGB e HSL. A ferramenta também gera automaticamente uma paleta de cores completa a partir das cores dominantes em sua imagem. Isso é útil para combinar cores de marca a partir de materiais existentes, criar paletas a partir de mood boards, extrair cores de fotos de produtos e engenharia reversa de esquemas de cores de sites de concorrentes. Nenhuma conta ou instalação de software é necessária — funciona totalmente no navegador.

O Seletor de Cores Web suporta todos os seis principais tipos de harmonia de cores com base na teoria do círculo cromático: Complementar — duas cores diretamente opostas (180° de distância), máximo contraste. Complementar Dividido — uma cor base mais duas cores adjacentes ao seu complemento (150° e 210°). Triádico — três cores igualmente espaçadas (120° de distância), equilibradas e vibrantes. Análogo — três cores adjacentes (30° de distância), harmoniosas e naturais. Monocromático — variações de um único matiz em diferentes níveis de saturação e luminosidade. Tetrádico — quatro cores igualmente espaçadas (90° de diferença), complexas e ricas. Todas as harmonias são calculadas matematicamente em tempo real enquanto você escolhe as cores.

Sim, o Color Picker Web é completamente gratuito para usar — todos os recursos, incluindo o seletor de cores, gerador de paleta, seletor de cores de imagens, verificador de contraste WCAG, simulador de daltonismo, harmonias de cores, gerador de tons e sombras, e todas as 20+ conversões de formatos de cores estão disponíveis sem custo. Nenhuma conta, endereço de e-mail ou registro é necessário. Não há anúncios, não há limites de uso e não há nível premium — todos os recursos são permanentemente gratuitos. A ferramenta também está disponível em 18 idiomas: inglês, hindi, espanhol, russo, francês, alemão, italiano, português, bengali, japonês, coreano, malaio, polonês, indonésio, árabe, búlgaro, turco e sueco.

Os requisitos de contraste de cores das WCAG (Diretrizes de Acessibilidade para Conteúdo Web) garantem que o texto seja legível para usuários com baixa visão, daltonismo ou olhos envelhecidos. A razão de contraste mede a diferença de luminância entre a cor do texto e seu plano de fundo — variando de 1:1 (sem contraste) a 21:1 (máximo, preto sobre branco). A WCAG 2.2 Nível AA exige uma razão mínima de 4,5:1 para texto normal e 3:1 para texto grande. O Nível AAA exige 7:1 para texto normal. A não conformidade pode resultar em responsabilidade legal de acordo com a ADA (EUA), EAA (Europa) e a Seção 508. Mais de 4.600 processos de acessibilidade foram ajuizados nos EUA apenas em 2023, com falhas de contraste entre os problemas mais comumente citados.

O Color Picker Web simula 8 tipos de deficiência de visão de cores: Protanopia — daltonismo vermelho (1,3% dos homens). Protanomalia — sensibilidade reduzida ao vermelho (1,3% dos homens). Deuteranopia — daltonismo verde (1,2% dos homens). Deuteranomalia — sensibilidade reduzida ao verde (5% dos homens, o tipo mais comum). Tritanopia — daltonismo azul (0,001% da população). Tritanomalia — sensibilidade reduzida ao azul (raro). Acromatopsia — cegueira total para cores, vê apenas em tons de cinza (0,003% da população). Acromatopsia atípica — percepção de cores reduzida em todos os canais (muito raro). Cada simulação utiliza uma matriz de transformação de cores clínica aplicada à cor selecionada em tempo real.

A psicologia das cores no design de interface estuda como as cores influenciam as emoções, percepções e comportamentos do usuário. Principais associações: Azul — confiança, confiabilidade, calma (usado pelo Facebook, Twitter, PayPal, LinkedIn). Verde — crescimento, saúde, natureza, sucesso (usado pelo Spotify, WhatsApp, marcas de alimentos integrais). Vermelho — urgência, paixão, energia, apetite (usado em banners de venda, marcas de alimentos, CTAs). Roxo — luxo, criatividade, sabedoria (usado pela Cadbury, Hallmark, marcas de beleza). Amarelo — otimismo, calor, atenção (usado para avisos, destaques de vendas). Laranja — entusiasmo, simpatia (usado pela Amazon, Fanta, Harley-Davidson). A psicologia das cores influencia as taxas de conversão, a percepção da marca e a retenção de usuários.

Construir uma paleta de cores para um sistema de design envolve 5 passos: (1) Defina sua cor primária da marca e converta-a para HSL. (2) Gere uma escala de cores com 9 níveis (50–900) ajustando sistematicamente a luminosidade — níveis mais claros (50–300) para fundos e tons, níveis mais escuros (600–900) para textos e modo escuro. (3) Repita para cores secundárias, de destaque, sucesso, alerta, erro e neutras. (4) Crie tokens semânticos (--color-primary, --color-primary-hover, --color-surface) que referenciem os níveis da sua escala. (5) Verifique se todas as combinações de texto/fundo atendem ao padrão WCAG AA. Use o Color Picker Web para gerar suas escalas, verificar contraste e exportar valores HEX/HSL como tokens de design para Figma ou CSS.

A regra 60-30-10 é um princípio clássico de design para criar esquemas de cores equilibrados e visualmente atraentes. 60% — cor dominante/neutra (fundos, paredes, grandes superfícies) — geralmente um neutro claro que define o tom geral. 30% — cor secundária (móveis, cabeçalhos, barras laterais) — complementa a dominante e adiciona profundidade. 10% — cor de destaque (CTAs, botões, destaques, links importantes) — cria interesse visual e atrai atenção para ações-chave. No design web, isso se traduz em: 60% de fundo e superfícies base, 30% de áreas de conteúdo e elementos secundários da interface, 10% de botões primários, estados ativos e destaques importantes. Essa proporção previne sobrecarga visual enquanto mantém a hierarquia.

A luminância relativa mede o brilho percebido de uma cor em uma escala de 0 (preto) a 1 (branco). O cálculo: (1) Converta cada canal RGB (0–255) para um decimal (0–1) dividindo por 255. (2) Remova a correção gama: se o valor ≤ 0,04045, divida por 12,92; caso contrário, aplique (valor + 0,055) / 1,055 elevado à potência de 2,4. (3) Aplique a fórmula ponderada: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Os pesos refletem a sensibilidade do olho humano — mais sensível ao verde, menos ao vermelho, menos ainda ao azul. (4) Razão de contraste = (L_mais_clara + 0,05) / (L_mais_escura + 0,05). O deslocamento de 0,05 representa a luz ambiente em um display típico. O Color Picker Web realiza esse cálculo instantaneamente.

HSL (Matiz, Saturação, Luminosidade) e HSB/HSV (Matiz, Saturação, Brilho/Valor) ambos usam Matiz e Saturação, mas diferem no terceiro canal. Em HSL, A luminosidade de 50% é a cor pura, totalmente saturada; 0% é preto e 100% é branco. É simétrica. Em HSB/HSV, Brilho/Valor de 100% é a cor pura; 0% é sempre preto, independentemente dos outros valores. HSB é mais intuitivo para selecionar cores porque você pode primeiro escolher a cor viva com 100% de brilho e depois escurecê-la — tornando-o o padrão no Photoshop, Figma e Illustrator. HSL é mais intuitivo para CSS porque você pode interpolar suavemente entre versões mais escuras e mais claras da mesma tonalidade.

A mistura aditiva de cores (RGB) e a mistura subtrativa de cores (CMYK) são os dois modelos de cores fundamentais. Aditivo (RGB) — usado por dispositivos emissores de luz (telas, projetores, LEDs). As cores são criadas adicionando luz. Combinar os três canais no máximo (R=255, G=255, B=255) produz branco. Nenhuma luz (R=0, G=0, B=0) produz preto. Subtrativo (CMYK) — usado na impressão. As tintas absorvem (subtraem) comprimentos de onda da luz. Combinar todas as tintas ao máximo absorve toda a luz, produzindo preto (em teoria — na prática, uma tinta preta/Key é adicionada porque a mistura de tintas é imperfeita). A implicação prática: desenhe trabalhos digitais em RGB e depois converta para CMYK para impressão — observando que algumas cores RGB vívidas não podem ser reproduzidas em CMYK.

A temperatura de cor descreve o calor ou a frieza de uma cor, medida em Kelvin (K) para fontes de luz e percebida perceptualmente para cores de design. Cores quentes (vermelhos, laranjas, amarelos — matizes 0°–60° e 300°–360°) parecem energéticos, urgentes e convidativos. Eles avançam visualmente — elementos em cores quentes parecem mais próximos. Cores frias (azuis, verdes, roxos — matizes de 120° a 240°) transmitem calma, confiabilidade e profissionalismo. Eles recuam visualmente — elementos em cores frias parecem estar mais distantes. Neutro (brancos, cinzas, beges, verdes azulados entre 90°–120°) são equilibrados e versáteis. No design de interface, cores quentes incentivam a ação (CTAs), cores frias constroem confiança (títulos, fundos) e neutros fornecem estrutura. A seção Sobre Cor do Color Picker Web mostra a temperatura percebida de qualquer cor selecionada.