概要
知覚均等なOKLCH色空間で色を作るカラーノードです。「Lを10上げれば、どの色相でも 同じだけ明るく見える」のが特長で、パレット設計・陰影ランプ作りの本命です。 PixPipelineのライティング系(影のOKLCH補正)とも同じ言葉で会話できます。
使い方のポイント
- 陰影ランプの作り方の定石: 基本色を決め、影色は「Lを下げ、Hを少し回す(±8〜15°)、 Cは維持か微増」。ハイライトは逆方向。この操作がパラメータ通りに効くのがOKLCHの価値
- 色相環がHSVと違う(0°=赤は同じだが90°=黄、240°=青)。ピッカーで拾ってから 微調整する使い方が安全
- Cの上限0.4付近はsRGBで表現できない色になりうる(表示時にクランプ)。 鮮やかさが頭打ちに感じたらLとの組み合わせを調整する
関連ノード
color_rgb/color_hsv— 別色空間の兄弟ノードoklch_adjust— 画像側を同じL/C/H軸で調整palette_adjust_oklch— パレット側の一括OKLCH調整surface_light_preview— 影・ハイライトのOKLCH補正の使い先
技術詳細
- カラーピッカーと L/C/H/A スライダーの双方向同期
- ピッカーで色を変更 → RGB→OKLCH 変換して L/C/H/A が自動更新
- L/C/H/A スライダーを変更 → OKLCH→RGB 変換してピッカーが自動更新
- Color 入力が未接続なら L/C/H/A が評価値の正本。ピッカー編集時は UI が L/C/H/A も同時更新する
- インデックスカラー参照中はパレット編集が L/C/H/A と出力へ追従する。 L/C/H/A を手動変更すると参照を外し、その時点のリテラル色へ切り替わる
- 内部で OKLCH → OKLab → LMS → 線形RGB → sRGB の変換チェーンで Color 型に変換
- 全パラメータが 📌 入力ピン化可能。Color を接続した場合だけ、 外部 Color が L/C/H/A より優先される
- CSS Color Level 4 で採用されている最新の色空間
OKLCHとは
- O = Oklab ベース、L = 明度、C = 彩度、H = 色相
- RGB や HSV と異なり、数値の差が見た目の色の差に比例する
- 同じ明度の色同士を並べると、人間の目にも均一な明るさに見える
- グラデーション生成時に中間色がくすまない
使用例
- 知覚的に均一なグラデーションを作成
- パレットの色間の距離が視覚的に等間隔になるように設計
- 明度を保ったまま色相だけ変更するアニメーション