168の色空間

色空間

からまで、からまで、年から年まで。
CSS、シェーダー、WASM、色変換テーブル（LUT）に対応。

ディスプレイ・Web19

制作と配信のためのRGB色空間。Webの標準から、より広いディスプレイ色域まで。

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

RGBの派生9

RGBの上に組み立てた色相・彩度・明るさの操作系。等しいステップが等しく見えるとは限りません。

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

知覚的48

色の比較、パレット作り、見えの予測のための座標系。

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

測色・研究22

測定の基礎、眼のしくみ、研究用の専門的な座標系。

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

映像・放送20

放送、圧縮、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

映画・カメラ43

光を記録し、グレーディングするためのカメラのログ符号化と作業用色空間。

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

印刷・塗料7

インク、塗料、そして物体色を測定にもとづいて体系化したもの。

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

使う

色変換用のJavaScriptパッケージです。1つの色空間は1.5 kB未満で読み込めます。すべてを読み込めば、任意の色空間同士を変換できます。同じ変換をWASMで画像全体に適用したり、GLSLやWGSLのシェーダーで実行したりできます。LUTやICCプロファイルへの書き出しと、MCPサーバー経由でのエージェントからの呼び出しにも対応しています。

  • 参照値でテスト済みすべての色空間をテスト済み
  • 双方向どの色空間からどの色空間へも
  • 小さい1色空間あたり0.4〜1.5 kB
  • パブリックドメインCC0
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)
色空間とは何ですか？

色のための座標系です。軸と範囲、そして数値を測定可能な光に結びつける規則からなります。同じオレンジがrgb(255 128 0)、oklch(0.732 0.186 53)、XYZでは[49, 36.7, 4.5]と書けます。同じ色を3通りに書いたものです。パレットは選んだ数色の集まりですが、色空間はあらゆる色を書き表す方法です。

カラーモデルと色空間の違いは何ですか？

カラーモデルは、色を表す成分を定めます。RGBは3つの原色、HSLは色相・彩度・明度、CMYKは4色のインクです。色空間はさらに原色、白色点、符号化のカーブを定め、数値の組が測定可能な1つの色に対応するようにします。そのため、rgb(255 0 0)はsRGB、Display P3、Adobe RGBで異なる赤を表します。同じモデルでも、色空間は異なります。

一般にはどちらも色空間と呼ばれ、CSSのcolor-mix(in hsl, …)やこのカタログでも同じ呼び方をしています。独自の基準をもたないモデルは、既存の色空間を基に定義できます。ここでのHSLとHSVは、CSSと同じくsRGBを基にしています。

実際にはどの色空間を使えばよいですか？

用途によります。

  • 画像の保存と共有：sRGB（Webの標準）
  • パレットやグラデーションのデザイン：OKLCH（等しいステップが等しく見える）
  • 光の計算（ブレンド、ぼかし、3D）：リニアRGB
  • 映像の撮影とグレーディング：カメラのログ空間で撮り、Rec. 709かRec. 2100で納品
  • 2色の見た目の差の測定：CIELABまたはDIN99o

カタログを用途でグループ化すると、同じように分類されます。

HSLの代わりに何を使えばよいですか？

OKLCHです。色相・クロマ・明度という3つの操作はそのままに、明度が信頼できます。HSLではL=50の黄色はL=50の青の約13倍の光を発するので、Lが等しくても明るさは等しくありません。OKLCHでは等しくなります。CSSはoklch()をネイティブにサポートしています。

グラデーションの中間が濁るのはなぜですか？

ガンマ符号化されたsRGBで計算されるからです。そこで2色の数値を平均すると、実際に光を混ぜた場合より暗く濁った光になります。OKLabで補間すればこれを避けられます。各詳細ページのinterpolate行は、同じブレンドを2つの色空間で並べて描くので、選ぶ前に違いを確かめられます。

「色域外」とはどういう意味ですか？

ある色空間では表せても、別の色空間やお使いの画面では表示できない色のことです。鮮やかなDisplay P3の緑はsRGBにはそもそも存在しません。変換すると数値が有効範囲の外に出ます。アトラスはこれを見えるようにしています。現在の色の横のピルが、その色を収める最も狭い標準色域を示し、範囲外の部分は市松模様の上に薄く表示されます。

印刷が画面よりくすんで見えるのはなぜですか？

画面は光を発し、紙はインクが吸収しなかった光を反射します。紙の上のインクで出せる鮮やかな色は少なく、彩度の高いRGBの青・緑・赤はその外に出るため、くすんで印刷されます。製版では、印刷機と用紙に合わせて作られたICCプロファイル（欧州のコート紙ならFOGRA39、米国ならGRaCoLなど）を通して変換します。このカタログのCMYKは、CSSがプロファイルなしのdevice-cmyk()に使う素朴な式です。数値としては正しくても、印刷の校正にはなりません。

変換は正確ですか？往復でデータは失われますか？

変換はルックアップによる近似ではなく閉じた式で、往復変換しても浮動小数点の誤差の範囲で元に戻ります。わずかな例外は該当箇所に記載しています。OSA-UCSには閉じた逆変換がなく、Munsellのようなアトラス系は公表された等級のあいだを補間し、rgb出力はsRGB色域にクランプされます。色域外の値が必要なときはXYZかリニアRGBを経由してください。

検証もしています。どの色空間も実装元の論文や規格にリンクし、値は重なる範囲でcolorjs.ioと、カメラのログはAcademy公式のACES変換と照合しています。何を何と照合したかはformula-verification.mdに記録しています。公表された論文そのものに誤りがあった箇所も含めてです。

数値が他のライブラリと合わないときは、値の範囲を比べてください。多くのライブラリはすべてを0〜1に揃えますが、このライブラリは各色空間の慣例的な範囲（RGBは0〜255、Labの明度は0〜100、色相は0〜360）を保ちます。範囲はどのカードにも表示され、コードではspace.oklch.rangeです。

このうちCSSで書けるのはどれですか？

ネイティブに書けるのはrgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()、そしてDisplay P3、Adobe RGB、ProPhoto、リニアsRGB、XYZ（D65とD50）を表すcolor()です。CSSのrec2020は純粋な2.4ガンマで、このカタログのRec. 2020が使うBT.2020のカーブではありません。同じ数値でも別の色を指します。各詳細ページのcssタブは現在の色をコピーできる形で書き出します。CSSにない色空間は、代わりにICCプロファイルかLUTとして提供されます。

Pantone、NCS、RALはどこですか？

これらはライセンス製品です。色は公表された式ではなく、所有者が販売するデータで定義されています。実装できる公開の数式がなく、その表を再配布することも合法ではありません。数式が公開されている近い仲間は収録しています。Munsell（1943年の修正マンセルは公的記録です）とRAL Design（CIELABで直接定義）です。目安はこうです。数式が一度でも公表されたなら、このコレクションに含めます。

コピーしました