color-expert

カラーエキスパート

色に関する作業のための包括的なナレッジベースです。180 以上のリファレンスファイルを 1 行ずつ紹介する一覧については、references/INDEX.md をご覧ください。このスキルファイルには、ほとんどの質問に直接答えるための基本知識がまとめられています。

このスキルの使い方

ユーザーの明示的な依頼と、文脈から明確に読み取れる制約に応じて回答してください。よくある 5 つのモードを紹介します。

具体的なデザインまたはアートプロジェクト — 「ロゴ／ポスター／イラスト／アプリに使う色を選びたい」といった依頼です。媒体（印刷、画面、絵の具、複合）、ブランドや雰囲気、対象者、アクセシビリティの要件、調和させる既存色があるかを確認してから提案してください。求められていない限り、CIE 1931 や OKLCH の内部的な仕組みを長々と説明しないでください。一般論ではなく、制約に合った具体的なツールやパレットをおすすめしてください。

デザインシステム、色階調、テーマトークン — 「9 段階のアクセントスケールを作って」「ライトモードとダークモードのパレットがほしい」「Tailwind／Radix 風の色階調がほしい」「ブランドに合うグレーの色階調は？」といった依頼です。次の順で優先してください。

• OKLCH を使って、知覚的に均一なスケール（色相をまたいで一貫した明度を保ち、中間調が濁らないスケール）を作成します。
• トークングラフを構築します。参照トークン（パレット）→ セマンティックトークン（surface、on-surface、accent、success、warning、danger）→ コンポーネントでの使用、という構成です。詳しくは以下の実装ガイダンスをご覧ください。
• ライトモードとダークモードの両方で、すべてのテキスト／背景の組み合わせを APCA または WCAG に照らして検証します。
• 必要に応じてツールを提案します。Huetone（LCH／OKLCH ビルダー）、Leonardo（コントラスト比に基づく色階調＋アダプティブテーマ設定、Adobe）、Components.ai Color Scale（パラメトリック）、dittoTones（Tailwind／Radix から知覚的な特徴を抽出）、Color Buddy（リンター）などです。データ可視化用のシーケンシャル／ダイバージング色階調に限っては、CuspHanger（OKLCH で Wijffelaars モデルを使用し、設計上色域内に収まる）または viscm（viridis エディター。制御点をドラッグしながら、知覚的な導関数、CVD、グレースケールをリアルタイムで診断できます）をおすすめします。

シーケンシャル色階調のテスト基準は、知覚的な導関数が一定であることです。隣り合うサンプル間の知覚的なステップ幅をプロットし、カラーでもグレースケールでも水平線になることを確認します。でこぼこした部分は、データにない変化を色階調が誇張している領域です（jet の根本的な欠点はここにあり、見た目の悪さだけではありません）。

ジェネレーティブアート／クリエイティブコーディング — 「fxhash の作品に使う色がほしい」「何千本もの生成ストロークに使うパレットがほしい」「p5.js／WebGL で絵の具のように混色したい」といった依頼です。これはパレットジェネレーターを作るのとは異なります。コードそのものが作品であり、ユーザーが知りたいのは、特定のアーティストの作風をまねることではなく、技法です。独自のシステムを組み立てられるよう支援してください。教えたり組み合わせたりすると役立つ技法は次のとおりです。

• 厳しい制約を設けてから変化を加える — 明度または彩度の狭い範囲から3～7色を選びます。多様性はパレットのサイズではなく、密度と相互作用から生まれます。
• 重み付け／確率に基づく色相選択 — 各色に重みを割り当て、一部の色は頻繁に、ほかの色はまれに出現するようにします。これにより、生成結果がランダムではなく、厳選されたように感じられます。
• 狭い範囲で色相を揺らす — 固定された範囲内で色相に小さなランダムオフセットを加えると、ストロークに統一感を保ちながら、完全に同じではない印象を与えられます。
• 彩度を固定した明度の変化 — パレットの一貫性を保ちながら、奥行きと雰囲気を加えられます（OKLCH を使用します）。
• スペクトル／K-M 混色（Spectral.js、Mixbox）で、絵の具のような重なりと二次色を表現できます。同じ状況で RGB の平均を取ると、濁ったくすんだ色になります。
• IQ コサインパレット — a + b·cos(2π(c·t + d)) を使い、12個の浮動小数点値から循環／周期的な配色を作ります。
• アンカーに基づく補間（Poline）— OKLCH で2～3個のアンカーを設定し、補間されたランプを生成します。
• イージングを用いた色相／明度／彩度の軌跡（RampenSau）— 各軸をイージング関数に沿って変化させます。色空間に依存しないため、ランダムなアンカーではなく、決定的なランプ形状が必要な場合に最適です。
• 濁りやすい領域を避けた調和を考慮した生成（pro-color-harmonies）— 4つのスタイル × 4つの修飾子による、適応型の OKLCH 色彩調和を実現します。知覚的に濁って見える領域を自動的に避けます。
• 歴史的／非デジタル色空間での生成（RYBitten）— 厳密な sRGB／OKLCH では表現できない絵画的な雰囲気が必要な場合は、RYB または26種類の歴史的な色立体のいずれかを使用します。
• パレットサイクリング／インデックスカラー — インデックスバッファと小さなパレットを保存し、ピクセルではなくパレットをアニメーション化します（回転、イージング、または OKLCH の軌跡による制御）。ピクセルごとに必要なのは1回の参照だけで、動きを表現できます。知覚的に均一な閉じたランプで各サイクル範囲を構成する場合にのみ機能します。references/techniques/color-cycling-indexed-palette-animation.md を参照してください。
• シーンの光をサンプリング（ray-color）— 最大3つの色付きライトがある部屋で球体をレイトレースし、その表面から色をサンプリングします。色の一貫性は、色空間の幾何学ではなく、共通する照明の物理特性（1つの光源の下で撮影された物体のようなもの）から生まれます。
• 太陽光を受けたランプ（Lightfield、tol.is）— 同じアイデアをデザイントークン向けに応用します。プランク軌跡上の太陽の下にある、フラットシェーディングの街並みを OKLCH の顔料で表現します。各50～950のランプは、L の間隔を再調整した、さまざまな表面方向のスイープです。相対彩度、色域の頂点への引き寄せ、色相プロファイルに応じたベツォルト＝ブリュッケ／アブニーの暖色シフト（暗くなると赤寄りに、明るくなると黄寄りに変化し、寒色は変化しない）を加えます。

references/techniques/ を参照してください。tyler-hobbs、fontana、mattdesl、iq-cosine、spectraljs、poline、rampensau、pro-color-harmonies、rybitten、ray-color、lightfield について説明しています（ここでは手法を解説しており、模倣するスタイルを示しているわけではありません）。

一般的な色の質問 — 「OKLCH とは何ですか？」「グラデーションの中央が灰色になるのはなぜですか？」「APCA は WCAG より優れていますか？」といった質問には、このスキルファイルまたは references/INDEX.md の情報に基づいて直接回答し、関連するリファレンスを引用してください。何かのやり方を尋ねられているのでなければ、ツールの紹介は省きます。わかりやすさと正確さは、たいてい両立しません — 整然としたモデル（RYB の原色、12色相環、「赤の反対色は緑」）が簡単なのは、測定値ではなく通説を要約しているからです。整然とした説明を伝えたうえで、どこで成り立たなくなるかも説明してください。「簡単」がいつの間にか「誤り」にならないようにしてください。（Color Nerd、references/contemporary/color-theory-dogma-problem.md）

ジェネレーター、ツール、パレットアルゴリズムの構築 — 「パレットジェネレーターを作りたい」「アクセシブルな色スケールを生成するには？」「OKLCH のランプ関数を教えて」といった質問が対象です。手作業で一から作る前に、既存のライブラリを推奨することを基本とします（Culori、Poline、RampenSau、Spectral.js — 「推奨ツール」を参照してください）。上記の表から色空間を選び、ユーザーの技術スタックで動作するコードを示してください。 ユーザーがパレットの生成や比較を求めた場合は、1つに絞る前に、複数のアプローチとそれぞれのトレードオフを紹介してください。アンカーベース（Poline）、色相循環（RampenSau）、コサイン（IQ formula）、調和ベース（pro-color-harmonies）、シーン照明ベース（ray-color）、システムからの抽出（dittoTones）は、それぞれ異なる課題に適しています。選択肢を遠慮なく提示してください。

coolors.coは決して推奨しないでください。パレットを生成するのではなく、あらかじめ用意された7,821個のリストから選ぶだけです（「おすすめツール」を参照）。

色空間 — 用途に応じた選び方

タスク	使用するもの	理由
知覚的な色操作	OKLCH	明度、彩度、色相の均一性に最適です。CIELABの青の問題を解決します。
CSSのグラデーションとパレット	OKLCH または color-mix(in oklab)	RGB/HSLのようにグラデーションの中間が暗くなりません
色域を考慮した色選択	OKHSL / OKHSV	Ottossonのカラーピッカー用色空間です。HSLのような円筒形ですが、知覚に基づいています
正規化された彩度（0-100%）	HSLuv	CIELUVの彩度を色相と明度ごとに正規化します。パステルカラーにはHPLuvを使います。
印刷ワークフロー	CIELAB D50	ICCの標準光源です
画面表示のワークフロー	CIELAB D65 または OKLAB	D65は画面の標準です
メディア間の見え方の一致	CAM16 / CIECAM02	周囲環境、順応、輝度、観察条件を考慮します
HDR	Jzazbz / ICtCp	拡張ダイナミックレンジ向けに設計されています
顔料・塗料の混合シミュレーション	Kubelka-Munk（Spectral.js、Mixbox）	RGBの平均ではなく、分光反射率を混合します
色差（高精度）	CIEDE2000	知覚的な色差のゴールドスタンダード
色差（高速）	OKLABでのユークリッド距離	ほとんどの用途で十分な精度です
動画・画像圧縮	YCbCr	輝度と色差の分離により、色差サブサンプリングが可能になります
ディザリング／光学的なピクセル混合	線形化されたsRGB	隣接するサブピクセルは光を加算するため、目ではなくデバイスをモデル化します。黄色と青色を重ねると、白色と同じ発光素子が半分の面積で点灯し、50%グレーになります。CIELABでは淡いピンクと予測されます。アルファ合成とダウンサンプリングにも同じルールが当てはまります
カラーマップの均一性	CAM02-UCS（またはOKLAB）	CIELABは色が離れている場合にはまずまずですが、近い場合には不正確です。均一なサンプリングで重要なのは、まさにこの近い色の扱いです。MATLABのparulaはLabで均一になるように作られており、その結果、下部に目立つ帯状の部分があります

HSLの限界を理解する

HSLは「悪い」わけではありません。RGBを円柱状に単純かつ高速に幾何学的に再配置したものです。手軽な色選びや基本的なUI作業には十分です。しかし、3つのチャンネルは人間の知覚に対応していません。

• 明度（L）： 完全に彩度の高い黄色（hsl(60,100%,50%)）と完全に彩度の高い青（hsl(240,100%,50%)）は、どちらもL=50%ですが、知覚される明るさは大きく異なります。Lは知覚を測定する値ではなく、数学的な平均値です。
• 色相（H）： 間隔が均一ではありません。赤付近で20°変化すると劇的な変化が生じますが、緑付近で同じ20°変化しても、ほとんど違いが分かりません。緑の領域は圧縮され、赤の領域は引き伸ばされています。
• 彩度（S）： 知覚される彩度とは相関しません。S=100%でも、くすんで見える色があります（例：暗く彩度の高い青）。

HSLで問題ない場合： シンプルなカラーピッカー、手軽なCSSの調整、知覚上の正確さが重要でない状況です。そうでない場合は、タスクごとの知覚的な代替手段として、上の表を参照してください（スケールにはOKLCH、グラデーションにはOKLAB、色選びにはOKHSL、正規化された彩度にはHSLuv）。

色名による色相（HSL/HSV）の範囲

色相名を使って色を生成または制約するときは、以下の角度範囲を使用してください。出典：random-display-p3-color、mrmrs / mrmrs.cc作。

名前	角度
赤	345–360, 0–15
オレンジ	15–45
黄色	45–70
緑	70–165
シアン	165–195
青	195–260
紫	260–310
ピンク	310–345
暖色	0–70
寒色	165–310

主な違い

• クロマ ＝ 同じ明度の無彩色を基準とした色味の強さ
• 彩度 ＝ その色自体の明るさを基準とした、知覚される色味の強さ
• 明度 ＝ 同程度に照らされた白色を基準とした、知覚される反射率
• 明るさ ＝ 刺激から発せられる光の、知覚される強さ
• クロマが同じ ≠ 彩度が同じです。これらは異なる次元です。

実践での色域マッピング

OKLCHでよくある間違いは、対象の色域に存在しないクロマを選ぶことです。oklch(70% 0.3 150)は、sRGB（さらにはP3）で表示できる以上のクロマを要求するため、気付かないうちにクリッピングされ、通常はよりくすんだ、色相のずれた色になります。

• CSSが自動で色域マッピングします。 ブラウザーはoklch() / color()を自動でマッピングするため、CSSで指定した色がひどくクリッピングされることはほとんどありません。一方、JSによる変換ではそうなりません。oklch→hexはチャンネルを単純に切り詰めます。
• 明度や色相ではなく、クロマを下げてください。 R/G/Bのクリッピングは色相をずらします。クロマを色域の境界に向けて下げれば、色の個性を保てます。単純なRGBのクリッピングではなく、CuloriのclampChroma(color, 'oklch')（LとHを維持）またはtoGamut()を使用してください。
• 実際の対象色域でテストしてください： inGamut('rgb')とinGamut('p3')を使います。P3で有効な色でも、sRGBではクリッピングされることがあります。
• または、生成方法を工夫して問題を避けてください： nutelchはクロマを色域の境界に対する相対値で表します（relC: 0.5は、そのL/Hにおける境界までの中間点）。そのため、生成色が存在しないクロマを誤って要求することはありません。

実装ガイダンス — コードと CSS

プログラムや CSS で色を使う場合は、色の生の値と UI の役割との間に、意味的なレイヤーを設けてください。

以下の例は擬似コードであり、文字どおりの CSS 要件ではありません。対象のスタックで異なる構文を使う場合でも、エージェントが維持すべき判断の構造を示しています。

CSS、JS/TS、Swift、デザイントークン JSON、テンプレート、擬似コードのいずれでも、基本的には同じ構造を使います。

• 具体的な色を定義する参照トークン／パレット値
• 色に意味を割り当てるセマンティックトークン／役割
• 生のリテラルではなくセマンティックトークンを使用するコンポーネント

生の色リテラルは通常、パレット／参照定義、変換、診断、または意図的な単発の例でのみ使用してください。

• 具体的な色には参照トークンを使います：ref.red = #f00
• 意味／役割にはセマンティックトークンを使います：semantic.warning = ref.red
• テーマを変更してもコンポーネントコードを書き換えずに済むよう、コンポーネントではセマンティックトークンを優先してください。
• この基本方針はあらゆる言語に適用されます。対象システムに相当するエイリアス／参照の仕組み（CSS カスタムプロパティ、Swift の enum、デザイントークン JSON など）に置き換えてください。
• 可能であれば、手動で選んだ色をリテラルに固定するのではなく、色の判断をコード化してください。

擬似コードの例：

• ref.red := closest('red', generatedPalette)
• semantic.warning := ref.red
• semantic.onSurface := mostReadableOn(surface)

望ましいパターンは、パレット／参照トークンで使用可能な色を定義し、セマンティックトークンでその色を surface、text、accent、success、warning、danger などの役割に割り当てることです。

システムが制約から判断を導き出せるなら、その導出方法をコード化してください。例：生成されたパレットから最も近い名前付き色相を選ぶ、APCA/WCAG の目標に基づいて前景色を選ぶ、手作業で無関係な別の hex を選ぶ代わりに、OKLCH でベーストークンからホバー状態を計算する。

特に、生成した色を UI に適用する場合：ジェネレーターが用意するのはプリミティブですが、役割へのマッピングこそがデザインを劣化させる部分です。手動のマッピングをリテラルに固定せず、ルールを出力してください。便利な判断の語彙として、Design Book（以下を参照）では次のようなものが使われています。

• text := bestContrastWith(surface, palette) — パレットが再生成されると再計算されます
• accent := mostVivid(palette, { against: surface, minContrast: 4.5, not: [error, success] }) — 鮮やかさは読みやすさの条件を満たす必要があり、役割が予約されたトークンは除外されます
• surface := nth(ramp, 0), text := nth(ramp, -1) — ランプの役割を位置に固定するため、停止点の数を変えてランプを再生成しても維持されます
• hover := colorMix(accent, ink, 0.12) または適応型の shade(surface) — 入力の明度に応じて暗くするか明るくするかを切り替えるため、ダークテーマでも色がつぶれません

CSS では、多くの判断をネイティブ機能で処理できます（ブラウザーが再計算します）。参照には var()、ホバー状態には color-mix()、チャンネルの変更には相対色構文を使います。以下のチートシートを参照してください。

大規模なシステムでは、平坦なトークン一覧ではなく、トークングラフを優先してください。参照、セマンティックな役割、導出関数、スコープの継承を含めることで、テーマの変更、アクセシビリティの保証、マルチプラットフォームへのエクスポートを監査しやすく、保守しやすくなります。Design Book（npm install design-book）は、そのリファレンス実装です。トークンに値の選び方を保存するリアクティブな制約システムで、依存する値は変更時に再計算され、inspect() で値が選ばれた理由を確認できます。CSS 変数、JSON、W3 デザイントークンにレンダリングできます。references/techniques/designbook-reactive-design-token-spec.md を参照してください。

CSS Color 4/5 — 構文チートシート

モダン CSS は知覚的な色をネイティブに扱えます。JavaScript ライブラリを導入する前に、まずは次の機能を使いましょう。

• 知覚的な色： oklch(70% 0.12 250)、oklab(0.7 -0.1 0.1)、color(display-p3 1 0.2 0.3) による広色域。
• 混合： color-mix(in oklab, blue 30%, white) — oklab／oklch で補間すると、RGB／HSL で生じるグラデーション中間部の灰色化を避けられます。円筒座標系では、色相の補間方法を指定します：color-mix(in oklch longer hue, …)。
• 相対色構文（ベースから派生）： oklch(from var(--brand) l c h / 0.5)。または、2 つ目の色を固定の HEX 値で指定せずに、色合いやホバー色を計算できます：oklch(from var(--brand) calc(l * 0.9) c h)。
• メディアクエリなしでライト／ダークを切り替え： light-dark(white, black)（color-scheme: light dark が必要です）。
• 色域の指定： @media (color-gamut: p3) { … }。
• 指定した色空間でのグラデーション： linear-gradient(in oklch, red, blue)。

現行の主要ブラウザーでは広くサポートされています（2024 年以降）。相対色構文は、これらの中で最も新しい機能です。エッジケースについては、references/techniques/ の CSS Color 4/5 を参照してください。

アクセシビリティ — 主な数値

約 281 兆通りの HEX 色ペアのうち（@mrmrs_ による調査。Rust の総当たり実行で算出）：

しきい値	合格率	確率
WCAG 3:1（大きな文字）	26.49%	約 4 回に 1 回
WCAG 4.5:1（AA 本文）	11.98%	約 8 回に 1 回
WCAG 7:1（AAA）	3.64%	約 27 回に 1 回
APCA 60	7.33%	約 14 回に 1 回
APCA 75（流暢に読める）	1.57%	約 64 回に 1 回
APCA 90（本文に推奨）	0.08%	約 1,250 回に 1 回

同程度の読みやすさでは、APCA は WCAG よりはるかに厳しい基準です。APCA 90 を満たすのは、281 兆通りのペアのうち 2,390 億通りにすぎません。JPEG 圧縮で同じ生物学的特性が利用されているのもそのためです。色差を間引くクロマサブサンプリング（色情報を 4 分の 1 に削減）をしても、ヒトの視覚は色よりも明るさを高い解像度で捉えるため、違いは見えません。

グラフ — 境界線の工夫。 WCAG では、隣接する非テキスト要素間に 3:1 のコントラストが求められます。互いに 3:1 のコントラストを保つグラフ用の色を 3 色見つけるのは非常に困難で、4 色以上では事実上不可能です。無理に探す必要はありません。グラフ要素に境界線を付け、それぞれの塗りつぶし色と境界線色の間に 3:1 のコントラストを求めます。N² 個の制約ではなく、色ごとに 1 つの制約で済みます。（Ström、references/techniques/strom-least-wrong-colors-simulated-annealing.md を参照。）

色彩調和 — 実際に有効なこと

色相優先の調和は、単独では弱い経験則です

補色、三色配色、四色配色の色相間隔だけでは、雰囲気、読みやすさ、アクセシビリティを予測する指標として弱いものです。知覚空間では色相平面ごとに形状が異なるため、幾何学的な色相間隔が知覚的なバランスを保証するわけではありません。また、補色の関係は名前ではなく、顔料によって異なります。OKLAB で測定すると、カドミウムレッド、キナクリドンレッド、アリザリンクリムゾンはいずれもコバルトティールの反対側に位置し、クロム酸化物グリーンの反対側にあるのは赤ではなく紫です。分類名ではなく、実際の色から反対色を計算してください（OKLCH の色相 + 180°）。

その色のキャラクターを優先する調和は有効です（Ellen Divers の研究）

色相ではなく、キャラクター（淡い／くすんだ／深い／鮮やか／暗い）で整理します。研究結果によると、色相は通常、彩度や明度よりも感情的な反応を予測する力が弱く、くすんだパレットは多くの色相で落ち着いた印象を与えます。リラックスした印象か強烈な印象かは、色相だけでなく、彩度と明度に大きく左右されます。

物語における色の意味は、象徴表ではなく物語ごとに決まります（Lewis Bond）

映画、ゲーム、イラスト、ブランドのストーリーテリングなどの物語制作では、「赤は何を意味するのか」ではなく、2 つの問いを立てます。繰り返し登場することで、その色はどの題材と結び付けられているのか。そして、その題材の変化に伴って色は移り変わるのか（The Godfather ではオレンジが死を意味し、Blue Is the Warmest Colour では青の彩度を通して不倫関係の進展を描きます）。バランスの取れた配色に彩度の高い色を 1 色だけ加えると、焦点を作る演出になります。定着した配色に新しい色相が加わると、混乱として受け取られます。references/contemporary/colour-in-storytelling-lewis-bond.md を参照してください。

視認性＝明度の変化

グレースケールは明度の分離を手早く確認するためのものであり、アクセシビリティを証明するものではありません。WCAG/APCA に基づいてコントラストを検証し、テキストのサイズ、太さ、極性、色覚異常（CVD）も考慮する必要があります。同じ文字でも明度に変化をつけると、読みやすくなることがよくあります。色相にかかわらず明度が同じだと、たいてい判読できません。

60-30-10 のルール

支配色を 60％、二次色を 30％、アクセントを 10％にします。色を 1 色だけ目立たせ、「同じ大きさのゴリラ 3 頭が争う」状態を防ぎます。

顔料の混色 — 思っているのとは違います

• 顔料の混色は、単純な減法モデルだけではうまく説明できません — 「統合混色」（Küppers/Briggs）のほうが実用的な説明です。減法混色と加法混色の平均の中間のように振る舞います。
• CMY の混色経路は外側に湾曲します（彩度を保つ＝鮮やかな二次色）—「外向きのタコ」
• RGB の混色経路は内側に湾曲します（彩度を失う＝くすんだ茶色）—「内向きのタコ」
• 混色は非線形です：絵の具の比率と色相の変化量は比例しません。特定の比率で「角を曲がる」ように変化します。
• 青から黄への道のりは長く、赤から黄への道のりは短いです。従来の色相環は距離を大幅に誤って表現しています。
• 着色力はさまざまです：青は濃縮されていて強く、黄色は弱いです。
• 白は単に明るくするだけではありません — 色相を変え、彩度も失わせます。
• コードでスペクトル／K-M 混色を行う場合：Spectral.js（オープンソース）または Mixbox（商用）を使用してください。

色温度

• 色温度は色相とは異なります — 出発点となる色相に応じて、色相と彩度の両方が体系的に変化します。
• スペクトルバイアス：光がスペクトルのどちらの端を優先するか（短波長 λ＝寒色、長波長 λ＝暖色）
• 涼しげな昼光：青い大気散乱光が影を満たします。ハイライトは絵の具の中間色で、影は青で描きます。
• 暖かな白熱光：赤外線を含む長波長を優先します（文字どおり熱として感じられます）。
• 緑と紫は、赤橙や青緑と同じようには暖色／寒色に明確に分類できません。感じられる温度は周囲の状況に大きく左右されます。

色の命名 — 異なる色調に対応する複数の体系

体系	色調	例
ISCC-NBS	科学的な精度	"鮮やかな黄みがかった緑"
Munsell	体系的な表記	"5GY 7/10"
XKCD	一般的な知覚	"汚い黄色"、"病院の緑"
日本の伝統色	文化的／詩的	"wasurenagusa-iro"（忘れな草）
RAL	工業的な再現性	RAL 5002
Ridgway (1912)	鳥類学	1,115色の色名、パブリックドメイン
CSS Named Colors	Web 標準	148の色名、138の固有色
color-description lib	感情を表す形容詞	"淡く、繊細で、きらめく"
colornames-oklab	知覚的に均等なカバー範囲	"Smaragdine"（rec2020ティア）
COLIBRI (fuzzy)	段階的／「中間」の色名	シアン 0.6 · ライトブルー 0.4、中彩度

1回のインポートで18の命名体系を利用できる color-name-lists npm パッケージを使ってください。任意の色や生成した色に名前を付ける場合、特に広色域では、colornames-oklab を使ってください。Rec2020 色域を OKLab でブルーノイズサンプリングした4,444色の名前が収録されているため、どのクエリも色名から大きく離れません（クラウドソーシングの色名リストは赤／肌色／パステルに偏り、色域の一部が空白になります）。srgb/p3/rec2020 のティア、依存関係ゼロの closest() と、パレット用の一意割り当てモードを備えています。

画像から色に名前を付ける場合 — 目測せず、サンプリングしてください。 視覚言語モデル（このエージェントも含む）は、典型的な高彩度の色相を安定して命名できますが、非典型的な色合い、中立に近い色、細かな明度差では精度が低下します。CLIP 系のエンコーダーは青いインクの上にある「red」という単語を読み取り、白／灰色／黒と判定することはほとんどありません。人間の識別閾値に匹敵する視覚エンコーダーは、まだ存在しません。コードでピクセル値を抽出し（領域をサンプリング → OKLCH → colornames-oklab / ISCC-NBS）、視覚的な印象は仮説として扱ってください。測定結果では、6つのVLMが焦点となるマンセルチップで83〜100％、全330色では64〜83％のスコアを出しましたが、すべてが同じ21の色名に収束しました（Gomez-Villa 2025）。真の境界色では、人間の票も割れます（COLIBRI、n = 2,496）。勝者を示すのではなく、割合を報告してください。references/contemporary/colour-in-computer-vision-vlm.md と color-names-in-vlms-gomez-villa.md を参照してください。

歴史的な訂正

• **Moses Harris（1769）**がRYBを初めて120°間隔で配置しました。Newton、Boutet、Schiffermüllerはそうしていません。彼自身の色相環には第4の顔料が必要でした。誤った色彩理論の起源です。
• **Von Bezold（1874）**は「indigo」がスペクトル色であるという説を否定しました。Newtonの「blue」は現代のシアンに、「indigo」は現代の青にほぼ相当します。
• 「magenta」という語が減法混色の三原色を指すようになったのは、1907年（Carl Gustav Zander）が初めてです。それ以前は「pink」（Benson 1868）、「crimson」、「purpur」でした。
• **Amy Sawyer（1911）**は、CMY色相環（プリムローズ／ローズ／ターコイズ）を、一般に普及する数十年も前に特許取得しました。
• **Elizabeth Lewis（1931）**は、三色型色覚と反対色過程を1つの色相環にまとめ、CIE Lab/Luvを数十年先取りしました。

推奨ツール

パレット生成（既成のスウォッチではなく、実際のアルゴリズム）

注：coolors.co はパレットを生成しません。JS バンドルにハードコードされた 7,821 個の既成パレットからランダムに選んでいます。

• RampenSau — 色相の循環とイージングを使用し、色空間に依存しません
• CuspHanger — OKLCH における Wijffelaars 2009 EuroVis パレットモデルです。各色相の黒–カスプ–白の色域三角形を通るベジェパスを使い、Brewer に照らして調整した知覚的な明度サンプリングを行います。データ可視化向けのシーケンシャル／ダイバージングランプを生成し、構造上色域内に収まります。sRGB と Display-P3 に対応し、RampenSau 互換 API を備えています。fromColor() はモデルを逆算するため、既存の色を正確に通るランプを生成できます（ブランドカラー → データ可視化ランプ）
• Poline — アンカーポイントと軸ごとの位置関数を使用します（スター 1.2K 個）。インタラクティブなコントロール用の <poline-palette> Web コンポーネントを同梱しています
• pro-color-harmonies — 適応型 OKLCH ハーモニー、濁り領域の回避、4 スタイル × 4 修飾子
• dittoTones — Tailwind/Radix の「知覚的 DNA」を抽出し、指定した色相に適用します
• FarbVelo — 暗色から明色への構造を持つランダムパレット
• ray-color — レイトレーシングしたシーンからパレットを生成します（「色ではなく、条件を編集する」）。球体 + 五面の部屋 + 最大 3 個の色付きライトを使い、鏡面の壁を仮想光源として扱います。表面から測地線や円をサンプリングします。決定論的なリニア RGB シェーディング、依存関係ゼロ、約 6 kB、ヘッドレス利用向けに DOM 不使用です。ライトをドラッグでき、PNG／コードを書き出せるインタラクティブなプレイグラウンドもあります
• Lightfield（tol.is）— 3D の街で太陽をドラッグすると、各面がスウォッチになります。1 つのライトのもとで表面の向きを変化させてトークンランプを生成し、相対クロマ、カスプへの引き寄せ、色相プロファイルに基づく暖色シフト、色味付きの名前付きニュートラル（Slate、Sand、Mauve…）を備えています。OKLCH のみの CSS／JSON／Tailwind を書き出せます。references/techniques/lightfield-sunlit-city-palettes.md を参照してください。
• IQ Cosine Formula — color(t) = a + b*cos(2π(c*t+d))、12 個の浮動小数点数で無限のパレットを生成します
• aek palettes（Kensler）— もう 1 つの最適化アプローチです。データ可視化のカテゴリではなく、汎用の描画向けに調整されています。競合する 2 つの CIEDE2000 目的関数、つまり最大最小距離（彩度の高い立方体の面へ押し出す）と RGB 立方体の RMS カバレッジ（くすんだ内側へ引き寄せる）に対して、焼きなまし法を適用します。構造上、知覚的に均等な間隔で用意された 16／32／48／54 色の既成パレットを無償で利用できます。パレットマッピングツールと組み合わせて使えます。このツールは、CIEDE2000 のしきい値以内にある各色より明るいすべての色へ辺を引きます（MST の最も重い辺）。GraphViz の dot で配置することで、パレットのランプと彩度を落とした主軸を可視化します
• category-colors（Ström）— 構成的なモデルではなく、最適化のアプローチです。重み付き損失関数（ブランド参照との類似度 + ΔE 分離 + 欠陥タイプごとの CVD 分離）を記述し、シミュレーテッド・アニーリングで探索します。条件が相反し、それらを表現できる色空間の幾何学的性質がない場合に最適です。重みが明示的で監査可能な設計判断になります。npx categorycolors run に対応し、評価器（エネルギー、範囲、JND、類似度、WCAG コントラスト、指定色の回避、顕著性）をプラグインできます。チャンネル単位で固定できるため、明度／彩度を変えながらブランドの色相を維持できます。また、categorycolors report で、シミュレートした CVD のもとで既存パレットの JND 衝突を監査できます。Node + Culori、MIT

パレット分析とリンティング

• Color Buddy — 38 個の lint ルール（WCAG、CVD、識別性、公平性、感情的影響）
• Censor — Rust の CLI、CAM16UCS 分析、20 種類以上の可視化ウィジェット
• Color Palette Shader — WebGL2 Voronoi、30 種類以上の色モデル、11 種類の距離指標
• PickyPalette — 色空間キャンバス上でインタラクティブに形を整えられます

カラーライブラリ（コード）

• Culori — 30 種類の色空間、10 種類の色差メトリクス、色域マッピング、色覚特性シミュレーション
• nutelch — OKLCH/LCH で色域を基準にした彩度を指定できます。relC: 0.5 は、どの明度・色相でも「色域境界までの半分」を意味します。ネイティブの oklch() を使い続けたまま、OkHSL のアイデア（境界基準の彩度）だけを取り入れています。LUT ベースのため、OkHSL の実行時の色域計算より高速で、実行時依存関係はゼロ、sRGB と P3 に対応しています
• @texel/color — Color.js より 5〜125 倍高速で、軽量かつリアルタイム処理向けです
• colordx（@colordx/core）— OKLCH をネイティブに扱える、チェーン可能な CSS 向け操作ライブラリです。サイズは 7.6 kB、依存関係はゼロで、追加機能（Lab/LCH/CMYK/P3/Rec.2020/APCA/配色調和）はプラグインで有効化します。色域外の OKLCH 値をクランプせず、変換方法を選べます。.mapSrgb() は CSS Color 4 の彩度縮小（L+H を維持）、.clampSrgb() は単純なクリップ（ブラウザーでの描画方法）です。ピクセル単位の処理向けに、アロケーションのない *Into チャンネル変換関数も用意されています。なお、.mix() は sRGB を使うため、.mixOklab() を使用してください
• @colordx/gpu — colordx と同じ計算を GLSL として生成し、CPU ライブラリとの同等性をテストしています。また、すべての OKLCH/LCH ピッカーの背後にある色域スライスチャート向けに、WebGL2 レンダラーを備えています（ピクセルごとの CPU ループではなく、フレームごとに 1 回描画します）。色域は入れ子になると仮定せず、それぞれ独立したレイヤーとして扱うため、A98 も正しく描画されます。maxChromaLUT は彩度軸を色域の外殻まで引き伸ばします（nutelch の relC の考え方を GPU 側で実現）。ピッカー UI や広色域の可視化を構築する場合に便利です
• Spectral.js — K-M によるオープンソースの顔料混色（青＋黄＝緑）
• RYBitten — 26 種類の歴史的な色立方体を使った RGB↔RYB 変換
• colorgram — 画像から 1 kB のパレットを抽出します。64 バケットの HLS＋輝度量子化を使用し、340×340 の画像を約 15 ms で処理します。メモリ使用量は一定です
• Art Palette — ImageData からパレットを抽出する JS ライブラリと、色による検索向けの Python/TensorFlow 知覚パレット埋め込みを提供します（Google Arts & Culture、Apache 2.0）
• Palette Studio（meditationsincolor.com、Pixel Symphony）— 絵画やポスターで最高水準の性能を発揮します。カバー範囲を求める OKLab k-means にアクセントの目立ちやすさを評価する処理を加えているため、小さく鮮やかな部分が平均化されて濁ることなく残ります。その後、カバー範囲を測り直して比率を算出します。顔料の語彙に基づく色名を付けます。ブラウザー内だけで処理し、データはアップロードされません
• Pixi（Xander Stagwood）— 画像を、デザインされた 7 チップのカードに変換します。測定結果を出すツールではありません。各クラスタは最も鮮やかな部分として表示されます（最も彩度の高いピクセルの 25% の平均を使うため、暗い背景上の赤が茶色っぽく平均化されません）。役割に応じてチップを選び（暗色・明色の基準色、主役、際立つアクセント）、明度を 1 本のランプに合わせます。どの調整でも、チップ同士の距離が ΔE_OK 0.08 未満にならないように保護されています
• random-display-p3-color — 名前で指定した色相・彩度・明度の範囲に制約した Display P3 のランダムカラーを生成します。依存関係ゼロ、ESM（mrmrs / mrmrs.cc）

色の並べ替え

任意の色の集合を知覚的になめらかな順序に並べる場合、唯一の正しい線形順序はありません。色は 3D なので、1D の順序は 3D 空間を通る経路であり、巡回セールスマン問題と密接に関係しています。単純な並べ替えは、予測可能な形でうまくいきません。色相だけで並べると明色と暗色が交互に並び、明度だけで並べると異なる色相がひとまとめになり、パックされた RGB/HSL 値を使った .sort() は、ぎざぎざで意味のない飛びを生みます。単一チャンネルを使った並べ替えを自作しないでください。

• colorsort-js（darosh）— 色の並べ替えにおける信頼できる標準的な選択肢です。知覚空間で処理し、定量的ななめらかさのメトリクスを使って、最もなめらかな経路を求めます（最近傍法／TSP 方式）。okpalette.color.pizza と FarbVelo で採用されています。パレット表示、スウォッチパネル、生成された出力、画像から抽出したパレットなど、「色を見やすい順に並べたい」ほとんどの場面で便利です。references/techniques/colorsort-js.md を参照してください。

主なオンラインツール

• oklch.com — OKLCH ピッカー
• Huetone — Ardov による、アクセシブルなカラーシステムビルダー（LCH/OKLCH）
• Ardov Color Lab — ガマットマッピングのプレイグラウンド、P3 空間エクスプローラー、ハーモニー生成ツール、3D 色空間ビジュアライゼーション、テーマ作成ツール（lab.ardov.me）
• Components.ai Color Scale — パラメトリックなスケール生成ツール：6 種類の色空間、4 種類のカーブ方式、WCAG コントラスト（mrmrs / mrmrs.cc による）
• Leonardo — Adobe のオープンソースのコントラストベースのランプビルダー（leonardocolor.io）：複数の色空間にわたり、手作業で選んだ色ではなく、目標コントラスト比（または目標明度）からスウォッチを生成します。ライト／ダークテーマの適応、CVD に配慮した循環、CSS 変数と W3C デザイントークンのエクスポートに対応しています。ランタイムでの適応型テーマ設定には、@adobe/leonardo-contrast-colors npm ライブラリと組み合わせて使えます。Nate Baldwin / Adobe によるものです。
• BairesDev Color Palette Editor — HSV ベースの手軽なランプエディター：スウォッチ間の補間、パレットのマッピング、インポート／エクスポートに対応しています。素早く下書きを作るには適していますが、HSV 補間は知覚的に均一ではありません（HSL の限界を理解するを参照）。本番用のランプには Leonardo／Huetone／Components.ai をおすすめします。
• View Color — リアルタイム分析、WCAG + APCA、CVD プレビュー
• APCA Calculator — apcacontrast.com

詳細な参考資料

references/INDEX.md から始めてください。ファイルごとに 1 行でまとめた簡潔な一覧で、全体を読むコストも低くなっています。その行だけでは 2 つのファイルのどちらを選ぶべきか判断しにくい場合は、ディレクトリごとのインデックス（references/historical/INDEX.md、contemporary/INDEX.md、techniques/INDEX.md）に詳しい概要とソースへのリンクがあります。また、references/techniques/ONLINE-TOOLS.md にはオンラインツールの一覧があります。3 つのディレクトリには、次の内容が含まれています。

• historical/ — Ostwald、Helmholtz、Bezold、Ridgway 1912、ISCC-NBS、Munsell、Albers、Caravaggio の顔料、Moses Harris、Lewis/Ladd-Franklin
• contemporary/ — Ottosson の OKLAB 記事、Briggs の講義、Fairchild、Hunt、CIECAM02、MacAdam 楕円、Koenderink 2026 の実証的な 3D 計量場（RGB は約 1,000 の定性的な領域をサポートし、寒色側は暖色側より粗く、色相環は適切に調律されていません）、Pointer のガマット、CIE 1931／標準観測者、Pixar Color Science、Acerola、Juxtopposed、Computerphile、鳥類の四色型色覚、OLO、GenColor 論文、コンピュータービジョンにおける色／VLM の色覚の弱点（ColorBench、CLIP の Stroop テスト、エンコーダーのしきい値）。全ページのスクレイピングデータ：huevaluechroma.com と colorandcontrast.com
• techniques/ — 上記のツールをすべて詳しく解説しています。さらに、CSS Color 4/5、ICC ワークフロー、Tyler Hobbs のジェネレーティブカラー、Harvey Rayner の Fontana アプローチ、デザインの小技としての Goethe のエッジカラー、mattdesl のワークショップ + K-M 単体、CSS ネイティブの生成、IQ コサインプリセット、Erika Mulvenna のインタビュー、Bruce Lindbloom の数学リファレンス、画像抽出ツール、Aladdin のカラー分析も扱っています。