필사 모드: カラーツール & パレット 2026 — Coolors / Tailwind / Radix Colors / Open Color / OKLCH / APCA / Polychrom / Stark 徹底ガイド

1章 · 2026年カラーツールの地図 — 生成器 / システム / アクセシビリティ / CSS の4分類

カラーツールは2026年現在、4つに整理される。どれか1つで全てをまかなえるツールは存在しない。良いデザイナー・エンジニアはこの4つを全部知っていて、状況に応じて使い分ける。

| 分類 | 代表ツール | 目的 |

| --- | --- | --- |

| **パレット生成器** | Coolors, Khroma, Adobe Color, paletton, ColorHexa | インスピレーション → 5色パレット |

| **デザインシステム色** | Tailwind, Radix Colors, Open Color, Material Theme Builder, Eva Design | 50–950 または 1–12 段階スケール |

| **アクセシビリティ** | Stark, Polychrom, Atmos, Color.review, APCAテスター | コントラスト / 色覚シミュレーション |

| **CSSカラー関数** | color-mix(), oklch(), color-contrast(), light-dark() | コード内での色演算 |

これに2つの補助カテゴリを加える。**画像から色を抽出するツール**(color-thief, ImagePalette, dthemr)と、**データビジュアライゼーション専用パレット**(viridis/inferno/magma, ColorBrewer)だ。後者は「綺麗な色」ではなく**正確な色**が必要な領域。

2026年の大きな潮流は3つ。

1. **OKLCHネイティブ** — Tailwind v4がRGB16進数を捨ててOKLCHをデフォルト色空間に採用した。CSSもoklch()関数を普遍的にサポート。

2. **APCAがWCAG 2を置き換え中** — WCAG 2のコントラスト式は1998年のsRGB前提で作られ、暗い背景で不正確という批判が積み上がっていた。APCA(Accessible Perceptual Contrast Algorithm)が急速に置き換え、WCAG 3ドラフトに採用された。

3. **AIパレットの日常化** — CoolorsのAIモード、Khroma、AdobeのFirefly連携などで「気分に合う5色」が1秒で出る。ただしAIは「アクセシビリティとデザインシステム」では依然として人間を代替できない。

> 本記事のCSSコードはすべてChrome 130+, Safari 18+, Firefox 130+を前提とする。ポリフィルは一行も不要。

2章 · Coolors — Series A以降のAIパレット標準

Coolorsは2015年にFabrizio Bianchiが個人プロジェクトとして始めて、2023年のSeries A後にカラーツールカテゴリの事実上の標準となった。2026年時点で登録ユーザーは1,000万人を超え、月間生成パレットは数十億単位。

コア機能3つ

1. **スペースバー生成** — スペースを1回叩くごとに新しい5色パレット。気に入った色は鍵マークでロックして、残りだけ再生成。シンプルだが中毒性が高い。

2. **AI Palette(2023〜)** — 「sunset over Tokyo」「toss bank login screen」「決算ダッシュボード」のような自然言語で色を作る。内部はCoolorsが学習させた独自モデル + 色彩理論補正の組み合わせ。

3. **コントラストチェッカー / 色覚シミュレーション** — パレットを作ったらそのまま同じ画面でコントラスト、色覚シミュレーションができる。

コードに取り込む

Coolorsで作ったパレットは1本のURLになる。

https://coolors.co/0a0a0a-1f2937-3b82f6-fbbf24-ef4444

5つのhexコードをそのままCSS変数に流し込めばよい。

:root {

--bg: #0a0a0a;

--surface: #1f2937;

--accent: #3b82f6;

--warning: #fbbf24;

--danger: #ef4444;

}

限界

Coolorsの弱みは**デザインシステムとしての深さが足りない**点。5色パレットはインスピレーション用で、Tailwindのような50–950の11段階スケールではない。実プロダクトでは、Coolorsの結果をRadix ColorsやTailwindパレットに「拡張」する作業が追加で必要になる。

3章 · ColorBox → Material Theme Builder — 色を「数学で」作る

ColorBox時代(IBM → Lyft, 2016–2020)

Lyftデザインチームのアダム・モースとコール・ベミスが2017年に公開したColorBoxは、色を「勘」ではなく「関数」で作るという発想を広く普及させた。スケール各段階の色は次の3つの曲線の関数として定義される。

- **明度曲線** — 最も明るい段階から最も暗い段階までの落ち方

- **彩度曲線** — 両端で低く、中央が最も鮮やかという形

- **色相曲線** — 段階ごとの微妙な色相シフト(明るい段階は黄寄り、暗い段階はマゼンタ寄りなど)

この「関数としてのパレット」というパラダイムが、Tailwind、Radix、Material 3すべてに直接または間接的に影響を与えた。

Google Material Theme Builder(Material 3 / 2022〜)

ColorBoxの思想を最も本格的に継承したのがMaterial Theme Builderだ。

1. **Seed Color**(ブランド色)を1色だけ入力

2. 内部でHCT(Hue, Chroma, Tone)色空間に変換

3. Primary / Secondary / Tertiary / Error / Neutral / Neutral Variant の6つの「トーンパレット」を自動生成

4. 各トーンパレットは0(黒)〜100(白)までの13段階

5. ライト / ダークテーマを同時に出力

Figmaプラグインとウェブビルダーの両方で提供され、結果はAndroid XML / iOS / CSS / JSONで一度に書き出せる。

> Material 3の本質は「デザイナーが1色だけ決めれば、あとは数学がやる」こと。デザインシステムの初期セットアップコストを極端に減らしてくれる。

4章 · Tailwind CSS v4 — OKLCHネイティブの時代

何が変わったか

Tailwindは2024年6月にv4アルファを公開し、2025年に正式リリースした。大きな変化は2つ。

1. **CSSファーストの設定** — `tailwind.config.js`が消え、CSSファイル内の@themeブロックでトークンを定義する。

2. **OKLCHデフォルト色空間** — すべての標準パレット(slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose、加えて新ブランド向けファミリー)がoklch()値で定義されている。

なぜOKLCHが優れているのか

OKLCHはOKLab色空間のLCH変種で、**知覚均等(perceptually uniform)** だ。何を意味するか。

- HSLでは`hsl(60, 100%, 50%)`(黄)と`hsl(240, 100%, 50%)`(青)はLが同じ50%だが、**人間の目には黄のほうがずっと明るく見える**。

- OKLCHでは`oklch(0.7 0.2 60)`と`oklch(0.7 0.2 240)`はほぼ同じ明るさに見える。

この差は「段階別パレット」を作るときに決定的だ。HSLで1–9段階を作ると黄領域だけが明るすぎ青領域だけが暗すぎる結果になるが、OKLCHで作ると段階間の変化が均一になる。

Tailwind v4 の色使用法

@import "tailwindcss";

@theme {

--color-brand-50: oklch(0.97 0.02 250);

--color-brand-500: oklch(0.65 0.18 250);

--color-brand-900: oklch(0.25 0.10 250);

}

これだけで`bg-brand-500`、`text-brand-900`のようなユーティリティが自動生成される。

color-mixと組み合わせる

.button {

background: var(--color-brand-500);

}

.button:hover {

background: color-mix(in oklch, var(--color-brand-500), black 10%);

}

OKLCH色空間でのmixはRGB mixよりずっと滑らかだ。赤と青をRGBで混ぜると濁った灰になるが、OKLCHで混ぜると自然な紫が出る。

5章 · Open Color(Yeun Min) — アクセシビリティ優先、韓国発のパレット

韓国のデザイナーが作ったグローバルオープンパレット

Open Colorは韓国のYeun Min(ミン・ユンジェ)が2017年に公開したオープンソースのカラーパレットだ。GitHubスター5,000+を獲得し、韓国のスタートアップ多数がデザインシステムの初期ベースとして使用している。

中身は13色相(gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow, orange)× 10段階(0–9)= 130色。

何が違うか

- **段階0はほぼ白、段階9はほぼ黒**という一貫性。どの色相でも0と9を組み合わせれば崩れない。

- **コントラストが事前検証済み**。blue-7 + gray-0はWCAG AAを通過する。

- **MITライセンス**。Sass / Less / CSS / JSON / PNGすべてのフォーマットをサポート。

使用例

:root {

--gray-0: #f8f9fa;

--gray-9: #212529;

--blue-7: #1c7ed6;

--red-7: #f03e3e;

}

.button-primary {

background: var(--blue-7);

color: var(--gray-0);

}

限界と後継者

Open Colorは段階別明度が「機械的に均一ではない」という弱みがある。blueとyellowの段階7は色覚的に明るさが違う。この問題を「科学的に」解決しようとして登場したのが次章のRadix Colorsだ。

6章 · Radix Colors — 12段階「科学的」スケール

WorkOS時代のデザインシステム色彩標準

Radix ColorsはWorkOSのデザインチーム(Pedro Duarte、Colm Tuiteなど、後にSteven Teyがv3リード)が作った色彩システムだ。2022年の1.0公開後、2024年のv3でP3広色域サポート + アルファチャンネル + dark/light自動マッピングまで完成した。

12段階の意味

各色は厳密に12段階で構成され、段階ごとに**固定の役割**を持つ。

| 段階 | 役割 |

| --- | --- |

| 1 | App background |

| 2 | Subtle background |

| 3 | UI element background |

| 4 | Hovered UI element background |

| 5 | Active / Selected UI element background |

| 6 | Subtle borders / separators |

| 7 | UI element borders |

| 8 | Hovered UI element borders / focus rings |

| 9 | Solid backgrounds(ブランド色) |

| 10 | Hovered solid backgrounds |

| 11 | Low-contrast text |

| 12 | High-contrast text |

この「段階 = 役割」のマッピングがRadix Colorsの本質だ。他のパレットは「この色をどこに使えばいい?」を毎回デザイナーが決めるが、Radixでは**段階そのものが答え**になる。

Auto Dark Mode

@import "@radix-ui/colors/blue.css";

@import "@radix-ui/colors/blue-dark.css";

.button {

background: var(--blue-9);

color: var(--blue-1);

}

.button:hover {

background: var(--blue-10);

}

`--blue-9`はlightで#3D63DD、darkで#3E63DDに自動マッピングされる。ダークモードを意識せずに書いても勝手に適応する。

アルファチャンネル

`--blueA-3`のようにAが付いた変数はアルファチャンネル版だ。どんな背景の上でも自然に乗る「半透明色」を提供する。オーバーレイ / ホバー効果の定石。

7章 · Adobe Color — 最古のクラシック、それでも現役

Kuler から Adobe Color へ

Adobe Colorは2007年に「Adobe Kuler」として始まったカラーパレットツールの元祖だ。2014年にAdobe Colorへリブランディングされ、2026年現在はCreative Cloud統合でInDesign / Illustrator / Photoshopから直接呼び出せる。

5つの色彩調和ルール

Adobe Colorの大きな価値は「色彩理論」を可視化してくれる点だ。

- **Analogous(類似色)** — 色相環で隣接する色

- **Monochromatic(単色)** — 同一色相の明度変化

- **Triad(三角)** — 色相環で120°離れた3色

- **Complementary(補色)** — 向かい合う2色

- **Compound(複合)**、**Shades(陰影)**、**Custom**

色相環に点をドラッグするとルールに従って他の点も自動で動く。色彩理論を最も直感的に教えてくれるツール。

写真から抽出(Extract)

JPG / PNGをアップロードすると自動で5色パレットを抽出する。この機能はcolor-thiefの祖先にあたるもので、2026年でも最も精度の高い抽出アルゴリズムの一つ。

限界

Adobe Colorの弱みは**Creative Cloudに縛られている**ことだ。無料ユーザーは保存数に制限があり、「ブランドライブラリ」のような協業機能は有料プラン専用。

8章 · Khroma — AIがあなたの色を学習

50色学習 → 無限のパレット

Khromaは2018年にトロントのデザイナーGeorge Hastingsが公開したAIカラーツールだ。ユーザーが「好きな色を50個」選ぶと、そのデータで個人モデルを学習し、それ以降は**ユーザーの好みに合う色だけ**を提案する。

他のAIカラーツールとの違い

- CoolorsのAIは「世の中のトレンド」を学習する

- KhromaのAIは「あなたの好み」を学習する

5分で50色をクリックすれば、二度と「世の中の人が好きな色」を見なくて済む。極めて個人化されたツール。

限界

Khromaは「2色組み合わせ」だけを提案する。5色パレットやデザインシステム段階パレットを作るには不十分。**インスピレーション発見用**として使い、結果をCoolorsやRadixで拡張するワークフローが一般的。

9章 · Realtime Colors — 「デザインする前にプレビュー」

コード無しで実ページに色を当てて見る

Realtime Colorsは2023年登場の無料ツールで、仮想のランディングページにテキスト色 + 背景色 + プライマリ + セカンダリを入力すると**即座に本物のUIのように表示する**。

なぜこれが重要か

カラーパレットの長年の罠は「HSLスライダーでは綺麗だったのに、実ページでは醜く見える」ことだ。色は単独で存在せず、**他の色との比率 + 文字 + 影**の上で評価されるべきだ。

Realtime Colorsはその評価を1秒で可能にする。デザインカンプを作る前に、Figmaを開く前に、コードを書く前に、**色の第一印象**を決定する。

4色だけで十分か

デフォルトモードはText / Background / Primary / Secondaryの4色だけを受け付ける。Proモードで5色・6色まで拡張。たった4色でランディングページ全体がそれっぽく見えるという事実は、色の第一印象を決めるのは実は4–5色だというデザインの真理を示している。

URL共有

https://realtimecolors.com/?colors=171717-fafafa-1d4ed8-f59e0b

作ったパレットはURL1本で同僚に共有できる。Slackに貼ればプレビューが表示される。

10章 · CSS color-mix() / oklch() / color-contrast() — 普遍的サポート

2026年のCSSカラー関数3点セット

10年前、CSSの色は`#3b82f6`のような16進数1行だった。2026年のCSSは色を**数学的に扱う**。

color-mix()

.button {

background: color-mix(in oklch, blue 60%, white);

}

.button:hover {

background: color-mix(in oklch, blue 60%, white, black 10%);

}

2色を比率で混ぜる。`in oklch`で色空間を指定でき、視覚的に滑らかなグラデーションが保証される。

oklch()

:root {

--brand: oklch(0.65 0.18 250);

--brand-light: oklch(0.85 0.10 250);

--brand-dark: oklch(0.30 0.18 250);

}

OKLCHは知覚均等なので、L=0.5の2色は実際に同じ明るさに見える。デザインシステムのパレットを生成するときの最も合理的な色空間。

color-contrast()(実験的)

.text {

color: color-contrast(white vs black, navy, gray);

}

背景whiteに対してblack / navy / grayのうち最もコントラストが高いものを自動選択する。2026年5月現在Safari TP / Chrome Canaryで実験実装中で、近日正式リリース予定。

light-dark()

.surface {

background: light-dark(white, black);

color: light-dark(black, white);

}

color-schemeに従って自動的に2つの値のうち1つを選ぶ。2024–2025年の間に全ブラウザで安定サポート。

11章 · APCA — WCAG 2 Contrastの後継

WCAG 2 コントラストの限界

WCAG 2.0(1998)のコントラスト式はsRGBの相対輝度に基づく。結果は1:1〜21:1の比率で、4.5:1以上でAA、7:1以上でAAA。

問題は2つ。

1. **暗い背景で不正確** — 黒い背景の上の灰色文字は実際には読めるのに、比率が低く出る。

2. **人間の知覚を反映していない** — 25年前の単純な輝度式で、フォント太さ / サイズを考慮しない。

APCAとは

APCA(Accessible Perceptual Contrast Algorithm)は、Andrew Somersが2019年から開発してきた新しい知覚コントラストアルゴリズムだ。主な特徴。

- 結果は**Lc値(Lightness Contrast)で-108〜+106**。負は暗文字 / 明背景、正は逆。

- フォントサイズ / 太さと組み合わせて最小|Lc|閾値が変わる(例: 14ptレギュラーは|Lc| 75以上が必要)。

- 人間の視覚モデルに基づき、sRGB / P3両方をサポート。

2026年現在

- WCAG 3ドラフトに採用。

- Stark / Polychrom / AtmosのようなアクセシビリティツールがAPCAベースの検査をデフォルトで提供。

- ただし**法的コンプライアンス**(ADA、EU EAA)は依然としてWCAG 2.x基準なので、「APCA合格 + WCAG 2.1 AA合格」を同時に見るのが安全。

直接計算する

const Lc = APCAcontrast(

sRGBtoY([0, 0, 0]),

sRGBtoY([255, 255, 255])

);

console.log(Lc);

12章 · Polychrom / Stark / Atmos — Figmaアクセシビリティ三巨頭

Polychrom

Roman Shaminが作ったFigma / Figma Slidesプラグイン。APCAベースのコントラスト検査を最も速く軽量に提供する。テキストレイヤーを選択すると即座に|Lc|値が表示され、合格 / 不合格が色でマークされる。

特徴は**無料 + オープンソース**であること。WCAG 2 AA / APCA / WCAG 3 betaの3基準を同時に表示する。

Stark

Starkは2017年に登場した「アクセシビリティ フルスタック」プラグインだ。Figma / Sketch / Chrome拡張で提供され、次のすべてをカバーする。

- コントラスト(WCAG 2 + APCA)

- 色覚シミュレーション(8種類)

- フォーカス順序検査

- キャプション検査

- タッチ領域サイズ検査

エンタープライズプランはデザインシステム全体に対するアクセシビリティレポートを自動生成する。**エンタープライズデザインチームの標準**。

Atmos

Atmosは「アクセシビリティ + デザインシステム生成」のハイブリッドツールだ。Tailwind / Radixスタイルのトーンパレットを自動生成しながら、各段階がどのAPCA閾値を通過するかを表示する。

「我々のデザインシステムを作らなければ」というチームが0から1へ行く時間を、1週間から1日に縮めてくれる。

13章 · color-thief / ImagePalette / dthemr — 画像から抽出

color-thief — JavaScriptライブラリの定石

Lokesh Dhakarが作ったcolor-thiefは「画像から色を取り出す」ライブラリの事実上の標準だ。アルゴリズムはmodified median cut quantization。

const ct = new ColorThief();

const img = document.getElementById('hero');

img.addEventListener('load', () => {

const dominant = ct.getColor(img);

const palette = ct.getPalette(img, 5);

console.log(dominant, palette);

});

ブラウザ / Node.js両方で動作し、5–10ミリ秒で結果が出る。

ImagePalette / Vibrant.js

Vibrant.jsはAndroidのPalette APIをJavaScriptに移植したライブラリだ。単純なdominant色ではなく「Vibrant」「Muted」「Dark Vibrant」「Light Vibrant」のような**意味のある色群**を抽出する。

音楽アルバムカバー、ニュースサムネイル、映画ポスターのように「テーマを表現する色」が必要な場面に最適。

dthemr — 画像 → テーマ全体

dthemrは1枚の画像からdark / light両方のテーマ + Radixスタイルの11段階パレットを自動生成する。画像抽出の**ラストマイル**。

14章 · viridis / inferno / magma / ColorBrewer — データビジュアライゼーション定石

なぜ「綺麗な色」はデータビジュアライゼーションでは間違いか

データビジュアライゼーションにおける色の目的は「綺麗」ではなく、**異なる値を異なる色で正確に見せる**ことだ。2つの制約を同時に満たす必要がある。

1. **知覚均等(perceptual uniformity)** — 2色の明度差はデータ差に比例していなければならない。

2. **色覚親和(colorblind-safe)** — 赤緑の区別のような罠を避ける。

この2つの制約を満たすパレットがviridis系列だ。

viridis / inferno / magma / plasma / cividis

元々はPythonのmatplotlib用に2015年Stéfan van der WaltとNathaniel Smithが作ったカラーマップだ。その後D3.js、Observable、Plotly、Rのggplot2すべてが採用した。

| カラーマップ | 特徴 |

| --- | --- |

| viridis | 青 → 黄。最人気。ほぼあらゆる可視化で機能する。 |

| inferno | 黒 → 黄。暗い背景に向く。 |

| magma | infernoに似ているがピンク寄り。 |

| plasma | 紫 → 黄。 |

| cividis | 青黄のみ — 色覚親和性が最も高い。 |

ColorBrewer — 地図学者が作ったパレット

シンシア・ブリューワーがペンシルベニア州立大で作ったColorBrewerは「地図」のためのカラーツールだ。1990年代からカートグラファーが使ってきて、データビジュアライゼーションの定石として生き残った。

- **Sequential** — 順序のある値(0 → 100)

- **Diverging** — 中心値から両側へ広がる(-50 → 0 → +50)

- **Qualitative** — カテゴリ(性別、地域など)

3分類の中でそれぞれ色覚親和 / 印刷親和 / モニター親和オプションを選べる。

コード例(D3.js)

const color = d3.scaleSequential(d3.interpolateViridis).domain([0, 100]);

const sample = d3.range(0, 100, 10).map(d => color(d));

15章 · 韓国 / 日本 — トス、カカオ、pixiv、アニメイトの色文化

トスのデザインシステム

トスは2020年から独自のデザインシステムを公開しており、色は「Toss Color Palette」として別文書化されている。主な特徴。

- **グレー13段階**で非常にきめ細かい。白背景でほぼ見えない#f9fafbから本物の黒#1b1c1fまで。

- **ブルー9段階** — 0/100/200/.../800。トスの象徴#3182f6は「Blue 500」。

- **セマンティックカラー名** — `--toss-color-text-default`、`--toss-color-bg-elevation`のように「用途」で命名。Radixの「段階 = 役割」思想に近い。

カカオデザイン

カカオは「KakaoUI」という内部デザインシステムを運用し、色は「KakaoColor」として別ガイドされる。カカオの象徴である黄色#FEE500は単なるブランド色ではなく**法的に保護されたトレードドレス**だ。

KakaoUIの色体系は「ブランド色(黄) + 12段階グレー + セマンティック」の3軸構成。

pixivデザインシステム — イラストSNSの色

pixivは2024年に「Charcoal」というデザインシステムをオープンソース公開した。イラストがメインコンテンツのサービスらしく、**UI色は最大限無彩色**で行くのが原則。華やかなイラストが主役で、UIは額縁の役割。

gray-1: #f6f6f6

gray-9: #1a1a1a

blue-5: #0096fa

アニメイト(animate) — 日本のアニメグッズショップの色

アニメイト、animate.co.jpのような日本のアニメ・漫画ECサイトは意図的に「派手な色」を使う。本質は**春・夏・秋・冬のシーズンカラー**と作品ごとの限定カラーをサイトUIに統合する点。作品ページに入るとヘッダー / ポイントカラーがその作品のキーカラーに変わる。

韓・日・欧米を一行で

- **韓国(トス、カカオ)** — 信頼感を伝える節制された色。グレー段階が非常にきめ細かい。

- **日本(pixiv、アニメイト)** — コンテンツ中心。UIは無彩色、コンテンツの色が主役。

- **欧米(Radix、Tailwind)** — システム化された関数型パレット。段階と役割が分離。

16章 · 誰が何を選ぶべきか — シナリオ別おすすめ

シナリオ1 — 個人スタートアップ、デザインシステムを0から1へ

1. **Realtime Colors** — 4色の候補を即座に実ページに当ててみる。

2. **Material Theme Builder** — Seedカラー1色からトーンパレットを自動生成。

3. **Tailwind v4 + @theme** — 結果をoklch()値でコード化。

シナリオ2 — シリーズBのプロダクトデザインシステム

1. **Radix Colors v3** — 12段階 / ダークモード自動 / アルファ含む。

2. **Stark / Polychrom** — Figmaで全コンポーネントのコントラストをAPCA + WCAG 2の2基準で検証。

3. **Open Color** — 「セカンダリ補助カラー」用バックアップパレット。

シナリオ3 — データビジュアライゼーション / BIダッシュボード

1. **viridis** — 連続値マッピング。

2. **ColorBrewer** — カテゴリカラー。

3. **Coolors / Adobe Color** — ダッシュボードUI自体の雰囲気色のみ限定使用。

シナリオ4 — マーケティングランディング / インスピレーション

1. **Coolors AIモード** — 「sunset over Tokyo」のような自然言語で素早く下絵。

2. **Adobe Color Extract** — リファレンス写真から5色を抽出。

3. **Khroma** — 自分の好みを学習させて無限に生成。

シナリオ5 — 政府 / 金融 / 医療(アクセシビリティ最優先)

1. **APCA + WCAG 2 AA**の2基準を同時に満たす。

2. **Polychrom / Stark** — 全テキスト / ボタンの検査が必須。

3. **Color.review** — ページ単位の自動監査。

4. **cividis(viridis系列)** — チャート色は色覚親和性を優先。

17章 · 参考 / References

- Tailwind CSS v4 announcement: https://tailwindcss.com/blog/tailwindcss-v4

- Radix Colors documentation: https://www.radix-ui.com/colors

- Open Color (Yeun Min): https://yeun.github.io/open-color/

- Coolors: https://coolors.co

- Adobe Color: https://color.adobe.com

- Khroma: https://www.khroma.co

- Realtime Colors: https://www.realtimecolors.com

- Material Theme Builder: https://material-foundation.github.io/material-theme-builder/

- IBM ColorBox (archived): https://lyft-colorbox.herokuapp.com/

- Polychrom Figma plugin: https://www.figma.com/community/plugin/1293440270987378411/polychrom

- Stark accessibility: https://www.getstark.co

- Atmos Figma plugin: https://www.atmos.style

- color-thief library: https://lokeshdhakar.com/projects/color-thief/

- ImagePalette / Vibrant.js: https://jariz.github.io/vibrant.js/

- Color.review: https://color.review

- paletton: https://paletton.com

- ColorHexa: https://www.colorhexa.com

- Eva Design System: https://colors.eva.design

- viridis colormaps: https://bids.github.io/colormap/

- ColorBrewer (Cynthia Brewer): https://colorbrewer2.org

- APCA W3C draft: https://github.com/Myndex/SAPC-APCA

- Refactoring UI (Wathan/Schoger): https://www.refactoringui.com

- CSS color-mix() (MDN): https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix

- OKLCH on web.dev: https://web.dev/articles/css-relative-color-syntax

- Toss Design System(韓国語): https://toss.im/design-system

- Charcoal by pixiv: https://github.com/pixiv/charcoal

本記事は2026年5月16日時点。OKLCH・APCA・color-mixは動きが速い領域なので、半年ごとに再確認する価値がある。