Color Ramp Generator

Generate pixel-art shading ramps with the hue shifts artists actually use. Highlights drift warm, shadows drift cool. Export straight to Aseprite, GIMP, Krita or Lospec.

Base colors

Ramp 1
#cad5aaHighlight 2
#9ec36fHighlight
#67a93cBase
#367324Shadow
#123a10Shadow 2

Download palette

How pixel art color ramps work

A color ramp is a set of 3 to 9 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

Save them as a style profile, and every sprite and effect you build in the Forge uses the same ramps.