Color OKLCH

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

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

Parameters

Name	Type	Default	Range	Description / Options
色 color	Color	[1,0,0,1]	—	カラーピッカーで色を選びます。選んだ色のL/C/Hが下のパラメータに反映されます。
L lightness	Float	63	0–100 / step 1	明度（0% = 黒、100% = 白）。知覚的に均一：+10%は常に同じ明るさの増加に見えます。
C chroma	Float	0.258	0–0.4 / step 0.001	彩度 / 色の鮮やかさ（0 = グレー、~0.4 = 最も鮮やか）。0に近いとグレーになります。
H oklch_hue	Angle	29	— / step 1	色相の角度（0°=赤、90°=黄、150°=緑、240°=青、330°=ピンク）。知覚的に均一な色相環です。
A alpha	Float	100	0–100 / step 1	アルファ / 不透明度（0% = 完全に透明、100% = 完全に不透明）

Overview

Creates a color in the perceptually uniform OKLCH color space. Its defining feature is that "raising L by 10 looks equally brighter at every hue," making it the go-to choice for palette design and shading ramps. It also uses the same terms as PixPipeline's lighting nodes, which adjust shadows in OKLCH.

Usage tips

The standard recipe for a shading ramp is to choose a base color, then create the shadow by lowering L, rotating H slightly (±8–15°), and keeping or slightly increasing C. Reverse the changes for highlights. The value of OKLCH is that these operations behave as their parameters suggest.
Its hue wheel differs from HSV. Both put red at 0°, but OKLCH places yellow at 90° and blue at 240°. It is safest to pick a color first, then fine-tune it.
Values near the upper C limit of 0.4 may fall outside the sRGB gamut and are clamped for display. If chroma seems to stop increasing, adjust it together with L.

Related nodes

color_rgb / color_hsv — sibling nodes using other color spaces
oklch_adjust — adjust an image along the same L/C/H axes
palette_adjust_oklch — batch-adjust a palette in OKLCH
surface_light_preview — use OKLCH correction for shadows and highlights

Technical details

Two-way synchronization between the color picker and L/C/H/A sliders
Change the color in the picker → RGB-to-OKLCH conversion automatically updates L/C/H/A
Change an L/C/H/A slider → OKLCH-to-RGB conversion automatically updates the picker
With no Color wire connected, L/C/H/A are authoritative at evaluation time. Picker edits update those channels in the UI.
While using an indexed-color reference, palette edits update L/C/H/A and the output. Manually editing a channel detaches the reference and switches to the current literal color.
Internally converts OKLCH → OKLab → LMS → linear RGB → sRGB, then outputs Color.
Every parameter can be promoted to an input pin 📌. A connected Color input overrides L/C/H/A.
Uses the modern color space adopted by CSS Color Level 4

What is OKLCH?

O = Oklab-based, L = lightness, C = chroma, H = hue
Unlike RGB or HSV, numeric distance is proportional to visible color difference.
Colors with the same lightness look uniformly bright to the human eye.
Intermediate colors do not become muddy when generating gradients.

Examples

Create a perceptually uniform gradient.
Design a palette whose colors are evenly spaced visually.
Animate only the hue while preserving lightness.

Input Ports

Output Ports