Hue-shifted shading
Shading that moves toward cool hues in shadow and warm hues in light, instead of making one base color only darker or lighter.
See it
What it is
Hue-shifted shading changes hue along with lightness: shadows lean toward a cool blue or violet, while highlights lean toward a warm yellow or orange. Simply mixing a base color with black and white often makes a flat, lifeless ramp. Moving around the color wheel keeps the shaded form colorful and separates light from shadow more clearly.
Impressionist painters often built shadows from blues and violets rather than black, as Monet did across the Haystacks series, and the same idea is common in pixel art, cel shading, and stylized illustration. Reach for it when an icon, character, game sprite, or data illustration needs depth without aiming for neutral realism.
Gotcha: cool shadows and warm highlights are an art direction, not a law of physics. The environment, reflected light, and light source determine real shadow color. Keep the rotation modest, check every step in context, and avoid forcing all materials toward the same blue shadow if the scene calls for something else.
Ask AI for it
Generate a seven-step hue-shifted shading ramp from the base color using CSS oklch() and color-mix(). Lower OKLCH lightness toward the shadow end while rotating hue no more than 25 degrees along the shorter path toward OKLCH hue 265 for blue-violet, and raise lightness toward the highlight end while rotating no more than 20 degrees along the shorter path toward OKLCH hue 85 for yellow-orange. Keep chroma from collapsing in the middle steps, gamut-check every result for sRGB, expose the seven colors as CSS custom properties, and apply them to a cel-shaded sphere so each plane is easy to compare.