Color Ramp Generator
Generate pixel-art shading ramps with the hue shifts artists actually use — highlights drift warm, shadows drift cool.
Base colors
How pixel art color ramps work
A color ramp is a set of 3–5 colors that represent the same hue at different brightness levels — from the brightest highlight down to the darkest shadow. Pixel artists rarely just lighten or darken a base color linearly; instead they apply deliberate hue shifts to make the lighting feel more natural.
The principle behind this tool: highlights drift warm (toward yellow/orange) and shadows drift cool (toward blue/violet). This mimics how real-world lighting works — warm light sources bounce onto highlight surfaces while blue-tinted ambient sky light fills the shadows. Even a subtle 10–15° hue shift at each step makes sprites feel three-dimensional without adding any extra colors.
For pixel art specifically, keeping your ramp to 5 colors (highlight ×2, highlight, base, shadow, shadow ×2) lets you shade a character sprite across different lighting conditions without blowing up your palette. Engines like Godot and Phaser can swap entire palettes at runtime, so a clean ramp makes it trivial to recolor characters or indicate status effects.
Tips for choosing a good base color
- →Avoid pure gray as a base. Neutral grays produce ramps with no visible hue shift. Start with a color that has at least some saturation — even a slight warm or cool tint gives the ramp more visual life.
- →Mid-range lightness works best. A base color around 40–60% lightness leaves room for both highlights and shadows in the ramp. Very dark or very light bases compress the ramp toward one end and lose contrast.
- →Build multiple ramps for a single sprite. A character in leather armor might use three ramps: warm browns for leather, cool grays for metal, and desaturated skin tones. Copy each as a CSS variable set and paste them into your project as a named palette.
Use these ramps in Spritory
Define them as a style profile and every asset you build — sprites, tilesets, effects — compiles from the same ramps automatically.