S
SoSimple.tools
Design e desenvolvimento

Conversor de cores

Converta códigos de cor entre HEX, RGB, HSL, HSV e CMYK. Ajuste qualquer canal e os outros formatos se atualizam na hora; o que você digita fica no seu navegador

Funciona no seu navegador: o que você informa fica no seu aparelho

Controles de cor

Seletor visual de cor
#
Canais RGB (0–255)
R
G
B
HSL (matiz, saturação, luminosidade)
H
°
S
%
L
%
Sempre sincronizado: mude qualquer controle, o código HEX ou o seletor e todos os outros formatos se atualizam na hora.
Text on Color (White) Text on Color (Black)
HEX #059669
RGB (CSS) rgb(5, 150, 105)
HSL (CSS) hsl(161, 94%, 30%)
HSV / HSB hsv(161, 97%, 59%)
CMYK cmyk(97%, 0%, 30%, 41%)
Luminância relativa (WCAG 2.1): 0,2286
Compartilhar esta ferramenta

Como usar esta ferramenta

  1. Escolha uma cor no seletor visual, digite um código HEX ou mova os controles RGB e HSL; todos os formatos se atualizam juntos.
  2. Use “Cor aleatória” para explorar ideias.
  3. Veja os valores HEX, RGB, HSL, HSV e CMYK, além da luminância relativa e do contraste com texto branco e preto.
  4. Clique em Copiar ao lado do formato que precisar para colar em CSS, software de design ou código.

Exemplo prático

O verde esmeralda #059669 corresponde a rgb(5, 150, 105), hsl(161, 94%, 30%), hsv(161, 97%, 59%) e cmyk(97%, 0%, 30%, 41%), com luminância relativa de 0,2286. O texto branco sobre ele tem contraste de 3,77:1 e o preto, 5,57:1. As WCAG pedem pelo menos 4,5:1 para texto normal e 3:1 para texto grande; portanto, o branco sobre esse verde só serve para títulos grandes, enquanto o preto passa em tudo. Os valores CMYK vêm de uma fórmula simples sem perfil ICC e não vão coincidir com uma prova gráfica.

Metodologia

Cada formato é calculado a partir de uma trinca sRGB de 8 bits. O sRGB é definido na norma IEC 61966-2-1; as notações HEX, RGB e HSL são as da especificação W3C CSS Color; a luminância relativa segue as WCAG 2.1. Todos os valores são arredondados para inteiros, então ir e voltar pode mover um valor em 1.

RGB, HEX e HSL: O HEX escreve os três canais em base 16: rgb(255, 128, 0) é #FF8000. Para o HSL, os canais são escalados de 0 a 1, depois L = (max + min) / 2, S = (max − min) / (1 − |2L − 1|), e o matiz é o ângulo do canal dominante em um círculo de 360 graus. A mesma cor resulta em hsl(30, 100%, 50%). O HSV compartilha o matiz, mas usa V = max e S = (max − min) / max. Formas curtas como #F80 são expandidas para #FF8800, e um HEX de 8 dígitos é aceito, mas seu par alfa é ignorado.
CMYK e luminância: O CMYK usa a fórmula simples e independente de dispositivo K = 1 − max(R, G, B), com C, M e Y escalados pelo restante; #FF8000 resulta em cmyk(0%, 50%, 100%, 0%). Não há perfil ICC, tinta nem papel envolvidos, então o resultado não corresponde a uma prova de gráfica. A luminância relativa lineariza cada canal (v / 12,92 abaixo de 0,03928, senão ((v + 0,055) / 1,055)^2,4) e os pondera por 0,2126, 0,7152 e 0,0722. Para #FF8000 isso dá 0,3670, ou seja, contraste de 2,52:1 com branco e 8,34:1 com preto. Um cinza médio como #808080 tem luminância 0,2159, não 0,5.

Sete cores clássicas e o contraste de cada uma com branco e preto

Sete cores conhecidas, convertidas com as fórmulas desta ferramenta. A última coluna mostra a razão de contraste do texto branco e do texto preto sobre cada cor.

CorHSLCMYK (%)Contraste branco / preto
#FF0000 Vermelho0, 100%, 50%0, 100, 100, 04,00:1 / 5,25:1
#0000FF Azul240, 100%, 50%100, 100, 0, 08,59:1 / 2,44:1
#FFFF00 Amarelo60, 100%, 50%0, 0, 100, 01,07:1 / 19,56:1
#808080 Cinza médio0, 0%, 50%0, 0, 0, 503,95:1 / 5,32:1
#008080 Verde-azulado180, 100%, 25%100, 0, 0, 504,77:1 / 4,40:1
#800080 Roxo300, 100%, 25%0, 100, 0, 509,42:1 / 2,23:1
#000080 Azul-marinho240, 100%, 25%100, 100, 0, 5016,01:1 / 1,31:1

Como ler: a WCAG 2.1 pede 4,5:1 para texto normal no nível AA. O amarelo é o caso extremo, com 1,07:1 para texto branco e 19,56:1 para preto. O cinza médio #808080 surpreende muita gente: ele fica bem no meio da faixa de 0 a 255, mas nem o branco (3,95:1) nem o preto (5,32:1) ficam equilibrados, porque o brilho percebido não é linear. O verde-azulado e o cinza médio são casos no limite, então confira sempre a combinação exata que você vai usar.

Limites: os valores são arredondados para números inteiros e o CMYK vem de uma fórmula simples, sem perfil ICC, então não vai bater com uma prova impressa.

Ferramentas relacionadas

Perguntas frequentes

Qual a diferença entre RGB e HSL no CSS? ▼

Os dois descrevem as mesmas cores sRGB. O RGB mistura luz vermelha, verde e azul, que é como as telas funcionam. O HSL descreve a cor por matiz (um ângulo no círculo cromático), saturação e luminosidade, então clarear ou dessaturar é mudar um só número. Exemplo: hsl(30, 100%, 50%) e rgb(255, 128, 0) são o mesmo laranja, mas uma versão mais escura é simplesmente hsl(30, 100%, 35%).

Dá para converter CMYK em RGB com exatidão? ▼

Não. O RGB é luz aditiva na tela, o CMYK é tinta subtrativa no papel, e a faixa imprimível depende das tintas, do papel e da impressora. O CMYK mostrado aqui vem de uma fórmula matemática simples, sem perfil de cor; use como ponto de partida e confirme as cores com o perfil ICC da sua gráfica ou com uma prova.

Como a luminância relativa é calculada e para que serve? ▼

Cada canal sRGB é linearizado (remove-se a curva gama) e combinado em L = 0,2126 R + 0,7152 G + 0,0722 B, a fórmula das WCAG 2.1. Os pesos refletem que o olho é mais sensível ao verde. A razão de contraste é então (L1 + 0,05) / (L2 + 0,05), com L1 sendo a cor mais clara. No nível AA, as WCAG pedem 4,5:1 para texto normal e 3:1 para texto grande.

Por que meu valor mudou em 1 ao converter de volta? ▼

HSL, HSV e CMYK são exibidos como números inteiros, e várias cores RGB resultam no mesmo HSL arredondado. Se você edita os campos HSL, a ferramenta mantém seus valores HSL e deriva o RGB; se depois edita o RGB, o HSL é recalculado e pode diferir um pouco. O matiz é indefinido para cinzas e aparece como 0. Para valores exatos, mantenha o código HEX ou RGB como fonte.