O que significam todos estes formatos de cor?

Uma cor exibida na tela é uma mistura de luz vermelha, verde e azul, e cada formato representa essa mistura à sua maneira. CSS e as 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 pela vivacidade e luminosidade, o que facilita os ajustes manuais. 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 aproximadamente iguais ao olho, o que ajuda na criação de paletas e gradientes; o CSS moderno oferece suporte aos quatro. Os terminais usam códigos de cor ANSI, e o CSS também tem cores com nome, como tomato.

Veja o mesmo tom de laranja em cada formato:

Formato Exemplo O que representam os valores
HEX #ff6600 Vermelho, verde e azul, com dois dígitos hexadecimais cada
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 HSB
HWB hwb(24 0% 0%) Matiz, brancura e escuridão
CMYK cmyk(0%, 60%, 100%, 0%) Tintas ciano, magenta, amarela e preta
LAB lab(62.31, 55, 71.33) Luminosidade CIE, do verde ao vermelho e do azul ao 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, como em 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 XYZ, no qual LAB se baseia
HCG hcg(24, 100%, 0%) Matiz, croma e nível de cinza
Nome da cor orangered A cor nomeada em 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 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 exibe uma amostra de cor abaixo do resultado. Todos os conversores de cores funcionam da mesma maneira, desde o Conversor de cores geral até os que convertem um único par, como HEX para RGB, RGB para CMYK ou HEX para nome da cor: eles começam nos formatos indicados no nome, e os menus Origem e Destino permitem selecionar quaisquer outros. Cole uma cor e o resultado aparecerá enquanto você digita, pronto para ser copiado. Com a Detecção automática como origem, que é a opção inicial do 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 #. O quarto dígito ou o último par 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 simples 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 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, formatos que permitem 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, por isso 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 de tela, os canais dessa cor são limitados ao intervalo de 0 a 255, então oklch(70% 0.3 145) se torna #00c800.
  • O resultado com nome da cor corresponde à cor nomeada em 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, e os códigos de plano de fundo, de 40 a 47 e de 100 a 107, são interpretados como as mesmas cores.
  • O CMYK é calculado pela fórmula básica, sem um perfil de cor de impressora; por isso, 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 nomes de cores são CSS válido, então 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; por isso, escolha ANSI 256 ou ANSI 16 como origem para códigos de terminal.
  • HSV e HSB são dois nomes para o mesmo modelo.