よつばゲームズ
ノード一覧に戻る

OKLCHカラー

color_oklch

知覚的に均一なOKLCH色空間で色を作ります。グラデーション作成やパレット設計に最適な、人間の目に自然な色指定ができます。

下書き
解説あり

入力ポート

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

出力ポート

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

パラメータ

名前型既定値範囲説明・選択肢
色
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 と異なり、数値の差が見た目の色の差に比例する
  • 同じ明度の色同士を並べると、人間の目にも均一な明るさに見える
  • グラデーション生成時に中間色がくすまない

使用例

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