Step Interpolator
Generate intermediate colors between two colors with different interpolation methods
Generates a series of precise intermediate steps between two colors.
rgb(30, 64, 175)
rgb(249, 115, 22)
Controls how colors are distributed. Linear = even spacing. Ease In = concentrated at start. Ease Out = concentrated at end.
Gradient Preview
Compare all spaces:
Interpolated Steps (7)
Perceptual Uniformity (ΔE)
Shows the perceptual distance between consecutive steps. Lower variance = more uniform gradient.
Export
background: linear-gradient(to right, #1e40af, #69469a, #8f4d84, #ae556e, #c85f57, #e1693d, #f97316);💡 Color Space Guide
RGB: Direct channel mixing. Can produce muddy midtones between complementary colors.
HSL: Interpolates through the hue wheel. Best for rainbow-like transitions.
LAB: Perceptually uniform (CIE LAB). Produces the most visually balanced transitions. Recommended.
How it works
Color interpolation generates intermediate steps between two colors, useful for gradients, design scales, and color tokens.
Interpolation methods
- RGB: Linear interpolation in RGB space. Simple but can produce muddy midtones between complementary colors (e.g., red→cyan passes through gray).
- HSL: Interpolates through the hue wheel. Ideal for rainbow-like transitions, but may create unexpected saturation spikes.
- LAB (CIE L*a*b*): Perceptually uniform — steps appear equidistant to the human eye. Recommended for most use cases.
🎯 Easing curves
Easing curves control how colors are distributed between the endpoints:
- Linear: Even spacing. Ideal for design scales (Tailwind 50-950).
- Ease In: Colors are concentrated near the start color. Useful for smooth transitions from a background.
- Ease Out: Colors concentrate near the end color. Perfect for "landing" on an accent.
- Ease In-Out: Concentration at both ends with a quick transition in the center. Mimics how CSS animates colors.
📊 Perceptual Uniformity (ΔE)
The ΔE indicator measures the perceptual distance between consecutive steps using CIE LAB. A gradient with green, even bars (≥80%) is visually balanced. Red bars indicate perceptual "jumps."
💡 Practical Use Cases
Case 1: Complete Tailwind scale
Generate a 50→950 scale from #3B82F6 (blue) to #1E3A5F (dark).
→ 11 steps in LAB mode + linear easing
→ Export with the "Tailwind" button to paste directly into your config
Case 2: Hero section with smooth gradient
Transition from #6366F1 to #EC4899.
→ LAB with 15-20 steps for imperceptible transition
→ Use "Ease In-Out" to soften the endpoints
Case 3: Accessible heat map
Color scale for data visualization (low → medium → high).
→ 5-7 discrete steps in LAB mode
→ Use blue→orange instead of green→red (color-blind accessible)
→ Verify ΔE between steps is ≥ 10 for distinguishability
Case 4: CSS keyframe animation
Generate intermediate values for a color animation between two states.
→ HSL for circular hue transitions
→ "Ease In-Out" mimics the CSS cubic-bezier curve
→ Export as JS Array for keyframes
⚡ Pro tip
If the ΔE indicator shows low uniformity, try switching color spaces. LAB usually gives the best uniformity, but HSL may be better for pure hue transitions (e.g., red→blue).