Yotsuba Games
Back to Node List

Color OKLCH

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.

Draft
Guide available
The node name and summary are available in English. Port, parameter, and article details are currently shown in Japanese.

Input Ports

NameTypeDescription
パレット
palette
Palette
任意: パレットを接続すると、その色から選べるようになります

Output Ports

NameTypeDescription
カラー
color
Color
作成された色（内部でOKLCHからRGBに変換されます）

Parameters

NameTypeDefaultRangeDescription / Options
色
color
Color
[1,0,0,1]—

カラーピッカーで色を選びます。選んだ色のL/C/Hが下のパラメータに反映されます。

L
lightness
Float
500–100 / step 1

明度（0% = 黒、100% = 白）。知覚的に均一：+10%は常に同じ明るさの増加に見えます。

C
chroma
Float
0.20–0.4 / step 0.001

彩度 / 色の鮮やかさ（0 = グレー、~0.4 = 最も鮮やか）。0に近いとグレーになります。

H
oklch_hue
Angle
0— / step 1

色相の角度（0°=赤、90°=黄、150°=緑、240°=青、330°=ピンク）。知覚的に均一な色相環です。

A
alpha
Float
1000–100 / step 1

アルファ / 不透明度（0% = 完全に透明、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 と異なり、数値の差が見た目の色の差に比例する
  • 同じ明度の色同士を並べると、人間の目にも均一な明るさに見える
  • グラデーション生成時に中間色がくすまない

使用例

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