Conversor de Cores
Introduza um nome ou código de cor CSS para ver os seus valores RGB, HEX, HSL, HWB, CMYK e NCol, juntamente com uma pré-visualização da cor.
Conversor de Cores HEX ⇄ RGB ⇄ HSL
Fórmula do Conversor de Cores
Onde:
- \(h_1,\ldots,h_6\) — os seis dígitos de uma cor HEX, lidos como valores de 0 a 15; A até F representam 10 até 15.
- \(R\), \(G\) e \(B\) — os valores dos canais vermelho, verde e azul, cada um de 0 a 255.
Esta fórmula converte uma cor HEX de seis dígitos para RGB. A calculadora também aceita outros formatos de cor suportados e faz a conversão entre eles.
Conversor de Cores – Exemplo de Cálculo
Exemplo: a entrada predefinida é skyblue. Esta cor nomeada corresponde a #87CEEB, portanto os seus pares de dígitos HEX podem ser convertidos para RGB.
\[R=8(16)+7=135,\qquad G=12(16)+14=206,\qquad B=14(16)+11=235\]
Resultado: skyblue tem o valor HEX #87CEEB e o valor RGB rgb(135, 206, 235). Os seus valores HSL são aproximadamente 197° de matiz, 71% de saturação e 73% de luminosidade.
Como usar o Conversor de Cores
- Introduza uma cor no campo Cor. Pode começar com a predefinição
skyblue, escrever um nome de cor CSS comored, ou introduzir um código como#f00ourgb(255,0,0). - Verifique o resultado Cor para obter uma pré-visualização visual da entrada interpretada.
- Copie o formato de que necessita em Nome, RGB, HEX, HSL, HWB, CMYK ou NCol.
Se Nome indicar “sem nome”, a cor não tem um nome correspondente na lista de cores nomeadas do conversor. Os resultados numéricos ainda podem representar uma cor válida.
O que significam os formatos de cor
Uma cor digital pode ser descrita de várias formas sem alterar o seu aspecto. O HEX escreve o vermelho, o verde e o azul como pares de dígitos hexadecimais: #87CEEB significa vermelho 87, verde CE e azul EB na base 16. O RGB expressa esses mesmos canais como números decimais de 0 a 255. Se quiser resolver separadamente a aritmética na base 16, use o Conversor Hexadecimal; ele converte números, não valores completos de cor CSS.
O HSL descreve o matiz, a saturação e a luminosidade. O matiz é uma posição numa roda de cores, normalmente expressa em graus; a saturação descreve a intensidade da cor, e a luminosidade vai do preto para o branco. O HWB usa, em vez disso, matiz, brancura e negrura. Estes formatos podem ser mais fáceis de ler quando se comparam tons ou se ajusta uma cor a olho. O RGB e o HEX são muitas vezes mais práticos quando uma especificação exige valores exatos dos canais.
O CMYK fornece valores de ciano, magenta, amarelo e preto derivados da cor na tela. O NCol é uma notação baseado no matiz fornecido pelo conversor; não é tão comum em CSS como o HEX, o RGB ou o HSL. O formato de saída altera a forma como uma cor é escrita, não a cor subjacente escolhida. Pequenas diferenças nas percentagens apresentadas podem resultar de arredondamentos.
Limitações práticas e dicas
O conversor necessita de uma entrada que o seu analisador de cores reconheça. Os nomes de cores CSS padrão e os códigos de cor comuns em estilo CSS são bons pontos de partida. Um código HEX de três dígitos é uma abreviatura: por exemplo, #f00 expande-se para #ff0000. Os códigos HEX não distinguem maiúsculas de minúsculas, pelo que #87ceeb e #87CEEB representam a mesma cor.
Algumas entradas incluem um valor alfa, que controla a transparência. Para entradas reconhecidas com alfa, os resultados RGB, HSL, HWB e NCol usam formas com alfa. Verifique cada resultado antes de o copiar para outra aplicação: nem todos os formatos listados descrevem a transparência da mesma forma. A pré-visualização também pode parecer diferente sobre um fundo diferente quando uma cor é parcialmente transparente.
O CMYK aqui é uma conversão matemática a partir de uma cor digital, não uma conversão de perfil de impressão. O aspeto impresso depende da impressora, das tintas, do papel e das definições de gestão de cor, por isso use um fluxo de trabalho de impressão adequado quando a exatidão da cor na produção é importante. Da mesma forma, o aspecto de uma cor na tela depende do monitor e das suas definições; a correspondência de valores numéricos por si só não pode garantir um aspecto idêntico em todos os dispositivos.
Se colocar uma cor HEX num parâmetro de consulta de URL, lembre-se de que # tem um significado especial nos URLs. Use o Codificador de URL para codificar o valor quando necessário.
Perguntas frequentes
Como converter RGB em HEX manualmente?
Converta cada canal RGB de decimal para dois dígitos hexadecimais e junte os três pares após um #. Divida o valor de um canal por 16: o quociente inteiro é o primeiro dígito, e o resto é o segundo. Por exemplo, 206 dá quociente 12 (C) e resto 14 (E), tornando-se CE. Um valor inferior a 16 precisa de um zero à esquerda, como 9, que se torna 09.
Como posso calcular HSL a partir de RGB?
Primeiro divida cada canal RGB por 255 e depois encontre o maior valor \(M\) e o menor valor \(m\). A luminosidade é \(L=(M+m)/2\). Se \(M=m\), a saturação é zero e o matiz não tem um valor significativo. Caso contrário, a saturação é \((M-m)/(1-|2L-1|)\); o matiz depende de qual canal é o maior. Por exemplo, o vermelho puro, rgb(255, 0, 0), é hsl(0, 100%, 50%).
Qual é uma boa taxa de contraste para cores de texto e fundo?
Para os objetivos comuns WCAG 2.2 AA, procure pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Os objetivos AAA são 7:1 e 4,5:1, respetivamente. Um conversor de cores por si só não lhe diz se um par cumpre esses objetivos: o contraste depende de ambas as cores. Verifique o primeiro plano e o fundo reais em conjunto, incluindo o fundo visível atrás de cores transparentes.
Porque é que uma cor cinzenta tem um valor de matiz?
O matiz é matematicamente indefinido quando uma cor não tem saturação, como acontece com valores RGB cujos três canais são iguais. Um conversor pode apresentar um matiz de preenchimento, frequentemente 0°, para manter a notação HSL ou HWB completa. Esse número não torna o cinzento avermelhado. À medida que a saturação se aproxima de zero, pequenas alterações nos canais também podem causar grandes alterações no matiz reportado sem muita alteração visível.
Um valor alfa altera os canais RGB da cor?
O alfa controla quanto de uma cor é mostrada sobre o seu fundo; por si só, não altera os canais RGB armazenados da cor. Um valor alfa de 0 é totalmente transparente, enquanto 1 é totalmente opaco. O resultado visível depende do fundo: para cada canal, o valor apresentado é aproximadamente \(\alpha\times\text{primeiro plano}+(1-\alpha)\times\text{fundo}\). Um vermelho transparente pode, portanto, parecer rosa sobre branco.
Porque é que uma cor pode mudar ligeiramente depois de convertida de ida e volta?
As conversões podem introduzir arredondamentos. Os canais RGB são normalmente armazenados como números inteiros de 0 a 255, enquanto o HSL e outros formatos podem mostrar graus ou percentagens arredondados. Reintroduzir esses resultados arredondados pode produzir valores RGB ligeiramente diferentes. Para preservar uma cor RGB exata através de edições ou cópias, mantenha o seu valor RGB ou HEX de seis dígitos original em vez de depender de resultados intermédios arredondados.