Conversor de cores

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

Quais formatos de cor posso converter?

Você pode inserir valores em HEX, HEX alpha, RGB, RGBA, HSV, HSL ou HSLA e consultar os valores correspondentes em cada formato compatível. Isso é útil quando uma especificação de design, folha de estilos ou API de terceiros representa a mesma cor de outra maneira.

• HEX representa os canais vermelho, verde e azul com pares hexadecimais, geralmente no formato #RRGGBB.
• HEX Alfa acrescenta um canal de opacidade. Na notação CSS moderna, costuma aparecer como #RRGGBBAA.
• RGB usa valores para os canais vermelho, verde e azul, normalmente no intervalo de 0 a 255.
• RGBA acrescenta transparência alfa ao RGB.
• HSV descreve matiz, saturação e valor. É comum em seletores de cores, mas não é uma função de cor padrão do CSS.
• HSL descreve matiz, saturação e luminosidade. O CSS oferece suporte direto a HSL.
• HSLA é o formato HSL com um valor alfa.

RGB e HSL são descrições matemáticas diferentes de uma cor, não cores distintas. A conversão permite mudar a representação, preservando a cor desejada tanto quanto o formato de destino permitir.

Como usar o conversor de cores?

Insira um valor de cor completo no campo Cor, usando um dos formatos aceitos. Depois, consulte ou copie os valores gerados nos campos de saída.

1. Copie o valor de origem exatamente como está, incluindo o sinal de cerquilha no início, vírgulas, parênteses, sinais de porcentagem ou o componente alfa, quando aplicável.
2. Cole o valor no campo Cor.
3. Consulte os valores equivalentes exibidos em HEX, HEX Alfa, RGB, RGBA, HSV, HSL e HSLA.
4. Escolha um dos formatos de cor compatíveis com o destino. Para uma regra CSS, HEX, RGB, RGBA, HSL e HSLA são opções comuns. HSV é usado com mais frequência em interfaces de edição e cálculos de cor.

A conversão é executada no servidor. O valor inserido é enviado ao servidor por HTTPS e não é armazenado. Embora uma cor isolada raramente seja uma informação confidencial, avalie se uma paleta ainda não lançada ou um conjunto de tokens de design é sigiloso antes de enviá-lo a qualquer serviço online.

Espaços e sinais de pontuação fazem parte da sintaxe de RGB, HSL e formatos relacionados, enquanto os sinais de porcentagem identificam valores percentuais. Um número isolado, um valor vazio ou um texto qualquer não identifica uma cor. Textos com acentos ou caracteres não latinos também não têm significado definido nesses formatos numéricos.

Como interpretar os valores convertidos?

Leia cada resultado como outra notação para a mesma cor, observando principalmente os intervalos dos canais, as porcentagens e a transparência alfa. O campo a ser copiado depende da notação de cor aceita pelo sistema de destino.

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

O matiz costuma ser expresso como um ângulo em um círculo cromático. A saturação e a luminosidade ou o valor geralmente são expressos em porcentagens. A luminosidade do HSL e o valor do HSV resultam de cálculos diferentes, portanto suas porcentagens 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 a alfa, mas uma cor semitransparente precisa. Se você copiar uma cor RGBA ou HSLA para RGB, HSL ou HEX de seis dígitos, a notação de destino não terá onde registrar o canal alfa.

Este conversor não é descrito como um validador de sintaxe com mensagens detalhadas de diagnóstico. Não dependa dele para identificar exatamente qual caractere está incorreto em uma entrada malformada. Entre os erros comuns de sintaxe de cor estão a ausência do sinal de cerquilha no HEX, parênteses sem correspondência, sinais de porcentagem omitidos, um valor alfa fora do intervalo esperado ou a mistura das convenções de canais de HSL e RGB.

Exemplos práticos de conversão de cores

Um exemplo simples mostra a relação entre HEX, RGB, HSL e HSV. O vermelho puro pode ser escrito nas seguintes formas equivalentes.

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

Para uma cor menos saturada, #336699 equivale a rgb(51, 102, 153). Sua representação em HSL é hsl(210, 50%, 40%), enquanto a representação em HSV tem matiz de 210 graus, saturação de aproximadamente 66.7% e valor de 60%. Uma interface pode arredondar valores decimais ou variar os espaços 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 vermelho com metade da opacidade. Pela convenção comum de HEX CSS 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 o aplicativo de destino exige outra notação ou quando uma representação diferente facilita a depuração. Casos comuns incluem transformar um valor do Figma em uma propriedade personalizada do CSS, conferir um valor RGBA encontrado no Chrome DevTools, preparar campos de cor para o payload de uma API ou revisar dados de temas de terceiros antes da implantação.

A conversão geralmente é desnecessária quando a notação atual já é compatível com o destino. Há pouco benefício em mudar um HEX de seis dígitos para RGB apenas para uso em CSS legível por máquina, e sucessivas conversões entre formatos podem introduzir arredondamentos nos valores HSL ou HSV. Da mesma forma, não acrescente um canal alfa quando todas as cores forem comprovadamente opacas.

Se você precisa 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 o gerenciamento de perfis de cor. Valores numéricos equivalentes não comprovam que o texto em primeiro plano atende aos requisitos de contraste das WCAG.

Perguntas frequentes

O conversor aceita nomes de cores do CSS?

Não. Os formatos de entrada aceitos informados são HEX, HEX alpha, RGB, RGBA, HSV, HSL e HSLA. Portanto, nomes como red, rebeccapurple ou transparent não aparecem como entradas compatíveis. Converta a cor nomeada em um valor CSS numérico antes de inseri-la.

Posso inserir valores HEX com três dígitos?

HEX está entre os formatos de entrada aceitos, mas os comprimentos compatíveis não são informados. Para obter resultados previsíveis, expanda uma forma abreviada como #369 para #336699. O mesmo princípio vale para a abreviação de quatro dígitos que inclui alfa.

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

Insira apenas o valor da cor, não a declaração inteira. Por exemplo, use #336699 em vez de color: #336699;, pois o nome da propriedade e o ponto e vírgula não fazem parte da cor. Ao copiar um valor de um arquivo JSON ou de configuração, remova as aspas ao redor dele.

O resultado preserva informações de ampla gama de cores ou de perfil de cor?

Não há formatos de ampla gama de cores nem perfis de cor incorporados entre os formatos compatíveis informados. Display P3, Lab, LCH e dados de perfil ICC contêm informações que os campos HEX, RGB, HSL e HSV disponíveis não representam. Use um aplicativo com gerenciamento de cores quando precisar de uma conversão que considere perfis.

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

Os cálculos de HSL e HSV podem produzir porcentagens 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. Ao armazenar tokens de design, mantenha a precisão disponível e arredonde apenas se o formato de destino ou o padrão de codificação exigir.