OKLab Color Inspector Pro
Bjorn OttossonのOKLab色空間に基づくUnity向け知覚的カラー。 濁った中間点なし、暗くしても色相のズレなし、均一な明度ステップ。 CSS Color Level 4とFigmaの背後にある同じ色彩科学。
クイックスタート
using文1つ、セットアップ不要。どのレンダーパイプラインでも動作。
using DawgTools.OKLab; using UnityEngine; // Perceptually uniform lerp (no muddy midpoints) Color midpoint = OKLabColor.LerpOKLab(Color.red, Color.green, 0.5f); // Darken without hue shift Color darker = OKLabColor.AdjustLightness(myColor, -0.15f); // WCAG contrast check float ratio = OKLabColor.WcagContrastRatio(textColor, bgColor); bool passesAA = ratio >= 4.5f; // Auto-pick readable text color Color text = OKLabColor.BestTextColor(backgroundColor); // Generate palette from one accent color Color[] harmony = OKLabPalette.GenerateHarmony(accent, HarmonyMode.Triadic);
HSV/HSLよりOKLabを選ぶ理由
標準的な色空間は知覚的均一性について嘘をつきます。OKLabは嘘をつきません。
| 問題 | HSV/HSL | OKLab |
|---|---|---|
| 青を暗くすると紫に偏る | Yes | No |
| 同じLの黄色と青が同じ明るさに見える | Yes | No |
| 赤から緑への補間で濁った茶色が生成 | Yes | No |
| 50%明度が色相によって大きく変動 | Yes | No |
コアAPI - OKLabColor
静的クラス。すべてのメソッドは副作用のない純粋関数。
色空間変換
| メソッド | 説明 |
|---|---|
RGBToOKLab(Color) | RGBをOKLab (L, a, b)に変換 |
OKLabToRGB(L, a, b) | OKLabをRGBに変換 |
OKLabToRGBSafe(L, a, b) | ガマットクランプで変換（sRGB内に保持） |
補間
| メソッド | 説明 |
|---|---|
LerpOKLab(Color a, Color b, float t) | 知覚的に均一な補間 |
LerpLinearRGB(Color a, Color b, float t) | リニアライトRGB補間 |
調整
| メソッド | 説明 |
|---|---|
AdjustLightness(Color, float delta) | 明度を変更、色相を保持 |
AdjustChroma(Color, float delta) | 彩度を変更、色相と明度を保持 |
GetLightness(Color) | OKLab明度を取得 (0-1) |
GetChroma(Color) | OKLab彩度を取得 |
GetHue(Color) | 色相角度を取得 (0-360) |
アクセシビリティ
| メソッド | 説明 |
|---|---|
WcagContrastRatio(Color fg, Color bg) | WCAG 2.1輝度コントラスト比 |
WcagRelativeLuminance(Color) | WCAG仕様に基づく相対輝度 |
BestTextColor(Color bg) | 最適な可読性のために黒または白を返す |
PerceptualDelta(Color a, Color b) | 知覚的距離（OKLabでのデルタE） |
EnsureMinDelta(Color, Color, float) | 最小分離を保証するバイナリサーチ |
パレットAPI - OKLabPalette
アクセントカラー1つからハーモニー、ランプ、UIテーマを構築。
ハーモニー生成
| モード | 色数 | 説明 |
|---|---|---|
| Complementary | 2 | 色相環の反対 (180度) |
| Triadic | 3 | 等間隔の3色相 (120度間隔) |
| Analogous | 3 | 隣接色相 (30度間隔) |
| Split-Complementary | 3 | 補色を2つに分割 (150度と210度) |
| Tetradic | 4 | 2つの補色ペア (90度間隔) |
ランプ生成
| メソッド | 説明 |
|---|---|
GenerateRamp(Color a, Color b, steps, BlendConstraint) | 制約付き色のブレンド（Free、ConstantHue、ConstantChroma、ConstantLightness） |
GenerateLightnessRamp(Color, steps) | 一定の色相と彩度での暗→明ランプ |
HueRotate(Color, float degrees) | 一定の明度と彩度で色相を回転 |
エディターツール
Color Inspector
Window > DAWG Tools > OKLab Color Inspector
ガンマRGB vs リニアRGB vs OKLab補間の並列比較。
クリック/ドラッグでインタラクティブスライス。Lock LightnessとLock Chromaモード。
ガマットクリッピングインジケーター、WCAGコントラスト表示、知覚デルタメトリクス。
Palette Builder
Window > DAWG Tools > OKLab Palette Builder
OKLCHスライダーとhex入力、ガマット警告。Buildタブ（手動）、Generateタブ
(harmony/ramp/UI theme), Ship tab (WCAG validation matrix, distance warnings).
Export to .hex, .gpl, C# snippet, or ScriptableObject.
ワンクリックUIテーマ生成
アクセントカラーを1つ入力するだけで、背景、サーフェス、テキスト、ボーダー、アクセントバリアントを含む完全な10色UIテーマを取得。 ライトとダークの両方のバリアントを自動生成。 WCAGオートフィックスがAAコントラスト要件を満たすようバイナリサーチで色を調整。
インストール
// Unity Package Manager > Add package from disk // Navigate to package.json and select it // Then import the demo scene: // Package Manager > OKLab Color Inspector PRO > Samples > Import
Requires Unity 2021.3 LTS or newer. 外部依存なし. Works with Built-in, URP, and HDRP render pipelines.