Insira uma Cor
Seletor de Cores Visual
Insira um código HEX de 6 dígitos com ou sem o prefixo #
Insira uma Cor para Converter
Digite um código HEX, insira valores RGB ou HSL, use o seletor de cores ou clique em 'Cor Aleatória' para começar. Todos os formatos atualizam ao vivo.
Como Usar o Gráfico de Códigos de Cores
Insira Sua Cor
Digite um código HEX diretamente (por exemplo, #FF5733) no campo HEX, insira valores RGB decimais (0–255 cada), insira valores HSL ou CMYK, ou clique na amostra de cor para abrir o seletor de cores visual. Você também pode clicar em 'Cor Aleatória' para inspiração instantânea. Todos os métodos de entrada atualizam o resultado ao vivo enquanto você digita.
Ver Todos os Formatos Convertidos
O painel de resultados mostra sua cor em HEX, RGB, HSL, HSV, CMYK e formato inteiro simultaneamente. Cada formato tem um botão de copiar para que você possa pegar exatamente o que precisa. Use o botão 'Copiar Tudo' para copiar todos os formatos de uma vez, ou exporte para CSV para documentação.
Gerar Sombras, Tons e Verificar Acessibilidade
Role para baixo nos resultados para ver uma faixa de 9 sombras (variantes mais escuras) e 9 tons (variantes mais claras) — clique em qualquer amostra para carregar essa variante no conversor. A seção de contraste WCAG mostra as proporções de contraste em relação ao branco e ao preto, com indicadores de aprovação AA/AAA para verificar se sua cor atende aos padrões de acessibilidade.
Navegar na Referência de Cores Nomeadas
Mude para a aba 'Gráfico de Cores Nomeadas' para explorar todas as 140 cores nomeadas em CSS organizadas por família (vermelhos, verdes, azuis, roxos, etc.). Cada linha mostra a amostra de cor, nome CSS, código HEX e valores RGB. Clique em 'Usar Cor' em qualquer linha para carregá-la instantaneamente no conversor.
Perguntas Frequentes
Qual é a diferença entre códigos de cores HEX e RGB?
HEX e RGB descrevem exatamente a mesma cor usando diferentes sistemas de notação. RGB separa os canais vermelho, verde e azul em três inteiros decimais de 0 a 255. Por exemplo, rgb(59, 130, 246) é um azul médio. HEX representa esses mesmos três valores em hexadecimal (base-16): 59 se torna 3B, 130 se torna 82, e 246 se torna F6, resultando em #3B82F6. HEX é mais compacto e é o formato padrão para HTML e CSS. RGB é mais fácil de ler matematicamente e é usado em CSS, bem como em softwares de design gráfico. Ambos são equivalentes — qualquer cor expressável em um formato pode ser expressa no outro.
Por que HSL é melhor para ajustes de design do que HEX ou RGB?
HSL (Matiz, Saturação, Luminosidade) separa a identidade da cor pura (matiz, 0–360 graus) de quão vívida ela é (saturação) e quão clara ou escura ela é (luminosidade). Isso a torna muito mais intuitiva para o trabalho de design. Por exemplo, para tornar uma cor 20% mais clara, você simplesmente aumenta o valor L em 20 — em HEX ou RGB, a mesma operação exigiria calcular os três canais separadamente. HSL também é como os humanos descrevem naturalmente as cores: 'um azul claro e médio' se mapeia diretamente para alta saturação e luminosidade média em uma matiz azul. CSS suporta nativamente a notação hsl(), e ferramentas de design como Figma usam modelos semelhantes ao HSL internamente. Muitos sistemas de design definem tokens de cor em HSL por essa razão.
O que é CMYK e quando devo usá-lo?
CMYK significa Ciano, Magenta, Amarelo e Chave (Preto) — as quatro cores de tinta usadas na impressão colorida. Ao contrário do RGB, que adiciona luz (mistura aditiva), o CMYK subtrai luz sobrepondo tintas que absorvem certas comprimentos de onda (mistura subtrativa). É por isso que uma cor que parece vívida na tela pode parecer mais apagada quando impressa — o gamut RGB (faixa de cores exibíveis) é mais amplo do que o que a impressão CMYK pode reproduzir. Use valores CMYK ao preparar arquivos para impressão profissional, incluindo cartões de visita, folhetos, cartazes e embalagens. A maioria das gráficas profissionais e softwares de design (Adobe Illustrator, InDesign) trabalha em CMYK para projetos de impressão. Para design web e de tela, mantenha-se com HEX ou RGB.
O que é a proporção de contraste WCAG e por que isso é importante?
A proporção de contraste WCAG (Diretrizes de Acessibilidade de Conteúdo da Web) mede quão diferentes uma cor de primeiro plano e uma cor de fundo parecem para alguém com baixa visão ou daltonismo. É calculada usando a luminância relativa — uma medida de brilho percebido. Uma proporção de 1:1 significa nenhum contraste (mesma cor), enquanto 21:1 é o máximo contraste (preto sobre branco). O padrão WCAG AA requer 4.5:1 para texto normal e 3:1 para texto grande. O WCAG AAA requer 7:1. Atender a esses padrões garante que seu site seja legível para usuários com deficiências visuais e é frequentemente exigido para conformidade legal com a ADA (Lei dos Americanos com Deficiências) e os padrões WCAG 2.1/2.2. Esta ferramenta calcula automaticamente as proporções de contraste em relação ao branco e ao preto para qualquer cor que você inserir.
Como são geradas sombras e tons?
Uma sombra é criada misturando uma cor com preto — matematicamente, multiplicando cada canal RGB por um fator menor que 1. Por exemplo, uma sombra de 50% de vermelho (255, 0, 0) seria (128, 0, 0). Um tom é criado misturando com branco — misturando o valor do canal original em direção a 255. Um tom de 50% de vermelho seria (255, 128, 128). Esta ferramenta gera 9 sombras espaçadas uniformemente (do quase preto ao original) e 9 tons espaçados uniformemente (do original ao quase branco), totalizando 19 variantes. Essas faixas são muito úteis para construir paletas de sistemas de design — por exemplo, o Tailwind CSS usa uma escala de 10 sombras semelhante de 50 (mais clara) a 950 (mais escura) para cada uma de suas 22 famílias de cores.
Quais são as 140 cores nomeadas em CSS?
As 140 cores nomeadas em CSS são um conjunto de palavras-chave de cores definidas na especificação de Cor CSS (Nível 4 de Cores CSS). Elas incluem cores clássicas da web como 'vermelho', 'azul' e 'verde', bem como nomes descritivos como 'azul-cornflower', 'blush-de-lavanda' e 'papaya-whip'. Cada nome mapeia para um valor HEX/RGB específico que é consistente em todos os navegadores e sistemas operacionais. Elas se originaram do sistema de cores X11 usado em ambientes Unix e foram posteriormente padronizadas para CSS. Embora convenientes para cores comuns, as cores nomeadas cobrem apenas uma fração minúscula dos 16,7 milhões de cores representáveis em RGB de 24 bits. Para trabalhos de design precisos, sempre use valores HEX ou RGB em vez de depender de cores nomeadas, pois os nomes podem ser enganosos (por exemplo, 'cinza' e 'grey' são ligeiramente diferentes).