168 espaços

Espaços de cor

Da à , dos à , a .
Suporte a CSS, shaders, WASM e tabelas de conversão de cores (LUTs).

Display e web19

Espaços RGB de trabalho e entrega, do padrão da web a gamuts de tela mais amplos.

HP & Microsoft, 1996
Apple, 2015
ITU-R, 2012
HP & Microsoft, 1996
ITU-R, 1990
Kodak, 1999
Adobe Systems, 1998
DCI, 2005
Apple, 2015
ITU-R, 2012
Adobe Systems, 1998
Kodak, 1999
IEC, 2003
Kodak, 2000
CIE, 1931
FCC, 1953–87
Walter Bruch / Telefunken, 1967
Apple Computer, 1987–96
SMPTE, 1988–90

Variações de RGB9

Controles de matiz, saturação e brilho construídos sobre o RGB. Passos iguais não precisam parecer iguais.

Joblove & Greenberg, 1978
Alvy Ray Smith, 1978
Alvy Ray Smith, 1996
John R. Kender, 1976
community convention, 2011
Ian Taylor, 2012
Darel Rex Finley, 2006
Kuzma Shapran, 2012
Bianconi et al., 2009

Perceptuais48

Coordenadas para comparar cores, criar paletas e prever a aparência.

Björn Ottosson, 2020
CIE, 1976
Li et al., 2017
Björn Ottosson, 2020
Google, 2021
Björn Ottosson, 2021
Björn Ottosson, 2021
Björn Ottosson, 2021
Björn Ottosson, 2021
Björn Ottosson, 2021
Jan Behrens, 2009
Konovalenko et al., 2021
Li & Luo, 2024
Hensley & Fairchild, 2020
Safdar et al., 2017
Safdar et al., 2017
Fritz Ebner & Mark Fairchild, 1998
Safdar et al., 2017
Mark Fairchild & Garrett Wyble, 2010
CIE, 1976
CIE, 1976
Alexei Boronine, 2012
CIE, 1976
CIE, 1976
CIE, 1976
Alexei Boronine, 2012
DIN, 2018
DIN, 2018
Cui et al., 2002
Richard S. Hunter, 1948
David MacAdam / CIE, 1960–76
Günther Wyszecki / CIE, 1964–76
Elliot Q. Adams, 1942–76
Mark Fairchild & Garrett Wyble, 2010–16
CIE, 2002–17
Li et al., 2017
Safdar et al., 2021
Luo et al., 2006–17
Li et al., 2017
Li et al., 2017
Luo et al., 2006–17
Luo et al., 2006–17
Luke Hellwig & Mark Fairchild, 2022
Mark Fairchild, 1996
Luo et al., 1996
Yoshinobu Nayatani, 1995
Robert W. G. Hunt, 1994
Sherman Lee Guth, 1995

Colorimetria e pesquisa22

Os fundamentos da medição, o olho e coordenadas especializadas de pesquisa.

CIE, 1931
CIE, 1931
Estévez et al., 1979
ICC, 1994
CIE, 1976
Yoshi Ohno / ANSI, 2014
Raymond Davis; CIE, 1931
James Clerk Maxwell, 1860
CIE, 1931
ITU-R, 2016
Donald MacLeod & Robert Boynton, 1979
Derrington et al., 1984
CIE, 1931
Hermann von Helmholtz, 1860
James Clerk Maxwell, 1860
Richard Kirk, 2019
Jyrki Alakuijala et al., 2019
OSA committee, 1974
Terrillon & Akamatsu, 2000
Xerox, 1989
Ohta et al., 1980
Ruderman et al., 1998

Vídeo e transmissão20

Separam o brilho da cor para transmissão, compressão e entrega em HDR.

ITU-R, 1990
Dolby, 2016
ITU-R, 2012
ITU-R, 1982
ITU-R, 1982
ITU-R, 1982
Walter Bruch / Telefunken, 1967
NTSC, 1953–82
ITU-R, 1982
Malvar & Sullivan, 2003
Eric Hamilton / C-Cube Microsystems, 1992
Henri de France, 1967
ITU-R, 2012
Sony / IEC, 2006
SMPTE, 1987
Kodak, 1992
Dolby / ITU-R, 2016
BBC & NHK / ITU-R, 2016
ITU-R, 2016
Julian Fröhlich, 2017

Cinema e câmera43

Codificações log de câmera e espaços de trabalho para capturar a luz e fazer a correção de cor.

Academy, 2014
ARRI, 2010–22
Academy, 2014
Sony, 2014
Sony, 2014
Academy, 2012
Academy, 2016
ARRI, 2022
Kodak, 1992
Blackmagic Design, 2020
Sony, 2012–14
Panasonic, 2014
RED Digital Cinema, 2017
Canon, 2011–15
Canon, 2015
Canon, 2016
Fujifilm, 2016
Fujifilm, 2022
Fujifilm, 2024
Nikon, 2018
Apple, 2023
Apple, 2025
Blackmagic Design, 2020
DJI, 2017
FilmLight, 2013
Kinefinity, 2025
SMPTE/DCI, 2006
Sony, 2008–12
Academy, 2013
Kodak, 2000
Leica, 2020
GoPro, 2012
GoPro, 2026
Insta360, 2026
Xiaomi, 2024
OPPO, 2025
Samsung, 2025
RED Digital Cinema, 2007–08
RED Digital Cinema, 2008–17
RED Digital Cinema, 2016–17
Panavision / Sony, 2005
Thomson Grass Valley, 2002
FiLMiC Inc., 2017

Impressão e pintura7

Tinta, pintura e a organização medida das cores de superfície.

Eagle Printing Ink Co., 1906
Albert H. Munsell, 1905
Johannes Itten, 1961
Louis Ducos du Hauron, 1868–1906
RAL gGmbH, 1993
Antal Nemcsics, 1980
Wilhelm Ostwald, 1917

Use

Um pacote JavaScript para converter cores. Importe um espaço com menos de 1,5 kB ou todos para converter entre qualquer par de espaços. As mesmas conversões processam imagens inteiras com WASM, são executadas em shaders GLSL ou WGSL e podem ser exportadas como tabelas LUT ou perfis ICC. Agentes podem chamá-las pelo servidor MCP.

  • Testado contra referênciastestes para cada espaço
  • Nos dois sentidosde qualquer espaço para qualquer outro
  • Minúsculo0,4–1,5 kB por espaço
  • Domínio públicoCC0
import space from 'color-space'

space.rgb.oklch(255, 128, 0)      // → [0.732, 0.186, 53]
space.oklch.rgb(0.65, 0.25, 180)  // any of 168 × 167 pairs

space.oklch.name    // 'oklch'
space.oklch.range   // [[0,1], [0,0.4], [0,360]]

// one space only – tree-shaken, 0.4-1.5 kB
import oklch from 'color-space/oklch.js'
oklch.rgb(0.65, 0.25, 180)
O que é um espaço de cor?

Um sistema de coordenadas para a cor: eixos, faixas e uma regra que liga os números à luz mensurável. O mesmo laranja é rgb(255 128 0), oklch(0.732 0.186 53) e, em XYZ, [49, 36.7, 4.5] – a mesma cor, escrita de três maneiras. Uma paleta é um punhado de cores escolhidas; um espaço é uma maneira de anotar qualquer cor.

Modelo de cor ou espaço de cor: qual é a diferença?

Um modelo de cor define os componentes usados para descrever uma cor: três primárias no RGB, matiz, saturação e claridade no HSL, quatro tintas no CMYK. Um espaço de cor especifica as primárias, o ponto branco e a curva de codificação, para que cada conjunto de valores corresponda a uma cor mensurável. Por isso, rgb(255 0 0) representa vermelhos diferentes em sRGB, Display P3 e Adobe RGB: um modelo, três espaços.

No uso comum, ambos são chamados de espaços, inclusive no color-mix(in hsl, …) do CSS e neste catálogo. Um modelo pode usar um espaço já definido como referência: aqui, HSL e HSV são baseados no sRGB, como no CSS.

Qual espaço eu devo usar, afinal?

Depende da tarefa:

  • armazenar e compartilhar imagens – sRGB, o padrão da web;
  • criar paletas e gradientes – OKLCH, em que passos iguais parecem iguais;
  • matemática com luz (mesclagem, desfoque, 3D) – RGB em luz linear;
  • gravar vídeo e fazer a correção de cor – o espaço log da sua câmera, entregue em Rec. 709 ou Rec. 2100;
  • medir quão diferentes duas cores parecem – CIELAB ou DIN99o.

Agrupar o catálogo por finalidade o organiza da mesma forma.

O que devo usar no lugar do HSL?

OKLCH. Ele mantém os mesmos três controles – matiz, croma, claridade –, mas sua claridade é confiável: no HSL, o amarelo em L=50 emite cerca de 13 vezes a luz do azul em L=50, então L igual não significa brilho igual. No OKLCH, significa. O CSS suporta oklch() nativamente.

Por que meus gradientes ficam sujos no meio?

Porque são calculados em sRGB codificado com gama, onde tirar a média dos números de duas cores produz uma luz mais escura e mais apagada do que misturar de fato a sua luz produziria. Interpolar no OKLab evita isso. A linha interpolar de cada dossiê desenha a mesma mistura através de dois espaços lado a lado, para que você veja a diferença antes de escolher.

O que significa “fora do gamut”?

Uma cor que um espaço consegue descrever, mas outro – ou a sua tela – não consegue mostrar. Um verde vívido do Display P3 simplesmente não existe no sRGB: converta-o, e os números caem fora da faixa válida. O atlas deixa isso à vista: a etiqueta ao lado da cor atual indica o gamut padrão mais estreito que a contém, e os trechos fora da faixa aparecem esmaecidos sobre um quadriculado.

Por que a impressão parece mais apagada que a tela?

Uma tela emite luz; o papel reflete o que suas tintas não absorvem. Tinta no papel alcança menos cores vivas – azuis, verdes e vermelhos RGB saturados ficam fora do seu gamut – e por isso saem mais apagados. A pré-impressão converte por um perfil ICC feito para a impressora e o papel, como o FOGRA39 para papel couché europeu ou o GRACoL nos EUA. O CMYK deste catálogo é a fórmula simples que o CSS usa para device-cmyk() sem perfil: certa para os números, não uma prova da impressão.

As conversões são exatas? As idas e voltas perdem dados?

As conversões são fórmulas fechadas, não aproximações por tabela, e as idas e voltas retornam dentro do ruído de ponto flutuante. As poucas exceções estão documentadas onde ocorrem: o OSA-UCS não tem inversa fechada, sistemas de atlas como o Munsell interpolam entre graus publicados, e a saída rgb é limitada ao gamut sRGB – passe pelo XYZ ou pelo RGB linear quando precisar de valores fora dele.

E são verificadas: cada espaço aponta o artigo ou a especificação que implementa, os valores são testados contra colorjs.io onde os dois se sobrepõem, e os logs de câmera contra as transformações ACES oficiais da Academia. formula-verification.md registra o que foi conferido contra o quê – inclusive alguns pontos em que os próprios artigos publicados tinham erros.

Se os números diferem dos de outra biblioteca, compare as faixas: esta mantém as faixas convencionais de cada espaço – RGB 0–255, claridade Lab 0–100, matiz 0–360 – enquanto muitas achatam tudo para 0–1. Cada cartão mostra suas faixas; no código elas são space.oklch.range.

Quais destes o CSS consegue escrever?

Nativamente rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), além de color() para Display P3, Adobe RGB, ProPhoto, sRGB linear e XYZ (D65 e D50). O rec2020 do CSS é uma curva gama 2.4 pura, não a curva BT.2020 do Rec. 2020 deste catálogo – os mesmos números nomeariam uma cor diferente. A aba css de cada dossiê escreve a cor atual em forma copiável; os espaços que o CSS não tem são oferecidos como perfis ICC ou LUTs.

Onde estão Pantone, NCS, RAL?

São produtos licenciados: suas cores são definidas por dados que os proprietários vendem, não por fórmulas publicadas – então não há matemática aberta para implementar, e redistribuir suas tabelas não seria legal. Parentes próximos cuja matemática é pública estão aqui: Munsell (sua renotação de 1943 é de registro público) e RAL Design (definido diretamente em CIELAB). A regra prática: se a matemática foi publicada algum dia, ela pertence à coleção.

Copiado