Converta HEX, RGB, HSL, HSV, CMYK — visualização ao vivo, sombras, tonalidades e contraste de acessibilidade
Códigos de cores são a linguagem universal do design digital. Seja você um desenvolvedor de sites, criando arte digital, projetando um aplicativo móvel ou escolhendo cores para uma marca, entender códigos de cores é essencial. Cada cor na tela é definida matematicamente como uma combinação de valores que dizem ao display quanto de luz vermelha, verde e azul emitir — e cada ferramenta de design profissional fala essa linguagem em vários dialetos: HEX, RGB, HSL, HSV, CMYK e mais.
Entendendo Códigos de Cores e Espaços de Cores
O que são Códigos de Cores?
Um código de cor é uma maneira padronizada de representar uma cor específica como um valor numérico ou conjunto de valores. Displays digitais misturam luz vermelha, verde e azul em intensidades variadas para criar qualquer cor visível — isso é chamado de mistura de cores aditiva. Códigos HEX representam esses valores RGB em notação base-16 (hexadecimal): #FF0000 significa vermelho máximo (FF), nenhum verde (00), nenhum azul (00). A notação RGB expressa os mesmos valores como inteiros decimais de 0 a 255. HSL e HSV separam a matiz (o tipo de cor) da saturação (riqueza da cor) e luminosidade ou valor (brilho), que são mais intuitivos para os humanos raciocinarem. CMYK, usado na impressão, trabalha com mistura de cores subtrativa usando tintas ciano, magenta, amarelo e preto. Cada formato é matematicamente equivalente — todos descrevem o mesmo conjunto de cores, apenas em notações diferentes otimizadas para diferentes casos de uso.
Como as Conversões de Cores são Calculadas?
Converter entre formatos de cor envolve fórmulas matemáticas precisas. HEX para RGB é direto: cada par de dígitos hexadecimais (00-FF) se converte em um inteiro decimal (0-255) usando aritmética base-16. RGB para HSL requer normalizar os valores RGB para 0-1, encontrar os valores máximos e mínimos dos canais, calcular o delta e derivar a matiz de qual canal é dominante, a saturação do delta em relação à luminosidade e a luminosidade como a média de máximo e mínimo. RGB para CMYK primeiro identifica o componente chave (preto) como 1 menos a razão máxima de RGB, depois deriva C, M, Y da tinta restante necessária. CMYK para RGB inverte isso: cada canal é calculado como 255 vezes (1 menos a fração de tinta) vezes (1 menos a fração de preto). Todas as conversões preservam a precisão matemática em todo o espectro de cores exibíveis.
Por que os Códigos de Cores Importam para o Design?
O uso consistente de códigos de cores é fundamental para o trabalho de design profissional. Sem códigos de cores precisos, as cores podem mudar entre ferramentas de design, navegadores e ambientes de impressão, quebrando a consistência da marca. Designers web usam códigos HEX e RGB para garantir correspondência de cores pixel-perfect entre navegadores e dispositivos. Designers gráficos dependem de valores CMYK para comunicar proporções exatas de tinta para gráficas, uma vez que telas e impressoras usam métodos de mistura de cores completamente diferentes. Diretrizes de acessibilidade (WCAG) exigem proporções mínimas de contraste entre cores de texto e fundo para garantir legibilidade para pessoas com baixa visão ou daltonismo — verificar proporções de contraste é um requisito legal para muitas organizações. Sistemas de design usam tokens de cor precisamente definidos (geralmente valores HEX ou HSL) para manter a consistência entre produtos, e HSL é frequentemente preferido porque permite ajustes programáticos, como tornar uma cor 10% mais clara sem mudar sua matiz.
Limitações e Considerações do Espaço de Cores
Embora HEX, RGB, HSL e CMYK cubram a vasta maioria das necessidades práticas de design, existem limitações importantes a serem entendidas. O modelo de cor RGB é dependente do dispositivo — os mesmos valores RGB podem parecer diferentes em diferentes telas devido a variações na calibração do monitor, perfis de cores (sRGB vs Display P3) e iluminação ambiente. Os valores CMYK mostrados nesta ferramenta são aproximações para conversão padrão de sRGB para CMYK; trabalhos de impressão profissionais frequentemente requerem gerenciamento de perfil de cor com ferramentas como Adobe Illustrator ou InDesign para correspondência precisa de Pantone. As 140 cores nomeadas em CSS são definidas pela especificação de Cor CSS e são exatas — no entanto, o recurso de 'cor nomeada mais próxima' usa distância euclidiana no espaço RGB, que é uma aproximação perceptual. Espaços de cores modernos como OKLCH e OKLAB (não incluídos aqui) oferecem gradientes mais uniformes perceptualmente, mas requerem suporte do navegador para CSS Color Level 4.
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).