Seletor de Cor

Seletor de Cor Online — Conversor HEX, RGB, HSL e CMYK Grátis

Escolha qualquer cor no canvas visual e veja instantaneamente todos os formatos que você precisa: HEX, RGB, HSL, HSV e CMYK — atualizados em tempo real. Sem cadastro, sem instalação, funciona 100% no browser.

Este é um color picker online completo: além de converter entre formatos, ele gera sombras (shades) e tons (tints), permite explorar harmonias de cores e verifica o contraste de acessibilidade WCAG — tudo em uma única página. Para devs e designers que buscam rgb para hex, hex para rgb ou conversor de cores online, esta ferramenta centraliza tudo sem precisar de múltiplas abas.

Como Usar o Seletor de Cor

1. Clique ou arraste no canvas — o gradiente mostra saturação no eixo X e brilho no eixo Y. Arraste a mira para a cor desejada.
2. Ajuste o espectro de matiz — deslize a barra arco-íris abaixo do canvas para mudar o ângulo de cor na roda cromática (0–360°).
3. Digite um código hex diretamente — cole qualquer código de 6 dígitos como #1A73E8 no campo HEX e o picker vai direto para essa cor.
4. Copie qualquer formato com um clique — clique no ícone de cópia ao lado de HEX, RGB ou HSL para copiar o valor para a área de transferência.
5. Explore sombras, tons e harmonias — use os painéis abaixo para escolher uma variação ou uma cor harmonicamente relacionada.

Formatos de Cor: HEX, RGB, HSL e CMYK

Entender a diferença entre os formatos ajuda a escolher o correto para cada contexto.

HEX (#RRGGBB) é o formato mais comum no desenvolvimento web. Um código de 6 caracteres onde cada par de dígitos hexadecimais (00–FF) representa os canais vermelho, verde e azul. Exemplo: #1A73E8 → R=26, G=115, B=232.

RGB (Red, Green, Blue) é o modelo nativo das telas. Cada canal varia de 0 a 255. O CSS suporta rgb(26, 115, 232) e rgba() com canal alfa para transparência.

HSL (Matiz, Saturação, Luminosidade) é o formato mais intuitivo para humanos. Matiz é o ângulo na roda de cores (0–360°), saturação é quão vívida a cor é (0–100%) e luminosidade é quão brilhante (0–100%, onde 50% é a cor pura). Ideal para construir escalas de cores sistematicamente.

CMYK (Ciano, Magenta, Amarelo, Preto) é o modelo subtrativo usado em impressão. Cores de tela (RGB) nem sempre se reproduzem exatamente em CMYK — alguns azuis e verdes vívidos ficam fora da gama imprimível.

Casos de Uso Comuns

• Desenvolvimento web e UI: Copie os códigos HEX ou RGB direto para CSS, configuração do Tailwind ou design tokens. O formato HSL é especialmente útil para construir escalas de cores programaticamente.
• Auditoria de acessibilidade: O verificador WCAG mostra se a cor atende à proporção de contraste 4.5:1 exigida pelo nível AA — identifique problemas antes de chegar à produção.
• Criação de design systems: Use o painel de sombras e tons para construir uma rampa de cores completa a partir de uma cor base. Clique em qualquer swatch para carregar e copiar o código.
• Exploração de harmonias: Alterne entre harmonias complementares, análogas, triádicas, split-complementares e tetrádicas para encontrar combinações de paleta que funcionem juntas.
• Preparação para impressão: Os valores CMYK mostram como sua cor de tela se traduz em pigmentos de impressão — útil para coordenar materiais digitais e físicos.

Perguntas Frequentes

O que é um código de cor hex e como lê-lo?

Um código de cor hex é uma representação hexadecimal de 6 dígitos de uma cor RGB no formato #RRGGBB. Cada par de dígitos representa um canal: RR para vermelho, GG para verde, BB para azul. Os valores vão de 00 (nenhum) a FF (máximo = 255 em decimal). Por exemplo, #FF0000 é vermelho puro, #000000 é preto e #FFFFFF é branco.

Como converter RGB para HEX?

Converta cada valor RGB (0–255) para um número hexadecimal de 2 dígitos e concatene com o prefixo #. Exemplo: rgb(255, 107, 53) → Vermelho: 255=FF, Verde: 107=6B, Azul: 53=35 → #FF6B35. Este conversor de cores faz a conversão automaticamente enquanto você escolhe ou digita.

Qual a diferença entre HSL e HSV?

Ambos usam Matiz (Hue) e Saturação, mas o terceiro eixo difere. HSL usa Luminosidade: 0% é preto, 100% é branco e 50% é a cor pura. HSV usa Valor/Brilho: 0% é preto e 100% na saturação máxima é a cor pura. O Photoshop e a maioria das ferramentas de design usam HSV internamente; o CSS usa HSL. Este picker mostra os dois simultaneamente.

O que é contraste WCAG e por que é importante?

As WCAG (Web Content Accessibility Guidelines) definem proporções mínimas de contraste entre texto e fundo para garantir legibilidade para usuários com deficiências visuais. O nível AA exige proporção de 4.5:1 para texto normal e 3:1 para texto grande (18pt+). O nível AAA exige 7:1. Não atender a esses padrões pode tornar o conteúdo inacessível e criar responsabilidade legal em países com leis de acessibilidade digital.

O que são sombras (shades) e tons (tints)?

Sombras são versões mais escuras de uma cor, criadas misturando com preto (diminuindo a luminosidade HSL). Tons são versões mais claras, criadas misturando com branco (aumentando a luminosidade). O painel mostra 10 gradações em cada direção a partir da cor selecionada. Clique em qualquer swatch para carregá-lo.

Como encontrar o nome CSS mais próximo de uma cor?

O CSS define 148 cores nomeadas — palavras-chave como coral, royalblue, rebeccapurple — que funcionam diretamente em folhas de estilo. O picker mostra o nome CSS mais próximo da sua seleção, calculado pela distância euclidiana no espaço RGB. É uma referência útil quando você quer usar um nome semântico em vez de um código hex.

Recursos

• MDN Web Docs — Valores de Cor CSS — Referência completa de todos os formatos de cor CSS incluindo HEX, RGB, HSL, HWB e LCH.
• WCAG 2.1 — Contraste Mínimo — Documentação oficial do W3C sobre o requisito de contraste 4.5:1 para conformidade AA.