よつばゲームズ

Color OKLCH(OKLCHカラー)

知覚的に均一な OKLCH 色空間で色を作るノードです。グラデーションやパレット設計に最適。

中級
Since P00

出力ポート

Color(カラー)

OKLCHから変換された色（RGBAとして出力）

Color

パラメータ

名前型デフォルト説明
Color色Color赤 (1,0,0,1)カラーピッカーで色を選びます。📌 で外部 Color 入力可能
LLFloat50明度（知覚的に均一：+10%は常に同じ明るさの変化に見える）
CCFloat0.2彩度 / Chroma（0 = グレー、~0.4 = 最も鮮やか）
HHFloat0色相（知覚的に均一な色相環）
AAFloat100不透明度

技術詳細

  • カラーピッカーと 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 と異なり、数値の差が見た目の色の差に比例する
  • 同じ明度の色同士を並べると、人間の目にも均一な明るさに見える
  • グラデーション生成時に中間色がくすまない

使用例

  • 知覚的に均一なグラデーションを作成
  • パレットの色間の距離が視覚的に等間隔になるように設計
  • 明度を保ったまま色相だけ変更するアニメーション

💡 ヒント

  • •カラーピッカーと 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 で採用されている最新の色空間
ノード一覧に戻る
Color OKLCH (OKLCHカラー) — PixPipeline ノード解説