Color OKLCH
知覚的に均一な OKLCH 色空間で色を作るノードです。グラデーションやパレット設計に最適。
intermediate
Since P00
Output Ports
Color
OKLCHから変換された色（RGBAとして出力）
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| Color | Color | 赤 (1,0,0,1) | カラーピッカーで色を選びます。📌 で外部 Color 入力可能 |
| L | Float | 50 | 明度（知覚的に均一：+10%は常に同じ明るさの変化に見える） |
| C | Float | 0.2 | 彩度 / Chroma（0 = グレー、~0.4 = 最も鮮やか） |
| H | Float | 0 | 色相（知覚的に均一な色相環） |
| A | Float | 100 | 不透明度 |
技術詳細
- カラーピッカーと L/C/H/A スライダーの双方向同期
- ピッカーで色を変更 → RGB→OKLCH 変換して L/C/H/A が自動更新
- L/C/H/A スライダーを変更 → OKLCH→RGB 変換してピッカーが自動更新
- 内部で OKLCH → OKLab → LMS → 線形RGB → sRGB の変換チェーンで Color 型に変換
- 全パラメータが 📌 入力ピン化可能
- CSS Color Level 4 で採用されている最新の色空間
OKLCHとは
- O = Oklab ベース、L = 明度、C = 彩度、H = 色相
- RGB や HSV と異なり、数値の差が見た目の色の差に比例する
- 同じ明度の色同士を並べると、人間の目にも均一な明るさに見える
- グラデーション生成時に中間色がくすまない
使用例
- 知覚的に均一なグラデーションを作成
- パレットの色間の距離が視覚的に等間隔になるように設計
- 明度を保ったまま色相だけ変更するアニメーション
💡 Tips
- •カラーピッカーと L/C/H/A スライダーの**双方向同期**
- •ピッカーで色を変更 → RGB→OKLCH 変換して L/C/H/A が自動更新
- •L/C/H/A スライダーを変更 → OKLCH→RGB 変換してピッカーが自動更新
- •内部で OKLCH → OKLab → LMS → 線形RGB → sRGB の変換チェーンで Color 型に変換
- •全パラメータが 📌 入力ピン化可能
- •CSS Color Level 4 で採用されている最新の色空間