205の色空間

色空間

Webから印刷まで、カラーピッカーから研究まで、1860年から2026年まで。CSS、シェーダー、WASM、色変換テーブル（LUT）に対応。

使い方

1つのJavaScriptパッケージです。同じ変換をWASMで画像全体に適用したり、GLSLやWGSLのシェーダーで実行したりでき、LUTやICCプロファイルとして書き出すこともできます。

参照値でテスト済みすべての色空間をテスト済み
双方向どの色空間からどの色空間へも
小さい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 205 × 204 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)

// values in the notations CSS already speaks – straight from the library
color: oklch(0.732 0.186 53);            // space.rgb.oklch(255, 128, 0)
color: color(display-p3 0.936 0.529 0.199);  // space.rgb.p3(255, 128, 0)
color: color(xyz-d65 0.49 0.367 0.045);      // space.rgb.xyz(…) / 100 – exact interchange

// spaces CSS lacks ship as ICC profiles or LUTs – see those tabs;
// every dossier's css tab writes the current color in copyable forms

// per-space metadata – sourced, ships as data.json
import data from 'color-space/data.json' with { type: 'json' }

const m = data.spaces.oklch
m.channels   // [{symbol, min, max, name}, …]
m.refs       // defining spec / paper links
m.year, m.by // 2020, 'Björn Ottosson'

// scalar or whole-buffer, zero-copy – a true WASM kernel
import space, { alloc } from 'color-space/wasm'

space.oklch.rgb(0.72, 0.16, 41)   // → [246, 125, 79]

const buf = alloc(n)              // n×3 Float64Array
space.rgb.oklch(buf)              // in place – 27 spaces

// every pair as a GLSL shader chunk
import { glsl } from 'color-space/gl'
import oklch from 'color-space/gl/oklch'

const src = glsl(oklch, 'rgb')
// → self-contained: vec3 oklch_rgb(vec3 c)
//   paste into any fragment shader, no uniforms

// an MCP server – convert · gamut · css · space · spaces · cube –
// so an agent calls verified conversions instead of guessing them
npx -y color-space mcp

// Claude Code
claude mcp add color-space -- npx -y color-space mcp
// VS Code
code --add-mcp '{"name":"color-space","command":"npx","args":["-y","color-space","mcp"]}'
// Claude Desktop · Cursor · .mcp.json
{ "mcpServers": { "color-space": { "command": "npx", "args": ["-y", "color-space", "mcp"] } } }

// Figmaプラグイン：選択範囲の塗りと線を205のどの色空間でも –
// チャンネルごとに平面とバー、ファイルの色域でクリップ。色はCSSとしてコピー
figma.com/community/plugin/1691970922817908383/color-space

git clone https://github.com/colorjs/color-space

// Figmaデスクトップ版：右クリック › Plugins › Development › Import plugin from manifest…
color-space/plugins/figma/manifest.json

// 何を読み、書き、保持するか：plugins/figma

色空間とは何ですか？

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

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

カラーモデルは、色を表す成分を定めます。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()をネイティブにサポートしています。

hexをOKLCHに変換するには？

上部の色フィールドに、たとえば#ff8000と入力するか貼り付けます。ページ上のすべての色空間がその色を一度に表示します。OKLCHでは0.732、0.186、53で、CSSではoklch(0.732 0.186 53)と書きます。各詳細ページのcssタブでコピーできる形が得られ、コードではspace.rgb.oklch(255, 128, 0)です。

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

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

S-Log3などのカメラのログをRec. 709に変換するには？

お使いのカメラのログ空間（S-Log3、LogC4、Apple Logなど）を開きます。その変換LUTブロックでRec. 709と編集ソフト（DaVinci Resolve、Premiere Pro、Final Cut Pro、OBS、ffmpegなど）を選ぶと、ブラウザが.cubeファイルを書き出します。トーンマッピングを行わない技術的な変換なので、拡散白より明るいハイライトはクリップし、ルックはご自身で加えることになります。

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

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

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

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

写真はどの色空間で書き出すべきですか？

Webや共有にはsRGBを使います。ファイルにプロファイルがなければ、ブラウザやスマートフォンはsRGBとみなすからです。Display P3は、プロファイルを埋め込んだままにしておけば、Appleや多くのAndroidの画面で鮮やかな景色をより多く残せます。プリントラボから求められたらAdobe RGBで渡します。ProPhoto RGBは16ビットでの編集用です。色域が非常に広いため、8ビットのファイルではバンディングが起きます。

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

変換はルックアップによる近似ではなく閉じた式で、往復変換しても浮動小数点の誤差の範囲で元に戻ります。わずかな例外は該当箇所に記載しています。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として提供されます。

色覚異常のある人には、色はどう見えますか？

表示を開き、色覚で1型（赤）、2型（緑）、3型（青）のいずれかを選びます。その目に見えるとおりにカタログが再描画されるので、パレットの色どうしが見分けられるかを確かめられます。NEIの集計では、男性の約12人に1人が色覚異常です。

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

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