Conversor de cores

O Conversor de cores é uma ferramenta gratuita que converte uma cor indicada em HEX, HEX alfa, RGB, RGBA, HSV, HSL ou HSLA em vários formatos de cor equivalentes.

Que formatos de cor posso converter?

Podes introduzir uma cor em HEX, HEX alfa, RGB, RGBA, HSV, HSL ou HSLA e consultar os valores correspondentes em cada formato suportado. Isto é útil quando uma especificação de design, uma folha de estilos ou uma API de terceiros representa a mesma cor de outra forma.

• HEX representa os canais vermelho, verde e azul através de pares hexadecimais, geralmente no formato #RRGGBB.
• HEX alfa acrescenta um canal de opacidade. Na notação CSS moderna, aparece frequentemente como #RRGGBBAA.
• RGB utiliza valores para os canais vermelho, verde e azul, normalmente entre 0 e 255.
• RGBA acrescenta transparência alfa ao RGB.
• HSV descreve a matiz, a saturação e o valor. É comum em seletores de cores, mas não é uma função de cor CSS padrão.
• HSL descreve a matiz, a saturação e a luminosidade. O CSS suporta HSL diretamente.
• HSLA é HSL com um valor alfa.

RGB e HSL são descrições matemáticas diferentes de uma cor, não cores diferentes. A conversão permite mudar a representação, mantendo a cor pretendida tão fielmente quanto o formato de destino permitir.

Como uso o conversor de cores?

Introduz um valor de cor completo no campo Cor, num dos formatos aceites, e depois consulta ou copia os valores gerados nos campos de saída.

1. Copia o valor original exatamente como aparece, incluindo o cardinal inicial, as vírgulas, os parênteses, os sinais de percentagem ou o componente alfa, quando aplicável.
2. Cola-o no campo Cor.
3. Consulta os valores equivalentes apresentados em HEX, HEX Alfa, RGB, RGBA, HSV, HSL e HSLA.
4. Escolhe um dos formatos de cor suportados pelo sistema de destino. Para uma regra CSS, HEX, RGB, RGBA, HSL e HSLA são opções comuns. O HSV é mais utilizado em interfaces de edição e cálculos de cor.

A conversão é realizada no servidor. Os dados introduzidos são enviados para o servidor através de HTTPS e não ficam armazenados. Embora uma cor isolada raramente seja sensível, verifica se uma paleta ainda não divulgada ou um conjunto de tokens de design é confidencial antes de o enviares para qualquer serviço online.

Os espaços e a pontuação fazem parte da sintaxe de RGB, HSL e formatos relacionados, enquanto os sinais de percentagem identificam valores percentuais. Um número isolado, um valor vazio ou texto arbitrário não identifica uma cor. Texto acentuado ou escrito com caracteres não latinos também não tem um significado definido nestes formatos numéricos.

Como interpreto os valores convertidos?

Interpreta cada resultado como uma notação diferente para a mesma cor, prestando especial atenção aos intervalos dos canais, às percentagens e à transparência alfa. O campo a copiar depende da notação de cor suportada pelo sistema de destino.

Num valor HEX de seis dígitos, o primeiro par representa o vermelho, o segundo o verde e o terceiro o azul. Por exemplo, #336699 contém os valores hexadecimais de canal 33, 66 e 99, que correspondem aos valores RGB decimais 51, 102 e 153.

A matiz é normalmente expressa como um ângulo numa roda de cores. A saturação e a luminosidade ou o valor são geralmente indicados em percentagem. A luminosidade HSL e o valor HSV resultam de cálculos diferentes, pelo que as respetivas percentagens não devem ser comparadas como se medissem a mesma propriedade.

O alfa descreve a opacidade. Uma cor totalmente opaca não precisa de um formato com suporte para alfa, mas uma cor semitransparente precisa. Se copiares uma cor RGBA ou HSLA para RGB, HSL ou HEX de seis dígitos, a notação de destino não terá onde registar o canal alfa.

Este conversor não está documentado como um validador de sintaxe com mensagens de diagnóstico detalhadas. Não o uses para tentar identificar o carácter exato de um valor malformado. Entre os erros comuns de sintaxe de cor estão a falta do cardinal em HEX, parênteses sem correspondência, sinais de percentagem omitidos, um valor alfa fora do intervalo esperado ou a mistura das convenções de canais de HSL e RGB.

Exemplos de conversão de cores

Um exemplo simples mostra como HEX, RGB, HSL e HSV se relacionam. O vermelho puro pode ser escrito das seguintes formas equivalentes.

• Entrada HEX #ff0000
• Equivalente RGB rgb(255, 0, 0)
• Equivalente HSL hsl(0, 100%, 50%)
• Equivalente HSV hsv(0, 100%, 100%)

Para uma cor menos saturada, #336699 equivale a rgb(51, 102, 153). A sua representação HSL é hsl(210, 50%, 40%), enquanto a representação HSV tem uma matiz de 210 graus, uma saturação de cerca de 66,7% e um valor de 60%. Uma interface pode arredondar valores decimais ou usar espaçamentos diferentes sem alterar o significado prático.

A transparência oferece outro exemplo simples. rgba(255, 0, 0, 0.5) e hsla(0, 100%, 50%, 0.5) descrevem ambos vermelho com metade da opacidade. Segundo a convenção CSS comum de HEX com oito dígitos, o valor correspondente é #ff000080, em que 80 é o byte alfa quantizado.

Quando vale a pena converter uma cor?

Vale a pena converter uma cor quando a aplicação de destino exige outra notação ou quando uma representação diferente facilita a deteção de problemas. Alguns casos comuns incluem converter um valor do Figma numa propriedade personalizada CSS, verificar um valor RGBA encontrado no Chrome DevTools, preparar campos de cor para o payload de uma API ou rever dados de um tema de terceiros antes da implementação.

A conversão costuma ser desnecessária quando a notação existente já é suportada pelo destino. Alterar HEX de seis dígitos para RGB apenas para CSS legível por máquinas traz poucas vantagens, e as conversões sucessivas podem introduzir arredondamentos nos valores HSL ou HSV. Da mesma forma, não acrescentes um canal alfa quando todas as cores são comprovadamente opacas.

Se precisares de escolher uma cor visualmente, em vez de converter um valor conhecido, o Seletor de cores é a ferramenta mais direta. A conversão também não substitui testes de contraste, simulações de daltonismo ou a gestão de perfis de cor. Valores numéricos equivalentes não provam que o texto em primeiro plano cumpre os requisitos de contraste das WCAG.

Perguntas frequentes

O conversor aceita nomes de cores CSS?

Não. Os formatos aceites documentados são HEX, HEX alfa, RGB, RGBA, HSV, HSL e HSLA, pelo que nomes como red, rebeccapurple ou transparent não constam como entradas suportadas. Converte primeiro o nome da cor num valor CSS numérico e só depois o introduzas.

Posso introduzir valores HEX de três dígitos?

As entradas aceites incluem HEX, mas os comprimentos suportados não estão documentados. Para obteres um resultado previsível, expande uma forma abreviada como #369 para #336699. O mesmo princípio aplica-se à forma abreviada de quatro dígitos que inclui alfa.

Posso colar uma declaração CSS em vez do valor da cor?

Introduz apenas o valor da cor, não a declaração completa. Por exemplo, usa #336699 em vez de color: #336699;, porque o nome da propriedade e o ponto e vírgula não fazem parte da cor. Remove as aspas em redor do valor quando o copiares de JSON ou de um ficheiro de configuração.

O resultado mantém informações de gama alargada ou do perfil de cor?

Não estão indicados como suportados formatos de gama alargada nem perfis de cor incorporados. Display P3, Lab, LCH e os dados de perfis ICC contêm informações que os campos HEX, RGB, HSL e HSV disponíveis não conseguem representar. Usa uma aplicação com gestão de cor quando precisares de uma conversão que tenha em conta o perfil.

Porque é que os valores convertidos às vezes têm casas decimais?

Os cálculos HSL e HSV podem produzir percentagens fracionárias, mesmo quando os canais RGB de origem são números inteiros. Arredondar esses valores pode alterar ligeiramente uma conversão posterior de volta para RGB. Mantém a precisão disponível ao guardares tokens de design e arredonda apenas se o formato de destino ou a norma de programação assim o exigir.