Seletor e Conversor de Cores — Códigos HEX, RGB, HSL, CMYK Online

A cor é a base de todo design visual. Seja você criando um site, projetando um aplicativo móvel, desenvolvendo uma identidade de marca ou preparando um arquivo para impressão, precisa de códigos de cor precisos que se traduzem perfeitamente em todos os meios. Adivinhar cores com o olho leva a resultados inconsistentes. Nosso Seletor e Conversor de Cores gratuito fornece valores exatos de cor em quatro formatos profissionais — HEX, RGB, HSL e CMYK — além de uma paleta completa de tons e sombras para criar esquemas de cores harmônicos em segundos.

Por que a cor precisa ser precisa no design

A cor não é apenas decoração. Ela impulsiona o comportamento do usuário, comunica a identidade da marca e garante acessibilidade. Um estudo da Color Marketing Group descobriu que até 85% dos consumidores identificam a cor como o principal motivo para comprar um produto. No design digital, a tonalidade errada de azul pode tornar um botão invisível, enquanto a cor verde certa pode aumentar as taxas de conversão ao sinalizar confiança e ação.

O desafio é que a cor existe em diferentes formatos dependendo de onde é usada. Desenvolvedores web trabalham com HEX e RGB. Designers gráficos frequentemente preferem HSL porque é intuitivo ajustar. Profissionais de impressão precisam de CMYK porque telas e impressoras produzem cores de forma diferente. Sem um conversor confiável, traduzir uma única cor entre esses formatos torna-se um processo manual e propenso a erros.

Telas emitem luz usando o modelo RGB aditivo — combinando vermelho, verde e azul para criar cores. Impressoras usam o modelo CMYK subtrativo — camadas de ciano, magenta, amarelo e tinta preta para absorver luz e produzir cor. Como esses processos são fundamentalmente diferentes, uma cor que parece vibrante na tela pode parecer opaca ou desviada no papel. Um conversor de cor adequado mostra os valores exatos em cada sistema para que você saiba o que esperar antes de comprometer-se com um design.

Como usar o Seletor e Conversor de Cores

Encontrar e converter cores leva segundos. Você pode começar com uma seleção visual, um código HEX ou barras deslizantes RGB.

1. Selecione uma cor usando a entrada de cor nativa. Clique no swatch de cor para abrir o seletor de cor do sistema e escolher qualquer tom visualmente. Alternativamente, digite um código HEX diretamente no campo de entrada.
2. Ajuste com barras deslizantes RGB para controle preciso. Ajuste os valores de vermelho, verde e azul independentemente usando os deslizantes ou digitando números exatos (0–255).
3. Veja conversões instantâneas em todos os quatro formatos. À medida que ajusta a cor, os valores HEX, RGB, HSL e CMYK são atualizados em tempo real. Cada formato tem seu próprio botão de cópia.
4. Copie qualquer código com um clique. Clique no ícone de cópia ao lado de qualquer formato para salvar esse valor exato no seu clipboard. Um checkmark confirma que a cópia foi bem-sucedida.
5. Explore tons e sombras abaixo do seletor principal. A ferramenta gera automaticamente uma grade de tons mais claros (adicionando branco) e sombras mais escuras (adicionando preto) com base na cor selecionada. Clique em qualquer variação para selecioná-la e ver seus valores convertidos instantaneamente.

Todo o processo é visual e interativo. Você não precisa saber a matemática por trás dos espaços de cor — a ferramenta lida com todas as conversões automaticamente.

Entendendo os formatos de cor

Formato	O que representa	Melhor usado para	Exemplo
HEX	Código hexadecimal de seis dígitos representando valores RGB	Design web, CSS, HTML, gráficos digitais	#3B82F6
RGB	Valores de luz vermelha, verde e azul de 0 a 255	Exibição em tela, CSS, edição de imagem, vídeo	rgb(59, 130, 246)
HSL	Matiz (0–360°), Saturação (0–100%), Luz (0–100%)	Ajuste intuitivo de cores, temas, acessibilidade	hsl(217, 91%, 60%)
CMYK	Percentagens de ciano, magenta, amarelo e chave (preto) de 0 a 100	Impressão profissional, embalagens, publicações	cmyk(76%, 47%, 0%, 4%)

Códigos HEX

HEX é o formato mais comum no desenvolvimento web. Ele representa vermelho, verde e azul como números hexadecimais de dois dígitos combinados em uma única string de seis caracteres prefixada com um hash. #FF0000 é vermelho puro, #00FF00 é verde puro e #0000FF é azul puro. O formato compacto facilita a cópia para arquivos CSS, tokens de design e arquivos de configuração.

Valores RGB

RGB define cores pela intensidade de vermelho, verde e azul em uma escala de 0 a 255. Este é o idioma nativo de monitores de computador, telas de televisão e telas de smartphones. RGB também é a base sobre a qual os códigos HEX são construídos — cada valor HEX pode ser convertido diretamente para RGB e vice-versa.

Valores HSL

HSL significa Matiz, Saturação e Luz. Designers frequentemente preferem HSL porque ele se mapeia para como os humanos pensam sobre cor. A matiz é a cor real no espectro (0° é vermelho, 120° é verde, 240° é azul). A saturação controla se a cor é vibrante ou apagada. A luz controla se a cor é brilhante ou escura. Quer uma versão mais clara do seu azul? Basta aumentar o valor de luz. Quer uma versão mais apagada? Reduza a saturação. Esta estrutura intuitiva torna o HSL ideal para criar paletas de cores e sistemas de design.

Valores CMYK

CMYK é o padrão para impressão porque a tinta física não pode produzir luz. Em vez de emitir vermelho, verde e azul como uma tela, materiais impressos absorvem luz. Ciano absorve vermelho, magenta absorve verde e amarelo absorve azul. A tinta preta (o "K" em CMYK) é adicionada porque combinar ciano, magenta e amarelo raramente produz um preto profundo e rico. Quando você converte uma cor RGB ou HEX para CMYK, você está traduzindo valores de luz da tela em percentagens de cobertura de tinta que uma impressora pode entender.

Recursos Principais

Funcionalidade	O que faz	Por que importa
Seletor de Cor Nativo	Abre o seletor de cor do sistema para seleção visual	Permite que você escolha cores naturalmente com o olho antes de ajustar
Entrada Manual de HEX	Digite qualquer código HEX válido diretamente	Perfeito quando você tem uma cor de um guia de marca ou arquivo de design
Controle com Barras Deslizantes RGB	Barras deslizantes independentes para vermelho, verde e azul	Ajustes precisos para corresponder especificações exatas
Conversão em Tempo Real	Todos os quatro formatos são atualizados instantaneamente enquanto você ajusta	Nenhuma adivinhação — veja todos os valores de uma vez sem alternar abas
Cópia em Um Clique	Botão de cópia para cada formato com confirmação visual	Obtenha o código exato que precisa sem seleção manual
Paleta de Tons	Versões mais claras da sua cor adicionando branco	Crie estados de hover, fundos e acentos sutis
Paleta de Sombras	Versões mais escuras da sua cor adicionando preto	Crie bordas, estados ativos e profundidade no seu design
Variações Clicáveis	Clique em qualquer tom ou sombra para selecioná-la	Itere por opções de paleta sem reescrever códigos

Ao contrário de seletores de cor isolados que apenas produzem um formato, esta ferramenta pega a lacuna entre design digital e impressão. Um desenvolvedor web pode selecionar uma cor, copiar o código HEX para CSS e simultaneamente ver os valores CMYK para compartilhar com um designer de impressão. Um artista gráfico pode começar com um valor CMYK de uma breve de impressão e imediatamente obter o equivalente RGB para protótipos digitais.

Casos de Uso no Mundo Real

Desenvolvedores Web Escrevendo CSS Ao construir um site, os desenvolvedores precisam de valores de cor consistentes em dezenas de regras CSS. Escolha uma cor primária da marca, copie seu código HEX para botões e títulos, depois pegue um tom mais claro para estados de hover e um tom mais escuro para estados ativos. Todos os valores são matematicamente consistentes porque derivam da mesma cor base.

Designers de UI/UX Construindo Bibliotecas de Componentes Sistemas de design exigem paletas de cor estruturadas com cuidado. Um designer pode definir um azul primário, depois gerar cinco tons e cinco sombras para criar uma escala completa para fundos, bordas, texto e estados interativos. O formato HSL torna isso especialmente fácil porque ajustar o valor de luz cria passos previsíveis.

Designers Gráficos Preparando Materiais para Impressão Um designer criando um cartão de visita ou folheto precisa de valores CMYK que correspondam ao máximo possível à pré-visualização na tela. Convertendo a cor da marca do HEX para CMYK, o designer pode fornecer à impressora percentagens exatas de tinta e evitar surpresas quando a prova física chegar.

Artistas Digitais e Ilustradores A harmonia de cores é essencial na arte digital. Um artista pode selecionar uma cor base, depois usar os tons e sombras para criar profundidade, sombras e destaque sem calcular manualmente versões mais claras ou escuras. Clicar em variações acelera o processo criativo enquanto mantém a paleta coesa.

Equipes de Marketing Mantendo a Consistência da Marca Guia de marca geralmente especificam cores em um formato, mas diferentes plataformas exigem códigos diferentes. Um azul da marca definido em HEX para o site precisa de um equivalente RGB para um modelo de PowerPoint e uma versão CMYK para um folheto impresso. O conversor garante que todos os membros da equipe usem a mesma cor exata, independentemente do meio.

Especialistas em Acessibilidade Verificando Contraste Ao avaliar se o texto é legível contra um fundo, especialistas precisam de valores de cor precisos. O conversor fornece códigos HEX e RGB exatos que podem ser inseridos em calculadoras de proporção de contraste para verificar a conformidade WCAG.

Dicas e Boas Práticas

• Comece com HSL para criar paletas. Se você estiver criando uma paleta de cores do zero, use HSL. Mantenha a matiz constante e ajuste saturação e luz para gerar variações harmônicas. Isso produz paletas mais visualmente consistentes do que ajustar valores RGB diretamente.
• Sempre converta para CMYK antes de imprimir. Cores RGB e HEX são projetadas para telas que emitem luz. Cores que parecem brilhantes e saturadas na tela — especialmente azuis e verdes — frequentemente mudam quando impressas. Converter para CMYK cedo ajuda você a ver como a cor será vista em tinta.
• Use tons para fundos e sombras para texto. Tons claros são excelentes para fundos sutis que não competem com o conteúdo. Sombras mais escuras funcionam bem para texto principal e bordas porque fornecem contraste suficiente contra fundos brancos ou claros.
• Copie o formato que sua plataforma espera. CSS aceita HEX, RGB e HSL diretamente. Canvas JavaScript usa RGB. Lojas de impressão precisam de CMYK. Software de design como Figma e Sketch aceitam HEX. Copie o formato certo para evitar erros de conversão.
• Teste cores em dispositivos reais. A calibração de tela varia entre monitores, celulares e tablets. Uma cor que parece perfeita no seu laptop pode parecer diferente em um dispositivo móvel. Sempre pré-visualize designs em múltiplas telas antes de finalizar.
• Considere a deficiência de visão ao escolher paletas. Aproximadamente 8% dos homens e 0,5% das mulheres têm alguma forma de deficiência de visão colorida. Use o conversor para verificar que suas escolhas de cor têm diferenças de brilho suficientes, não apenas diferenças de matiz, para permanecerem distinguíveis.
• Salve suas cores base. Uma vez que você encontrar a cor perfeita, salve o código HEX em seu sistema de design ou guia de estilo. Ter uma única fonte de verdade evita a divergência conforme o projeto cresce e mais membros da equipe contribuem.

Perguntas Frequentes

O Seletor de Cores é gratuito para usar?

Sim. O Seletor e Conversor de Cores é totalmente gratuito, sem limites de uso, sem registro e sem anúncios. Você pode selecionar, converter e copiar cores quantas vezes quiser.

Posso converter qualquer formato de cor para qualquer outro formato?

Sim. A ferramenta suporta conversão bidirecional completa entre HEX, RGB, HSL e CMYK. Insira um valor em qualquer formato e os outros três são atualizados automaticamente em tempo real.

O que são tons e sombras?

Tons são criados adicionando branco a uma cor base, tornando-a mais clara. Sombras são criadas adicionando preto, tornando-a mais escura. A ferramenta gera uma gama de tons e sombras a partir da cor selecionada, fornecendo uma paleta monocromática completa para trabalhos de design.

Por que as cores RGB parecem diferentes quando impressas?

RGB é um modelo de cor aditivo projetado para telas que emitem luz. CMYK é um modelo subtrativo projetado para impressoras que absorvem luz. Algumas cores RGB — especialmente azuis, verdes e roxos brilhantes — estão fora do alcance que tintas CMYK podem reproduzir. Converter para CMYK mostra-lhe a melhor correspondência impressível possível.

Esta ferramenta funciona em dispositivos móveis?

Sim. O Seletor de Cores é totalmente responsivo e funciona em smartphones e tablets. O seletor de cor nativo abre em dispositivos móveis da mesma forma que em desktops, e os botões de cópia são otimizados para telas sensíveis ao toque.

Qual formato de cor devo usar para desenvolvimento web?

HEX é a escolha mais comum porque é compacto e universalmente suportado em CSS. RGB é útil quando você precisa ajustar opacidade com RGBA. HSL está se tornando cada vez mais popular porque é mais intuitivo para criar variações e animações. Todos funcionam em navegadores modernos.

Qual a diferença entre HSL e HSV?

Ambos HSL e HSV (também chamado HSB) descrevem cores usando matiz e saturação, mas definem o terceiro componente de forma diferente. HSL usa luz, onde 0% é preto, 50% é a cor pura e 100% é branco. HSV usa valor, onde 0% é preto e 100% é a versão mais brilhante da cor. HSL é geralmente preferido no design web porque a escala de luz é mais intuitiva para criar paletas acessíveis.