作ったもの
Color Picker Pro — https://sen.ltd/portfolio/color-picker-pro/
- 6 色空間: RGB / HSL / HSV / LAB / LCh / OKLCh
- 全フォーマット出力（hex, rgb(), hsl(), oklch()...）
- ライブ同期スライダー
- 6 ハーモニーパターン（補色・3 等分・類似色・分割補色・4 色・モノクロ）
- WCAG コントラストチェッカー
- 色覚プレビュー
- EyeDropper API
- 最近使った色の履歴
vanilla JS、ゼロ依存、ビルド不要。node --test で 97 ケース。
OKLCh が現代の正解
CSS で oklch() が使えるようになった。OKLCh は 知覚的に均一な色空間で、同じ明度同じ彩度で色相だけ変えると「見た目の明るさ」が変わらない。HSL だと純黄色 vs 純青で明るさが全然違って、デザインが崩れる。
Björn Ottosson の行列
// Linear RGB → LMS（錐体応答）
[0.4122214708, 0.5363325363, 0.0514459929],
[0.2119034982, 0.6806995451, 0.1073969566],
[0.0883024619, 0.2817188376, 0.6299787005],
// LMS^(1/3) → OKLab
[0.2104542553, 0.7936177850, -0.0040720468],
[1.9779984951, -2.4285922050, 0.4505937099],
[0.0259040371, 0.7827717662, -0.8086757660],
2 段の行列演算の間に立方根を挟む。これが錐体応答の圧縮。立方根なしだと線形空間のまま（知覚的に不均一）。
OKLCh = OKLab の極座標
const C = Math.sqrt(a*a + b*b);
const h = Math.atan2(b, a) * 180 / Math.PI;
L（明度 0-1）、C（彩度 0-0.4 程度）、h（色相 0-360°）。実用的には L と C を固定したまま h だけ動かせば、知覚的な明るさが保たれたまま色相だけ変わる。
カラーハーモニー
古典的な配色理論は色相角度の操作でしかない:
complementary: h + 180
triadic: h + 120, h + 240
analogous: h ± 30 を連続
HSL でも動くが、OKLCh でやると知覚的に均一で崩れない。
シリーズ
100+ 公開ポートフォリオ シリーズの #89 です。