Color OKLCH
Create a color using the perceptually uniform OKLCH color space. Lightness, Chroma, and Hue axes provide predictable color differences, ideal for gradients and palette design.
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 | 不透明度 |
Technical Details
- カラーピッカーと L/C/H/A スライダーのbidirectional sync
- ピッカーでColorを変更 → RGB→OKLCH 変換して L/C/H/A がautomatically updated
- L/C/H/A スライダーを変更 → OKLCH→RGB 変換してピッカーがautomatically updated
- 内部で OKLCH → OKLab → LMS → 線形RGB → sRGB の変換チェーンで Color 型に変換
- 全パラメータが 📌 Can be promoted to input pin
- CSS Color Level 4 で採用されている最新のColor空間
OKLCHとは
- O = Oklab ベース、L = 明度、C = 彩度、H = Color相
- RGB や HSV と異なり、数値の差が見た目のColorの差に比例する
- 同じ明度のColor同士を並べると、人間の目にも均一な明るさに見える
- グラデーション生成時に中間Colorがくすまない
Usage Examples
- 知覚的に均一なグラデーションを作成
- パレットのColor間の距離が視覚的に等間隔になるように設計
- 明度を保ったままColor相だけ変更するアニメーション
💡 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 で採用されている最新の色空間