Três descrições de uma cor sRGB
Uma cor HEX de seis dígitos empacota valores de canais vermelho, verde e azul em pares de dígitos hexadecimais. O RGB grava esses mesmos três canais como números decimais de 0 até 255 nessas ferramentas. O HSL reorganiza a mesma cor sRGB em coordenadas de matiz, saturação e luminosidade. É útil quando você quer raciocinar sobre uma família de cores, mas a luminosidade é um parâmetro desse modelo, em vez de uma medida direta do brilho percebido. HEX e RGB são duas notações para valores de canal; HSL requer cálculo. Todos os três podem especificar uma cor de exibição correspondente quando a conversão é realizada consistentemente. As ferramentas MultiVerto aqui lidam com cores opacas e seus formatos de entrada exibidos, não com todas as sintaxes de cores CSS possíveis.
Trabalhe através de um azul suave
Tome #336699. Seus pares são 33, 66 e 99 em hexadecimal, que se tornam decimais 51, 102 e 153. O conversor de HEX para RGB, portanto, mostra rgb(51, 102, 153). A conversão desses valores RGB para HSL dá hsl(210, 50%, 40%) na exibição arredondada da ferramenta. Os graus de tonalidade 210 estão na região azul; saturação 50% e luminosidade 40% descrevem esta coordenada HSL em particular. Digite #336699 abaixo e cole o resultado RGB no conversor vinculado de RGB para HSL. Inverta a rota com HSL-para-RGB e RGB-para-HEX. Para este exemplo, os valores simples retornam à cor original de seis dígitos.
- HEX #336699 → canais 33 66 99
- RGB rgb(51, 102, 153)
- HSL hsl(210, 50%, 40%)
Viagens de ida e volta e precisão
Os pares HEX identificam valores inteiros do canal exatamente. Uma representação HSL de canais RGB arbitrários pode exigir mais dígitos fracionários do que um display curto mostra. MultiVerto arredonda componentes HSL exibidos para duas casas decimais e o conversor reverso arredonda canais RGB para inteiros inteiros. Para muitas entradas, uma viagem de ida e volta permanece visualmente próxima, mas uma pequena mudança de um canal pode ocorrer. Mantenha o token HEX ou RGB original se uma cor exata legível por máquina fizer parte de um sistema de design. Um valor HEX de três dígitos expande cada dígito, então #369 se torna #336699; não são três números decimais. Essa ferramenta não aceita transparência alfa nos conversores de amostra, portanto, uma cor translúcida precisa de um fluxo de trabalho separado.
A conversão não é um teste de acessibilidade
A mesma cor numérica pode parecer diferente em diferentes fundos ou em diferentes dispositivos. A luminosidade HSL não informa se o texto branco ou preto atende a um requisito de contraste. O contraste depende de duas cores e da fórmula de acessibilidade, não apenas do percentual HSL de uma cor. Se a cor for usada para texto, teste o par real de primeiro plano e plano de fundo com o critério relevante do WCAG. Verifique também os estados de hover, focus e disabled onde outras cores podem aparecer. As ferramentas de conversão ajudam a preservar uma notação em CSS, um arquivo de token de design ou uma resposta de API; elas não escolhem automaticamente uma paleta acessível. Não infira a legibilidade a partir de uma saída de conversor único.
Um fluxo de trabalho prático de design-token
Escolha um token canônico, como #336699, e registre onde ele é usado. Converta-o para RGB quando uma interface pedir números de canal, ou para HSL quando ajustar matiz e saturação deliberadamente. Depois de editar o HSL, converta o novo valor de volta para RGB ou HEX e salve o resultado como um novo token, em vez de substituir silenciosamente o antigo. Compare amostras renderizadas no layout real e execute a verificação de contraste com as cores vizinhas reais. Mantenha as cores alfa e ampla gama CSS fora desta comparação simples de três canais, a menos que o destino as suporte explicitamente. Um token de origem claro mais variantes testadas torna a manutenção posterior mais fácil do que copiar manualmente três strings de cores não relacionadas.