Color Ramp Generator
Pick a base color and build a shading ramp with perceptually even lightness steps. Warm, cool, or neutral light presets — for pixel art and illustration.
How to use
Pick your base color
This is the mid-tone of the ramp — the color you would use for the flat surface in neutral light.
Set step count
Choose 3–9 steps. Pixel art typically uses 4–6 shades per surface.
Choose a light preset
Warm light shifts shadows toward orange/amber. Cool light shifts them toward blue. Neutral keeps the hue.
Fine-tune hue shift
The slider controls how many degrees the shadow hue drifts from the base hue. Common in classic pixel art.
Why OKLCH for ramps?
HSL-based ramps often appear uneven because HSL's lightness is not perceptually uniform. OKLCH uses a perceptually linear lightness channel (L), so equal numeric steps produce equal perceived brightness jumps — which is critical for smooth sprite shading.
The chroma (C) channel independently controls colorfulness, so you can desaturate shadows and highlights without accidentally affecting their perceived brightness.