従来のsRGBやHSLでは、色相を変えると人間の目に映る明るさ（知覚明度）がバラバラになり、コントラスト比計算が狂う致命的な欠点がありました。
最新CSS標準である「OKLCH色空間」は、人間の視覚認知に完全に一致する均等な明度カーブを持ち、iPhoneやMacのDisplay P3広色域の鮮やかさを100%活かせます。Tailwind CSS v4標準の11階層スケール（50〜950）を一発生成し、白文字・黒文字それぞれのアクセシビリティ（WCAG 2.2 AA/AAA・APCA）を全段階で一括判定します。
1 ベースカラー（ブランドカラー）指定
2 パレット曲線の微調整
🌈 50〜950 デザイントークンスケール ＆ コントラスト比
各階層の白文字・黒文字に対するWCAG 2.2（AA/AAA）および最新APCA知覚コントラスト
| 階層 | カラー見本 | Hex / OKLCH | 白文字 (#fff) | 黒文字 (#000) | 推奨用途 |
|---|
📱 デザイントークン UI適用ライブプレビュー
アクセシブルなUIコンポーネント設計
OKLCHパレットから自動抽出されたボタンとタグ。背景とテキストのコントラスト比が常に保証されます。
ダークモードでの高視認性維持
暗い背景上でも色相の美しさを損なわずに白黒テキストの可読性（APCA Lc 60以上）を担保。
🖥️ プロのWeb/UIデザイナー愛用！高精度カラー＆アクセシビリティ機材
Amazonおすすめ商品『UIデザインの教科書［マルチデバイス時代のインターフェース設計］』
階層化されたタイポグラフィ、カラーシステム、アクセシビリティの根本原則をわかりやすく解説した必携書。
EIZO FlexScan 27インチ 4K カラーマネジメント液晶モニター
WebおよびUIデザインで正確な色相・グラデーション・明度差を等倍で確認できるプロ向け高精細ディスプレイ。
Datacolor SpyderX Pro ディスプレイキャリブレーション測色センサー
モニターの経年劣化による色ズレを1クリックで補正。チーム全員で同一のカラープロファイルを厳密に共有。
【OKLCH UIデザインシステム カラー仕様書】
Goroneko Design Tokens (exp267 / exp036進化版)
■ ベースカラー情報
■ 50〜950 デザイントークン仕様 ＆ アクセシビリティ適合マトリクス
| 階層 | Hex | OKLCH定義 | 白文字比率 | 黒文字比率 | 推奨用途 |
|---|
■ WCAG 2.2 / APCA 適合ガイドライン
・本文テキスト（通常サイズ16px未満）: WCAG AA 4.5:1以上、APCA Lc 60以上必須。
・見出し・大文字（18.5px太字以上）: WCAG AA 3.0:1以上、APCA Lc 45以上。
・ボタン・入力フォーム枠線: WCAG 3.0:1以上、APCA Lc 30以上。
❓ OKLCHカラーパレット ＆ アクセシビリティ FAQ
Q. OKLCHは古いブラウザでも表示できますか？
現在、Chrome, Safari, Edge, Firefoxのすべての主要モダンブラウザ（2023年以降のバージョン）でOKLCHは標準サポートされています。古い環境に対応する場合も、本ツールが出力するHexコードをフォールバックとして併記することで完全に安全に運用できます。
Q. 50〜950のどの階層をボタンや文字に使うべきですか？
一般的に、ライトモードの「塗りつぶしボタン（Primary Button）」には500または600（白文字がWCAG AAA適合）を用い、「薄い背景（Soft Badge/Alert）」には50または100（黒文字が適合）を用います。ダークモードでは400〜500が最も高いコントラストと視認性を発揮します。
Q. Tailwind CSS v4でこのパレットを使うにはどうすればいいですか？
Tailwind v4ではJavaScript設定ファイル不要で、メインのCSSファイル内に @theme { --color-brand-500: oklch(...); } のように直接記述するだけで、bg-brand-500 や text-brand-600 などのクラスが即座に使えるようになります。