Conversor de cores

Cinco maneiras diferentes de nomear o mesmo pixel

Um conversor que lida com HEX, RGB, HSL, HSV e CMYK está tocando cinco maneiras bastante diferentes de descrever o mesmo fenômeno perceptual. Elas foram inventadas por pessoas diferentes, em décadas diferentes, para máquinas diferentes e com prioridades diferentes. Deslizar um valor de uma notação para outra parece aritmética trivial, e na superfície geralmente é, mas as histórias explicam por que cada notação existe, e a matemática explica por que a ida e volta entre elas nem sempre é sem perdas.

HEX, taquigrafia base 16 para tripletas sRGB

A notação hexadecimal de cores precede o CSS por alguns anos em estações de trabalho e em formatos de arquivo gráfico, mas seu significado universal na web foi fixado pela Recomendação CSS1 que o W3C publicou em 17 de dezembro de 1996. CSS1 foi o trabalho de Håkon Wium Lie e Bert Bos: Lie havia proposto Cascading Style Sheets enquanto estava no CERN em outubro de 1994, e Bos se juntou ao projeto na INRIA em julho de 1995. Antes do CSS, HTML 1.0 não tinha noção de cor alguma, seu conjunto inicial de 18 tags era estritamente estrutural. Uma cor hex é um inteiro de três bytes (ou quatro, com alpha) que o navegador divide em canais vermelho, verde e azul. A forma de 6 dígitos #RRGGBB dá a cada canal um valor de 8 bits, 0-255, codificado em dois dígitos hex. A taquigrafia de 3 dígitos #RGB é exatamente equivalente à forma de 6 dígitos com cada dígito duplicado, então #F0A e #FF00AA são a mesma cor. CSS Color Module Level 4 acrescentou formalmente formas de 4 dígitos (#RGBA) e 8 dígitos (#RRGGBBAA) com canal alpha, onde 00 é totalmente transparente e FF totalmente opaco. O suporte de navegador chegou no Chrome 62, Firefox 49, Safari 10 e Edge 79, então em 2026 é essencialmente universal. Hex é popular porque é curto, copiável-colável e sem ambiguidade, background: #1e90ff sobrevive ao copiar/colar entre Figma, VS Code, Slack e e-mail sem que ninguém precise pensar em espaços ou vírgulas.

RGB, o princípio tricromático de Maxwell, tornado digital

A ideia «RGB», que qualquer cor que o olho vê pode ser combinada misturando quantidades controladas de três luzes primárias, precede a fotografia colorida. James Clerk Maxwell propôs isso pela primeira vez em seu artigo de 1855 «Experiments on Colour, as Perceived by the Eye, with Remarks on Colour Blindness», entregue à Royal Society of Edinburgh. Seis anos depois, em 17 de maio de 1861, Maxwell demonstrou o princípio em público: ele fez o fotógrafo Thomas Sutton fazer três placas em preto e branco de uma fita de tartã, cada uma tirada através de um filtro vermelho, verde ou azul, e então projetou as três placas através dos mesmos filtros em uma tela. As projeções sobrepostas produziram uma imagem reconhecivelmente colorida, a primeira fotografia colorida do mundo por síntese aditiva. O RGB aditivo de Maxwell tornou-se a fundação de cada exibição eletrônica desde então. RGB web moderno significa especificamente sRGB, o espaço de cor «standard RGB» proposto pela Hewlett-Packard e Microsoft em 1996 (autores Michael Stokes e Ricardo Motta da HP, Matthew Anderson e Srinivasan Chandrasekar da Microsoft) e padronizado como IEC 61966-2-1:1999. A motivação era prosaica: a web inicial precisava de um espaço de cor simples o suficiente para assumir por padrão, robusto o suficiente para parecer aceitável em CRTs baratos e pequeno o suficiente para não inflar arquivos de imagem. Vinte e cinco anos depois, ainda é o espaço de trabalho padrão de todo navegador, todo JPEG e todo PNG que não carrega um perfil ICC incorporado. Em CSS, RGB é escrito rgb(255, 0, 153) (sintaxe legacy com vírgulas) ou rgb(255 0 153) (moderna separada por espaços, por CSS Color Level 4).

HSL e HSV, os eixos perceptuais de Alvy Ray Smith

RGB é excelente para hardware (uma exibição tem literalmente subpixels vermelhos, verdes e azuis) e inútil para a intuição humana. Ninguém ajusta um design web raciocinando que quer «doze unidades a mais de verde e sete a menos de vermelho». Os designers pensam em termos de matiz (qual cor), saturação (quão vívido) e luminosidade (quão brilhante). A conversão foi formalizada por Alvy Ray Smith em seu artigo SIGGRAPH 1978 «Color Gamut Transform Pairs», publicado na edição de agosto de 1978 de Computer Graphics, páginas 12-19. Smith estava no New York Institute of Technology Computer Graphics Lab, tendo trabalhado anteriormente na Xerox PARC. O artigo notou que a transformação RGB-para-HSV já havia sido «usada com sucesso por cerca de quatro anos» em programas de pintura de frame-buffer no momento em que foi publicado, Smith estava documentando a prática de trabalho, não inventando do zero. Ele recebeu em conjunto o SIGGRAPH Computer Graphics Achievement Award em 1990 por, entre outras coisas, «o modelo de espaço de cor HSV (também conhecido como HSB)». HSL e HSV compartilham um eixo de matiz (um ângulo, 0°-360°, em torno de uma roda de cores: 0° vermelho, 120° verde, 240° azul) e um eixo de saturação (0% cinza a 100% puro), mas diferem no terceiro eixo. HSV (Hue, Saturation, Value) trata V como o máximo dos canais RGB, branco puro requer V=100% E S=0%, vermelho puro é V=100%, S=100%; tanto o branco quanto o vermelho vivem no topo do cilindro. HSL (Hue, Saturation, Lightness) trata L como o ponto médio dos canais mais claro e mais escuro, branco puro é L=100% independentemente de S, vermelho puro é L=50%, S=100%; o branco vive no topo do cilindro, as cores mais vívidas vivem no equador. HSL foi especificamente escolhido para CSS porque sua simetria em torno de L=50% corresponde a como os designers pensam em tons e sombras.

CMYK, o modelo subtrativo do impressor

Enquanto monitores emitem luz (aditivo: mais é mais brilhante, os três no máximo = branco), a tinta absorve luz (subtrativo: mais é mais escuro, os três no máximo = preto, em teoria). A impressão em quatro cores, ciano, magenta, amarelo, mais uma placa preta «key», foi usada comercialmente pela primeira vez na década de 1890 para ilustrações coloridas de jornais. A Eagle Printing Ink Company é geralmente creditada com o primeiro verdadeiro processo de quatro cores tinta úmida em 1906. O «K» vem de «key» (a placa que registra todas as outras, tradicionalmente a placa de detalhe preto), não de «black», por isso o modelo é CMYK e não CMYB. A placa key existe por quatro razões práticas: combinar 100% C, M e Y em tinta real produz um marrom escuro lamacento, não um preto verdadeiro, porque os pigmentos reais não são perfeitamente puros; pretos de três cores desperdiçam tinta e retardam a secagem; pretos úmidos de três cores fazem o papel ondular e rasgar; e texto e contornos finos precisam de uma única placa de alto contraste para nitidez.

A matemática da conversão, brevemente

HEX ↔ RGB é trivial, divida a string hex em três substrings de dois caracteres e analise cada uma como um inteiro base 16 com parseInt(hex, 16); inverta com n.toString(16).padStart(2, '0'). RGB → HSL é matemática max/min: croma = max(R,G,B) − min(R,G,B); luminosidade = (max + min) / 2; saturação = croma / (1 − |2L − 1|); o matiz é calculado via uma fórmula por partes que pega o canal dominante e traduz sua posição em um ângulo em um dos seis setores de 60° do círculo de matizes. (Algumas implementações usam atan2, mas o artigo de Smith de 1978 evitou deliberadamente trigonometria por razões de desempenho, atan2 era uma instrução cara em um frame buffer dos anos 70, e a fórmula por partes permaneceu porque dá a mesma resposta mais rapidamente.) HSL → RGB inverte o processo via mapeamento linear por partes com croma e um deslocamento que traduz o tripleto de croma para o ponto certo do eixo de luminosidade. RGB ↔ HSV usa o mesmo esqueleto mas com um eixo vertical diferente: V = M em vez de L = (M+m)/2, e S = Δ/M em vez do divisor consciente da luminosidade. RGB ↔ CMYK usa a fórmula simples K = 1 − max(R,G,B), depois C, M, Y como (1 − canal − K) / (1 − K). Isso é matematicamente autoconsistente mas não descreve como qualquer prensa de impressão real reproduzirá a cor, veja a ressalva de impressão abaixo.

O problema da ida e volta

Converta #7A3D5C (HEX) → HSL → HEX. Você não necessariamente obterá #7A3D5C de volta. As razões são totalmente pedestres. Truncamento de inteiros: os canais HEX são inteiros 0-255; as conversões HSL produzem flutuantes; arredondar (1, 121.987, 47.512) para inteiros perde informações sub-pixel que a ida e volta não pode recuperar. Imprecisão Float64: o único tipo numérico do JavaScript é o flutuante binário de dupla precisão IEEE 754, com uma mantissa de 52 bits dando aproximadamente 15-17 dígitos decimais significativos, suficiente para uma conversão única mas acumula se você encadear muitas operações. Mapas assimétricos: múltiplos tripletos distintos (R,G,B) podem mapear para o mesmo tripleto (H,S,L) quando o croma é zero (qualquer cinza tem matiz indefinido; as convenções escolhem H = 0 ou preservam o H anterior). Para uma ferramenta de navegador pragmática, isso está bom, o usuário digitou #7A3D5C, vê (322°, 32%, 36%) em HSL e obtém #7A3D5C (ou #7A3E5D, fora por um) de volta. Enquanto a amostra exibida corresponde ao que o olho espera, a viagem é boa. Mas vale a pena ser honesto: a ida e volta sem perdas não é garantida.

Espaços de cor CSS modernos além de sRGB

Por décadas, «cor web» significava sRGB e apenas sRGB. Essa suposição quebrou em 2015, quando a Apple lançou o iMac do final de 2015 como «o primeiro computador de consumo com display de gama ampla integrado» suportando o espaço de cor Display P3 da Apple. P3 originou-se como DCI-P3, definido em 2005 pela Digital Cinema Initiative para projeção teatral. A variante Display P3 da Apple manteve as primárias da DCI mas trocou o ponto branco para D65 (combinando com o do sRGB) e adotou a curva de reprodução tonal do sRGB para torná-lo adequado para visualização desktop/móvel em vez de teatros escurecidos. O gamut do Display P3 é aproximadamente 25% maior em superfície do que sRGB e permite que telefones e laptops mostrem vermelhos e verdes mensuravelmente mais vívidos. Para permitir que o CSS descreva cores fora do sRGB, o CSS Color Module Level 4 do W3C introduziu a função color() com um parâmetro explícito de espaço de cor: color(srgb 1 0.5 0.2), color(display-p3 1 0.5 0.2), color(rec2020 1 0.5 0.2). Os espaços de cor predefinidos incluem srgb, srgb-linear, display-p3, a98-rgb (Adobe RGB), prophoto-rgb, rec2020, xyz, xyz-d50 e xyz-d65. Em um display sRGB normal, uma cor P3 fora do gamut é mapeada para o equivalente sRGB mais próximo que o display pode mostrar.

CSS Color Level 4 também acrescentou as funções de primeira classe lab(), lch(), oklab() e oklch(). lab() e lch() usam o espaço de cor CIE 1976 L*a*b*, padronizado pela Commission Internationale de l'Éclairage em 1976, o primeiro espaço de cor perceptualmente uniforme amplamente implantado, com os eixos a* e b* correspondentes a pares opositores vermelho-verde e azul-amarelo que correspondem a como o sistema visual humano realmente codifica a cor. Em dezembro de 2020, o desenvolvedor sueco Björn Ottosson publicou «A perceptual color space for image processing» em seu blog e introduziu Oklab. Ottosson passou anos na indústria de jogos fazendo manipulações de cor simples e concluiu que cada espaço de cor existente falhava nisso de alguma forma. Oklab é ajustado especificamente para operações de processamento de imagem: gradientes entre duas cores Oklab permanecem perceptualmente suaves, e ajustes de luminosidade em Oklab parecem ajustes de luminosidade para o olho humano. A forma cilíndrica, OKLCH, é o que a maioria dos designers realmente escreve. Oklab foi acrescentado ao CSS Color Level 4 um ano após o post do blog, em dezembro de 2021, e agora é o espaço de interpolação padrão para gradientes CSS em navegadores que implementam Color Level 4. A paleta de cores do Tailwind CSS v4 é gerada a partir de coordenadas OKLCH. A função color-mix() (CSS Color Module Level 5) foi lançada no Safari 16.2 (dezembro de 2022), Chrome 111 (março de 2023) e Firefox 113 (maio de 2023), tornando-a disponível em baseline através dos navegadores desde maio de 2023.

Mini-história da teoria das cores

Os conversores de cor web ficam no final de um arco de 360 anos de tentativa de entender a cor sistematicamente. Os marcos notáveis: Newton (1665-66) usou um prisma de vidro para dividir a luz solar no espectro visível e identificou sete cores em seu Opticks. Goethe (1810) publicou Teoria das Cores, um tratado anti-newtoniano mais interessado nas dimensões perceptuais e emocionais da cor do que em sua física, errado na ciência mas certo em que a percepção importa. Maxwell (1855/1861) como coberto acima. Itten (1961) publicou A Arte da Cor na Bauhaus, codificando a roda de cores de 12 matizes e os sete tipos de contraste de cor ainda ensinados nas escolas de design hoje. Pantone (1963) introduziu o Pantone Matching System (PMS), transformando a comunicação de cor entre designers e impressores em um catálogo numerado, um número Pantone significava exatamente a mesma cor em qualquer impressor no mundo que assinasse o sistema. A pilha de cor web herda de todas essas tradições: Newton nos dá o espectro visível, Maxwell as primárias aditivas, Itten o vocabulário de escola de design de esquemas complementares e análogos, Pantone o fato prático de que um número pode representar uma experiência perceptual.

Acessibilidade: contraste WCAG no que você escolher

Uma vez que você tem uma cor, precisa saber se pode colocar texto em cima. O critério de sucesso WCAG 2.1 1.4.3 (Contraste, Mínimo) requer uma razão de contraste de 4.5:1 para texto normal e 3:1 para texto grande (definido como 18pt / 24 pixels CSS regular, ou 14pt / 19 pixels CSS negrito). A razão de contraste é calculada a partir da luminância relativa: (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância da cor mais clara e L2 a mais escura, e a luminância é uma soma ponderada dos canais R, G, B gamma-decodificados com pesos 0.2126, 0.7152 e 0.0722 (correspondendo à sensibilidade do olho humano a esses comprimentos de onda). WCAG 2.1 SC 1.4.6 (Aprimorado) eleva a barra para 7:1 normal / 4.5:1 grande para conformidade AAA. WCAG 2.1 SC 1.4.11 cobre o contraste não textual (componentes de UI, indicadores de foco, objetos gráficos necessários para compreensão) a 3:1. O mais novo APCA (Advanced Perceptual Contrast Algorithm) é uma substituição em fase de pesquisa que combina melhor com o contraste percebido para texto de corpo e está sendo avaliado para WCAG 3, ele retorna um valor Lc direcional onde ±60 é o equivalente aproximado do 4.5:1 do WCAG. Sempre verifique pares de cores contra a fórmula real de contraste, não seu olho; os designers consistentemente superestimam quão legíveis são os emparelhamentos de baixo contraste.

A honesta ressalva de impressão: CMYK ingênuo não é CMYK real

A simples fórmula K = 1 − max(R,G,B) que cada conversor de navegador usa é matematicamente autoconsistente, a ida e volta RGB → CMYK → RGB retorna exatamente o mesmo RGB, módulo ponto flutuante. Mas não descreve como qualquer prensa de impressão real reproduzirá essa cor em papel. Uma verdadeira conversão RGB-para-CMYK precisa de três coisas que esta ferramenta não pode entregar: um perfil ICC alvo (definindo a combinação impressora + papel, papel revestido absorve tinta diferentemente do não revestido, e prensas comerciais de ponta executam perfis diferentes das impressoras jato de tinta de mesa), um intent de renderização (perceptual, colorimétrico relativo, saturação, colorimétrico absoluto, eles trocam como cores fora do gamut são espremidas), e um modelo colorimétrico real (CIE Lab como camada intermediária independente do dispositivo, com tabelas de pesquisa de perfil ICC completas de cada lado). É isso que o Adobe Photoshop faz por trás de seu menu de conversão CMYK e o que o software de pré-impressão profissional (Esko, Heidelberg Prinect, Caldera) faz para trabalho de produção. A fórmula ingênua está bem para entender a relação entre os modelos de cor aditivo e subtrativo, e útil para exploração de cor de primeira passagem, mas se você está enviando arquivos para um impressor comercial, faça a conversão no Photoshop (ou ferramenta preferida do seu impressor) com o perfil ICC correto carregado, a diferença visível pode ser substancial.

Cores nomeadas e a história de Rebeccapurple

CSS3 traz 147 cores nomeadas (148 se você contar o alias aqua = cyan), herdadas de uma mistura das 16 cores nomeadas originais do HTML 4 e da lista mais longa do sistema X11. A cor nomeada mais recentemente acrescentada tem uma história. Em 7 de junho de 2014, a filha do defensor dos padrões web Eric Meyer, Rebecca, morreu de uma forma agressiva de câncer cerebral no dia seguinte ao seu sexto aniversário. A cor favorita de Rebecca era roxo. Em poucos dias, os membros do CSS Working Group, liderados pelo editor Tab Atkins Jr., propuseram acrescentar rebeccapurple (#663399) à especificação CSS Color Level 4 como cor nomeada, em sua memória. A cor foi acrescentada em junho de 2014 e foi lançada nos navegadores logo depois. O valor hex foi especificamente escolhido como o valor que o próprio Eric Meyer havia usado em seu site. rebeccapurple está agora na tabela de cores nomeadas de cada navegador, a única cor comemorativa na especificação CSS, e um lembrete de que as especificações técnicas secas da web são escritas por pessoas que percebem quando uma delas está de luto.

Perguntas frequentes

Qual formato devo usar em CSS?

Os três formatos principais funcionam em CSS moderno. HEX é o mais compacto e amplamente usado, ótimo para cores estáticas onde você escolheu um valor uma vez e quer copiá-lo para todos os lugares. RGB é útil quando você precisa calcular valores programaticamente ou trabalhar com dados de imagem (a API canvas fala RGB nativamente). HSL é o melhor quando você quer criar variações de cor de sistema de design, ajustar luminosidade ou saturação enquanto mantém o matiz travado, que é como a paleta de cores do Tailwind constrói suas rampas completas. Para sistemas de design de 2026, OKLCH (em CSS Color Level 4) é cada vez mais a resposta certa para trabalho novo, ele interpola perceptualmente suave entre duas cores, o que importa para gradientes e geração de rampas suaves.

Qual é a diferença entre #FFF e #FFFFFF?

Hex de três dígitos é taquigrafia onde cada dígito é duplicado: #FFF = #FFFFFF, #09C = #0099CC, #F0A = #FF00AA. Ambos são CSS válidos mas a forma de seis dígitos suporta todas as 16.777.216 cores sRGB enquanto a forma de três dígitos suporta apenas 4.096 (cada canal restrito a 16 valores distintos). Hex de três dígitos é conciso mas ligeiramente limitado; seis dígitos é a paleta sRGB completa. CSS Color Module Level 4 também define formas de quatro e oito dígitos (com alpha), onde #F008 expande para #FF000088 e #F00 expande para #FF0000.

Posso converter cores com transparência (alpha)?

Esta ferramenta foca atualmente em cores opacas. Para alpha, CSS suporta rgba(r, g, b, a), hsla(h, s%, l%, a) e hex de 8 dígitos (#RRGGBBAA) como notações separadas; CSS Color Level 4 também permite que você escreva rgb(r g b / a%) e hsl(h s% l% / a%) com um alpha separado por barra. A forma hex de 8 dígitos está disponível em baseline desde aproximadamente 2017 (Chrome 62, Firefox 49, Safari 10).

Minha conversão CMYK corresponderá ao que sai da impressora?

Provavelmente não exatamente. A matemática simples que esta ferramenta usa é colorimetricamente autoconsistente (RGB → CMYK → RGB retorna o mesmo RGB) mas não leva em conta o perfil ICC da sua combinação específica de impressora + papel, o intent de renderização (perceptual, colorimétrico relativo, etc.) ou a característica de ganho de ponto da prensa. Para trabalho destinado a impressão, faça a conversão CMYK final no Photoshop ou na ferramenta preferida do seu impressor com o perfil ICC correto carregado, a diferença visível entre uma conversão ingênua e uma consciente do perfil pode ser substancial, especialmente para vermelhos e azuis saturados no limite do gamut CMYK.

E sobre OKLCH e os espaços de cor CSS modernos?

CSS moderno suporta oklab(), oklch(), lab(), lch() e color(display-p3 ...) para trabalho com gamut mais amplo e cor perceptualmente uniforme. O suporte de navegador para esses é baseline desde aproximadamente 2023 (Safari 16.4, Chrome 111, Firefox 113 para oklch(); color() com espaços nomeados foi lançado ligeiramente antes no Safari). Eles ainda não são mostrados neste conversor, em parte porque a matemática é mais difícil de exibir em forma compacta (Lab tem eixos sinalizados que não mapeiam para um controle deslizante 0-100%) e em parte porque a maioria dos fluxos de produção atuais ainda visam sRGB. Se você está trabalhando em um sistema de design moderno que usa OKLCH (Tailwind CSS v4, por exemplo), use as ferramentas desse sistema para geração de cor; este conversor é a resposta certa para trabalho sRGB legacy.

Meus dados são enviados para algum lugar?

Não. A conversão de cor é aritmética pura, não há nada que o servidor possa fazer que seu navegador não possa. Cada conversão roda localmente em JavaScript. Você pode verificar na aba Rede do DevTools enquanto muda a cor: não há solicitações de saída. Tire a página do ar (modo avião) depois que ela carregar e o conversor ainda funcionará.

Ferramentas relacionadas