color-space について
color-spaceは、出典に基づいて検証された変換式と標準的な範囲を備える、221種の色空間を扱うJavaScriptライブラリーです。WASM、シェーダー、LUT、ICC、OCIOへの出力に加え、CLIとエージェント向けMCPツールも提供します。
主な機能
- 01221種の色空間間の変換
- 02単独の色空間と軽量セット
- 03JavaScript、WASM、シェーダー対応
- 04LUT、ICC、OCIOデータの生成
- 05CSS解析と色彩ユーティリティ
- 06CLIとMCPツールの提供
活用シーン
- 01色空間間で値を変換
- 02グラフィックスシェーダー用の変換コードを生成
- 03映像ソフト向けのLUTやICCプロファイルを出力
- 04エージェントから変換や色域情報を参照
MCP 対応
MCPサーバーはconvert、gamut、css、space、shader、icc、codeなどのツールをクライアントに公開します。コマンドまたはStreamable HTTPで実行できます。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
ツール
9掲載時のツール一覧 · 1 週間前に更新
| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| to | string | はい | 変換先の空間 ID。例:'rgb'、'oklch'、'lab'、'slog3'、'rec709'('spaces' ツールに全 205 種が表示されます) |
| from | string | いいえ | 変換元の空間 ID。例:'rgb'、'oklch'、'lab'、'slog3'、'rec709'('spaces' ツールに全 205 種が表示されます) |
| color | string | いいえ | `from` + `values` の代わりに CSS カラーを指定します:'#ff8000'、'rebeccapurple'、'oklch(0.7 0.1 50)'、'lab(54% 80 67)'、'color(display-p3 1 0.5 0)' |
| colors | array | いいえ | 複数色を指定します。色ごとに 1 つのタプル(`from` で指定)または CSS 文字列を指定します。例:[[255, 128, 0], '#00ff80', 'oklch(0.7 0.1 50)'] |
| values | array | いいえ | 変換元の空間における 1 色。例:rgb の場合は [255, 128, 0] |
詳細
color-space

色空間のオープンなコレクションです。
- 引用元の資料に照らして検証済みの数式
- 一般的な値域
- JS、TypeScript 型、WASM、GLSL、LUT、ICC、OCIO
使い方
import space from 'color-space';
space.rgb.oklch(255, 128, 0); // → [0.732, 0.186, 53] — modern CSS
space.slog3.rec2020(0.5, 0.5, 0.5); // camera log → UHD wide gamut
space.rgb.xyz(300, -10, 0); // → [59.7, 30.6, 2.8] — out-of-range in, unclamped out
// batch
space.rgb.oklch([255, 128, 0, 0, 255, 128]); // [0.732, 0.186, 53, 0.875, 0.234, 151]
// meta
space.lab.range; // [[0, 100], [-125, 125], [-125, 125]]
個別の色空間:
import oklch from 'color-space/oklch.js';
oklch.rgb(0.65, 0.25, 180); // matches CSS oklch(0.65 0.25 180)
インポート
color-space– 相互接続された全221の色空間 · gzip圧縮時70 kBcolor-space/<name>.js– 単独で使える色空間1つcolor-space/lite– 54色空間の実用セット · gzip圧縮時29 kBcolor-space/wasm– liteセットのWASM版 ·.wasmファイルを同梱color-space/gl– GLSL/WGSLシェーダーソースcolor-space/gl/hlsl·color-space/gl/msl– nagaがWGSLから生成するHLSL(DirectX、Unity、Unreal)およびMetal ·await hlsl('rgb', 'oklch')· オプションのピア依存関係naga-wasmが必要です(Node ≥ 24.12を宣言しています。CIでは22で実行しており、その場合npmは警告のみを表示します)color-space/lut– Resolve、Premiere、OBS、ffmpeg用の.cubeLUT — ACESと照合して検証済みcolor-space/icc– マトリックス+TRCまたはCLUTプロファイルcolor-space/ocio– Blender、Nuke、Resolve、Houdini用のOpenColorIO色空間:colorspace(space.sgamut3cine)、ネイティブ変換によるカーブとマトリックス、55色空間をそれぞれライブラリと照合し、1e-6まで検証済みcolor-space/util– CSSカラーのparse·format、mix、gamut、visible、deltaE、contrast(WCAG)、cvd(色覚シミュレーション) ·deltaE('rgb', [255, 0, 0], [250, 0, 0])color-space/data.json– チャンネル、値域、由来、参考資料、グラフ、色域color-space/conformance.json– 引用元付きの参照変換。あらゆるカラーライブラリのテストに使用できますnpx color-space rgb oklch 255 128 0– インストール不要のCLI:convert(デフォルト) ·cube·icc·space·spaces·mcp(エージェント用MCPサーバー)
エージェント
MCPツール – convert · gamut · css · space · spaces · cube · shader · icc · code – エージェントが推測に頼らず、検証済みの計算を呼び出せます。色は任意のCSS文字列('#ff8000'、'oklch(0.7 0.1 50)'、'rebeccapurple')またはチャンネル値として入力できます。shaderは変換をGLSL、WGSL、HLSL、またはMSLで出力し、codeはJSの呼び出しと、検証済みの色彩科学上の対応式を返します。
claude mcp add color-space -- npx -y color-space mcp # Claude Code
code --add-mcp '{"name":"color-space","command":"npx","args":["-y","color-space","mcp"]}' # VS Code
Claude Desktopのclaude_desktop_config.json、または任意のプロジェクトの.mcp.json:
{ "mcpServers": { "color-space": { "command": "npx", "args": ["-y", "color-space", "mcp"] } } }
Claude Codeプラグイン(サーバーとスキル):/plugin marketplace add colorjs/color-spaceを実行し、続けて/plugin install color-space@color-spaceを実行します。Dockerの場合:docker build -t color-space-mcp .を実行し、docker run -i --rm color-space-mcpで起動します。
HTTP経由(ステートレスなStreamable HTTP):localhostでnpx -y color-space mcp --http 8787を実行するか、Worker、Deno、またはBunでcolor-space/mcp.jsからfetchをホストします。スキルを読み込むエージェント向けのスキル:plugins/claude/skills/color-space。
色空間
|
**ディスプレイとウェブ** [sRGB](https://color-space.io/rgb) · [Display P3](https://color-space.io/p3) · [Rec. 2020](https://color-space.io/rec2020) · [Linear-light sRGB](https://color-space.io/lrgb) · [Rec. 709](https://color-space.io/rec709) · [Rec. 709 display](https://color-space.io/rec709-display) · [sRGB 2.2 display](https://color-space.io/rgb-display) · [ProPhoto RGB](https://color-space.io/prophoto) · [Adobe RGB (1998)](https://color-space.io/a98rgb) · [DCI-P3](https://color-space.io/dci-p3) · [Linear Display P3](https://color-space.io/p3-linear) · [Linear Rec. 2020](https://color-space.io/rec2020-linear) · [Rec. 2020 display](https://color-space.io/rec2020-display) · [Linear Adobe RGB (1998)](https://color-space.io/a98rgb-linear) · [Linear ProPhoto RGB](https://color-space.io/prophoto-linear) · [scRGB](https://color-space.io/scrgb) · [RIMM RGB](https://color-space.io/rimm) · [CIE RGB](https://color-space.io/cie-rgb) · [NTSC RGB (1953)](https://color-space.io/ntsc) · [PAL / SECAM RGB](https://color-space.io/pal) · [Apple RGB](https://color-space.io/apple-rgb) · [SMPTE-240M](https://color-space.io/smpte-240m) · [ECI RGB v2](https://color-space.io/ecirgb) · [Adobe Wide Gamut RGB](https://color-space.io/widegamut) · [ColorMatch RGB](https://color-space.io/colormatch) · [Bruce RGB](https://color-space.io/brucergb) · [Beta RGB](https://color-space.io/betargb) · [Best RGB](https://color-space.io/bestrgb) · [Don RGB 4](https://color-space.io/donrgb4) · [Ekta Space PS 5](https://color-space.io/ektaspace) · [Russell RGB](https://color-space.io/russellrgb) · [Prismatic](https://color-space.io/prismatic) 円筒座標系 Colorimetry & research |
Video カメラ 印刷 |
開発の動機
色空間を網羅したコレクションです。最小限の API を通じて、出典と照合してテストした数式を提供します。デジタル色空間に焦点を当てる他のプロジェクトとは異なり、歴史的・学際的な色空間も含む、より広い視点を取り入れています。その副次的な成果として、論文の正誤表、色彩教育、JS→WASM コンパイラー(porffor、jz)向けのテストケースがあります。
これは色彩ツールボックスではありません。色域マッピング、パレット、アルファは対象外です。アトラス自体が使用する数少ないツール(解析、混合、ΔE、コントラスト、色覚シミュレーション)は color-space/util にあります。Pantone、NCS、RAL Classic など、ライセンスが必要な色見本カタログもオープンではないため、対象外です。
貢献
値が間違っている、またはスペースが不足している場合は、その定義元のドキュメントを添えてIssueを作成してください。スペースの追加方法と検証方法については、CONTRIBUTING.mdをご覧ください。
クレジット
このプロジェクトの実現に協力してくださった研究者、理論家、仕様策定者、実装者、およびライブラリに感謝します。
| ライブラリ | 色空間 | 範囲 | カメラログ · CAM · 歴史的 | バックエンド |
|---|---|---|---|---|
| color-space | 221 | 標準 | ✅ | JS · WASM · GLSL/WGSL · LUT · ICC |
| color-space/lite | 54 | 標準 | ログ · HDR · CAM16 | JS · 29 kB gzip |
| color-space/wasm | 54 | 標準 | ログ · HDR · CAM16 | WASM |
| culori | 30 | 0–1 | ❌ | JS |
| colorjs.io | 51 | 0–1 | 一部 | JS |
| texel/color | ~16 | 0–1 | ❌ | JS |
| chroma-js | 11 | 混在 | ❌ | JS |
| d3-color | 6 | 混在 | ❌ | JS |
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。