Conversor de cor e verificador de contraste
Converte cores entre HEX, RGB, HSL e HSV, além de verificar o rácio de contraste WCAG.
A carregar Conversor de cor e verificador de contraste… Se nada acontecer, ativa o JavaScript.
A representação digital da cor evoluiu através de vários sistemas concorrentes, cada um otimizado para um fim diferente. O formato hexadecimal #RRGGBB surgiu nos primeiros tempos do HTML na década de 1990, quando a web de Tim Berners-Lee precisava de uma forma concisa de especificar os 16 milhões de cores que os ecrãs de 24 bits conseguiam mostrar. O formato codifica as intensidades dos canais vermelho, verde e azul como números hexadecimais de dois dígitos, tornando-o compacto para a marcação sem deixar de ser legível por humanos. RGB (vermelho, verde, azul) é o modelo de cor aditivo usado por todos os ecrãs digitais: misturar luz a plena intensidade produz branco, o oposto de como a tinta se comporta. HSL (tom, saturação, luminosidade) e HSV (tom, saturação, valor) são transformações cilíndricas do RGB que se alinham mais de perto com a forma como os humanos percecionam a cor, o que as torna indispensáveis para construir paletas de design sistemáticas.
Exemplos
#ff5733
rgb(255, 87, 51)
Cada par hexadecimal corresponde a um canal vermelho, verde, azul (0-255).
rgb(255, 87, 51)
hsl(11, 100%, 60%)
A mesma cor expressa como tom, saturação, luminosidade.
Perguntas frequentes
É enviado algum dado para um servidor quando uso esta ferramenta?
Como funciona o formato de cor hexadecimal?
Quando devo usar HSL em vez de RGB no meu CSS?
Que rácio de contraste WCAG preciso para o meu site?
Porque é que os mesmos valores HSL às vezes parecem diferentes em navegadores diferentes?
Qual é a história das cores web?
Posso converter cores com transparência?
Em que difere esta ferramenta das DevTools do navegador?
Que valores de cor deve um programador saber de cor?
Qual é um erro comum de principiante com as cores hexadecimais?
Sobre Conversor de cor e verificador de contraste
Os designers usam códigos hexadecimais ao escrever folhas de estilo CSS e ao escolher cores de marca em ferramentas como o Figma ou o Sketch. Os programadores front-end mudam para RGB ou RGBA quando precisam de aplicar opacidade ou de fazer mistura de cores programática em canvas ou WebGL. O HSL é o preferido para gerar escalas de cor de forma algorítmica; por exemplo, mantendo o tom fixo enquanto se escalona a luminosidade para criar uma rampa de tons consistente. O HSV é o formato nativo da maioria dos widgets seletores de cor porque o seu eixo de valor corresponde de forma intuitiva ao controlo deslizante de brilho. Os engenheiros de acessibilidade apoiam-se nos cálculos do rácio de contraste para garantir que o texto continua legível para utilizadores com baixa visão ou daltonismo, um requisito exigido pelas WCAG 2.1 e aplicado nos sites do setor público em toda a UE e nos EUA.
Esta ferramenta converte qualquer cor que introduzas para as quatro notações em simultâneo e também calcula o rácio de contraste WCAG entre a tua cor e qualquer fundo que especifiques. Tudo corre no teu navegador sem pedidos ao servidor. Podes colar um código hexadecimal, escrever valores RGB ou introduzir coordenadas HSL, e a ferramenta mostra-te instantaneamente todas as representações equivalentes. O verificador de contraste dá-te um resultado de aprovado ou reprovado face aos limiares AA e AAA das WCAG.
Um erro comum é confundir HSL e HSV: ambos usam tom e saturação, mas o seu terceiro eixo difere de formas importantes. No HSL, uma luminosidade de 100 % produz sempre branco, independentemente do tom ou da saturação. No HSV, um valor de 100 % produz o tom puro (brilho máximo), e não branco. Outro erro frequente é esquecer que a forma abreviada hexadecimal #RGB se expande para #RRGGBB duplicando os dígitos, por isso #f09 significa #ff0099, e não #f00009. Ao trabalhar com opacidade, repara que o CSS aceita tanto o hexadecimal de oito dígitos (#RRGGBBAA) como a função rgba(), mas alguns navegadores e ferramentas de design mais antigos só suportam a forma rgba().
Como 16 milhões de cores acabaram num código de seis caracteres
Antes da web, a cor nos ecrãs dos computadores era uma questão de severas limitações. A placa gráfica CGA original de 1981 oferecia apenas 16 cores, cuidadosamente escolhidas para serem distinguíveis nos monitores da época. O padrão EGA ampliou isto para 64, e o VGA acabou por oferecer 256 cores de uma paleta fixa. Só quando os ecrãs de cor verdadeira de 24 bits se tornaram acessíveis no início da década de 1990 é que o espectro completo de 16 777 216 cores ficou disponível para o hardware de consumo, e a web precisou de uma notação para os descrever a todos.
Os engenheiros do Netscape Navigator escolheram o hexadecimal porque correspondia na perfeição ao hardware subjacente: cada um dos três canais de cor de 8 bits (0-255) pode ser expresso como exatamente dois dígitos hexadecimais (00-FF), dando um código de seis caracteres compacto e inequívoco. O formato apareceu no Netscape 1.1 por volta de 1994 e foi rapidamente copiado pelo Internet Explorer. O W3C formalizou-o na especificação CSS1 em 1996, consolidando o seu lugar como a abreviatura universal da cor web. As palavras-chave de cores com nome (red, blue, aqua) foram herdadas diretamente das 16 cores VGA padrão, com cores adicionais retiradas do sistema de janelas X11 usado nas estações de trabalho Unix.
A viragem para os espaços de cor percetualmente uniformes é o capítulo seguinte na história da cor web. O RGB e o HSL tradicionais são matematicamente simples mas percetualmente não uniformes: um passo de dez unidades de luminosidade no HSL parece muito diferente consoante o tom, o que dificulta os cálculos fiáveis de acessibilidade. A especificação CSS Color Level 4 introduz o OKLCH e o OKLAB, espaços de cor desenhados para que diferenças numéricas iguais correspondam a diferenças percecionadas iguais. Estes espaços já são suportados nos navegadores modernos e representam a evolução mais significativa na forma como os programadores especificam a cor desde que o formato hexadecimal original foi introduzido há trinta anos.