O que significam todos esses formatos de cor?

Uma cor na tela é uma mistura de luz vermelha, verde e azul, e cada formato representa essa mistura de uma maneira própria. CSS e ferramentas de design usam códigos HEX e valores RGB. HSL, HSV e HWB descrevem uma cor pela matiz — o ângulo no círculo cromático — e pelo quanto ela é vívida e clara, o que facilita ajustá-la manualmente. CMYK indica as quantidades de tinta ciano, magenta, amarela e preta usadas na impressão. LAB, LCH, OKLab e OKLCH foram criados para que intervalos iguais em seus valores pareçam intervalos iguais aos olhos, o que ajuda na criação de paletas e gradientes; o CSS moderno oferece suporte aos quatro. Terminais usam códigos de cor ANSI, e o CSS também tem cores nomeadas, como tomato.

Veja o mesmo laranja em cada formato:

Formato Exemplo O que os valores representam
HEX #ff6600 Vermelho, verde e azul, cada um com dois dígitos hexadecimais
RGB rgb(255, 102, 0) Vermelho, verde e azul, de 0 a 255
HSL hsl(24, 100%, 50%) Matiz, saturação e luminosidade
HSV hsv(24, 100%, 100%) Matiz, saturação e valor; também chamado de HSB
HWB hwb(24 0% 0%) Matiz, brancura e negrura
CMYK cmyk(0%, 60%, 100%, 0%) Tinta ciano, magenta, amarela e preta
LAB lab(62.31, 55, 71.33) Luminosidade CIE, verde a vermelho e azul a amarelo
LCH lch(62.31, 90.07, 52.36) Luminosidade CIE, croma e matiz
OKLab oklab(69.58% 0.1482 0.1406) Luminosidade e dois eixos de cor, em um modelo mais recente que LAB
OKLCH oklch(69.58% 0.2043 43.49) Luminosidade, croma e matiz em OKLab
XYZ xyz(46, 30.77, 3.52) O espaço de cor CIE 1931, no qual LAB se baseia
HCG hcg(24, 100%, 0%) Matiz, croma e nível de cinza
Nome da cor orangered A cor nomeada do CSS mais próxima
ANSI 16 91 Código de terminal de uma das 16 cores básicas
ANSI 256 208 Código de terminal de uma das 256 cores
RGB do AppleScript {65535, 26214, 0} Vermelho, verde e azul de 0 a 65535, conforme representados pelo AppleScript
Escala de cinza gray(46.7%) Brilho de 0% a 100%

Descrição da ferramenta

Esta ferramenta converte cores entre estes 17 formatos e as exibe em uma amostra abaixo do resultado. Todos os conversores de cores daqui funcionam da mesma maneira, desde o Conversor de cores geral até os conversores de um único par, como HEX para RGB, RGB para CMYK ou HEX para nome da cor: eles começam com os formatos indicados no nome, e os menus Origem e Destino permitem escolher qualquer outro. Cole uma cor e o resultado aparecerá enquanto você digita, pronto para ser copiado. Com a opção Detecção automática como origem — definida por padrão no Conversor de cores —, a ferramenta identifica o formato pela maneira como a cor está escrita. O botão de troca inverte a conversão.

Exemplos

Entrada Destino Resultado
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 Nome da cor tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

O que você pode colar

  • Códigos HEX com 3, 4, 6 ou 8 dígitos, com ou sem #. Um quarto dígito ou um par final define a opacidade.
  • Funções como rgb(), hsl() ou oklch(), com vírgulas ou espaços entre os valores e uma opacidade opcional como quarto valor ou após uma barra: rgba(37, 99, 235, 0.5) ou rgb(37 99 235 / 50%).
  • Porcentagens para vermelho, verde e azul, como em rgb(100%, 40%, 0%), e matizes em deg, rad, grad ou turn, como em hsl(0.5turn, 100%, 50%).
  • Números sem o nome de uma função, como 255, 102, 0. A detecção automática interpreta três números como RGB ou como HSL quando os dois últimos são porcentagens, e quatro como CMYK, a menos que pareçam valores RGB com opacidade.
  • Nomes de cores em qualquer combinação de maiúsculas e minúsculas, com ou sem espaços: Rebecca Purple funciona.
  • Valores HSB escritos como hsb() e cores do AppleScript entre chaves, como {65535, 26214, 0}.

Como funciona

Os cálculos são feitos pela color-convert, uma biblioteca JavaScript para conversão de cores.

  • A opacidade é mantida em HEX, RGB, HSL, HWB, OKLab e OKLCH, que podem representá-la. Os outros formatos a omitem.
  • LAB, LCH e XYZ usam valores CIE com o ponto branco D65. lab() e lch() do CSS usam o ponto branco D50, então os valores diferem um pouco.
  • LAB, LCH, OKLab e OKLCH podem descrever cores que as telas não conseguem exibir. Quando convertida para HEX, RGB ou outro formato para tela, uma cor desse tipo tem seus canais limitados ao intervalo de 0 a 255; por isso, oklch(70% 0.3 145) se torna #00c800.
  • O resultado de nome da cor é a cor nomeada do CSS mais próxima; portanto, só é exato para cores que têm um nome: #ff6600 resulta em orangered, que corresponde a #ff4500.
  • Os resultados ANSI 16 e ANSI 256 são aproximados, pois essas paletas têm apenas 16 ou 256 cores. Os resultados ANSI 16 são códigos de primeiro plano, de 30 a 37 e de 90 a 97; os códigos de plano de fundo, de 40 a 47 e de 100 a 107, são interpretados como as mesmas cores.
  • CMYK é calculado com a fórmula básica, sem um perfil de cor de impressora, então os valores CMYK de uma gráfica para a mesma cor podem ser diferentes.
  • A escala de cinza é a média dos valores de vermelho, verde e azul.

Dicas

  • Os resultados HEX, RGB, HSL, HWB, OKLab, OKLCH e de nome da cor são CSS válido; você pode colá-los diretamente em uma folha de estilos.
  • A detecção automática interpreta um número de três dígitos, como 208, como um código HEX curto; portanto, escolha ANSI 256 ou ANSI 16 como origem para códigos de terminal.
  • HSV e HSB são dois nomes para o mesmo modelo.