Ferramentas
Conversor de cores HEX, RGB e HSL
Informe uma cor e receba as três notações, a luminância relativa e a razão de contraste com branco e com preto, calculada pela fórmula da WCAG 2.1.
Tudo acontece no seu navegador. Nenhum dado digitado aqui é enviado à sysINFO ou a terceiros - não há servidor, upload nem registro. Você pode desconectar da internet e a ferramenta continua funcionando.
Para que serve
As três notações descrevem a mesma cor de maneiras diferentes, e cada uma é conveniente em um momento. O hexadecimal é compacto e é o que aparece em guias de marca e em ferramentas de design. O RGB expõe os três canais em números decimais, o que ajuda quando você precisa manipular um canal isoladamente ou acrescentar transparência. O HSL descreve matiz, saturação e luminosidade, e é o mais útil para criar variações de uma mesma cor: clarear um tom para o estado de foco, escurecer para o estado pressionado, manter a matiz e mexer só na saturação.
Traduzir entre as três à mão é chato e propenso a erro. Aqui basta digitar a cor em qualquer formato aceito para ver as outras aparecerem instantaneamente, junto com uma amostra visual que ajuda a confirmar que você digitou o valor certo.
A parte que costuma ser mais útil no dia a dia, porém, é o contraste. Antes de escolher uma cor para texto, é preciso saber se ela será legível sobre o fundo. A página calcula a luminância relativa da cor e a razão de contraste dela com branco e com preto, que são os dois fundos mais comuns, e indica se cada combinação atinge o limite do nível AA das diretrizes de acessibilidade.
Como usar
- Digite ou cole a cor no campo Cor. Valem
#1E7BFF,1E7BFF, a forma curta#1cfe a notaçãorgb(30, 123, 255). - Não há botão de calcular: a conversão acontece a cada tecla digitada.
- Confira a Amostra para ver a cor pintada em um bloco.
- Leia as Conversões e contraste: hexadecimal normalizado em maiúsculas, RGB, HSL, luminância relativa e as duas razões de contraste com a indicação de aprovação no nível AA.
- Use Limpar para esvaziar o campo e recomeçar.
Exemplos
Um azul de destaque
Entrada: #1E7BFF HEX #1E7BFF RGB rgb(30, 123, 255) HSL hsl(215, 100%, 56%) Luminância relativa 0.2166 Contraste com branco 3.94:1 (não passa em AA) Contraste com preto 5.33:1 (passa em AA)
Hexadecimal curto, expandido para seis dígitos
Entrada: #1cf HEX #11CCFF RGB rgb(17, 204, 255) HSL hsl(193, 100%, 53%) Luminância relativa 0.5052 Contraste com branco 1.89:1 (não passa em AA) Contraste com preto 11.10:1 (passa em AA)
O cinza que passa nos dois fundos
Entrada: rgb(118, 118, 118) HEX #767676 HSL hsl(0, 0%, 46%) Luminância relativa 0.1812 Contraste com branco 4.54:1 (passa em AA) Contraste com preto 4.62:1 (passa em AA)
Notas técnicas
A luminância relativa segue a definição da WCAG 2.1. Cada canal é primeiro dividido por 255. Se o valor obtido for menor ou igual a 0,03928, ele é dividido por 12,92; caso contrário, soma-se 0,055, divide-se por 1,055 e eleva-se o resultado à potência 2,4. Essa etapa desfaz a curva de gama do espaço sRGB, para que os números representem luz medida e não a codificação usada nos arquivos. Os três valores corrigidos são então combinados com os pesos 0,2126 para o vermelho, 0,7152 para o verde e 0,0722 para o azul, que refletem a sensibilidade desigual do olho humano: o verde pesa mais de dez vezes o azul.
A razão de contraste entre duas cores é a luminância da mais clara somada a 0,05, dividida pela luminância da mais escura somada a 0,05. A constante 0,05 representa o reflexo ambiente na tela e impede que a divisão exploda quando a cor mais escura é preto puro. O intervalo possível vai de 1:1, quando as duas cores são idênticas, a 21:1, entre preto e branco puros. Aqui os cálculos usam sempre branco puro e preto puro como referência, então uma comparação contra um fundo cinza ou colorido precisa ser feita à parte.
O critério 1.4.3 do nível AA pede 4,5:1 para texto de tamanho normal e 3:1 para texto grande, definido como 18 pontos ou 14 pontos em negrito. O critério 1.4.11 pede 3:1 para componentes de interface e objetos gráficos, como a borda de um campo ou um ícone que carrega significado. O rótulo mostrado na tabela usa apenas o limite de 4,5:1, o mais rigoroso dos três, então uma cor marcada como reprovada pode ainda assim atender ao nível AA em um título grande ou em um ícone. O nível AAA, mais exigente, pede 7:1 e 4,5:1 respectivamente.
Duas limitações valem registro. A conversão para HSL arredonda matiz, saturação e luminosidade para inteiros, o que faz o caminho de volta divergir do hexadecimal original em uma ou duas unidades por canal. E a transparência é ignorada: se você informar uma cor no formato rgba, o canal alfa é descartado, porque o contraste real dependeria de saber qual cor está por trás.
Perguntas frequentes
Como o contraste é calculado?
Pela fórmula da WCAG 2.1. Cada canal é dividido por 255 e passa por uma correção de gama; os três valores corrigidos são combinados com os pesos 0,2126 para o vermelho, 0,7152 para o verde e 0,0722 para o azul, resultando na luminância relativa. A razão de contraste entre duas cores é a luminância da mais clara mais 0,05 dividida pela luminância da mais escura mais 0,05. O valor vai de 1:1 a 21:1.
O que significa passar no nível AA?
O critério 1.4.3 da WCAG 2.1 exige razão de pelo menos 4,5:1 entre o texto e o fundo para texto de tamanho normal, e de pelo menos 3:1 para texto grande, considerado grande a partir de 18 pontos, ou de 14 pontos quando em negrito. Há ainda o critério 1.4.11, que pede 3:1 para bordas de campos, ícones funcionais e outros elementos de interface.
Por que a página diz que não passa em AA se a cor serve para um título grande?
Porque o rótulo exibido usa o limite mais rigoroso, o de 4,5:1 para texto normal. Uma razão entre 3:1 e 4,5:1 é reprovada nesse rótulo e ainda assim atende ao nível AA para texto grande e para elementos de interface. Olhe o número da razão, e não apenas o rótulo, quando a cor for usada em um título, em um ícone ou na borda de um campo.
Posso informar a cor em HSL ou com transparência?
A entrada aceita hexadecimal de seis ou de três dígitos, com ou sem cerquilha, e a notação rgb com três números. HSL aparece apenas na saída. Um valor com canal alfa é aceito na forma rgba, mas a transparência é ignorada no cálculo: a conversão e o contraste consideram a cor opaca, porque o resultado real dependeria de saber sobre qual fundo ela é aplicada.
Por que o HSL mostrado não volta exatamente ao mesmo hexadecimal?
Porque os valores de matiz, saturação e luminosidade são arredondados para inteiros na exibição. O espaço RGB de 8 bits tem cerca de 16,7 milhões de combinações, e a grade de HSL com números inteiros é mais grossa que isso. A diferença fica em uma ou duas unidades por canal, imperceptível a olho nu, mas suficiente para o hexadecimal de volta não bater dígito a dígito.
Todas as ferramentas
Página de ferramentas →Todas gratuitas e executadas inteiramente no seu navegador.
Documentos brasileiros
Desenvolvimento
Texto