Gradient Palette Builder

Build smooth multi-stop palettes between two colors with RGB, HSL, or OKLCH interpolation.

Controls

Pick endpoints and interpolation.

5

Preview

#667EEA
#6E70DA
#7463C8
#7657B5
#764BA2
background: linear-gradient(to right, #667eea, #6e70da, #7463c8, #7657b5, #764ba2);

Examples

Indigo → purple (OKLCH, 5 steps)

Input
Start: #667eea
End: #764ba2
Interpolation: OKLCH
Steps: 5
Output
#667eea → #6c6dbd → #71669f → #755fae → #764ba2
background: linear-gradient(to right, #667eea, #6c6dbd, #71669f, #755fae, #764ba2);

OKLCH keeps the lightness change smooth, so the intermediate steps look evenly spaced to the eye — not pulled toward gray like an RGB blend would be.

Warm-to-cool via HSL

Input
Start: #ff7e5f
End: #2bd2ff
Interpolation: HSL
Steps: 5
Output
#ff7e5f → #ff7e94 → #d77fff → #7fa3ff → #2bd2ff
background: linear-gradient(to right, #ff7e5f, #ff7e94, #d77fff, #7fa3ff, #2bd2ff);

HSL goes the short way around the hue circle, so the gradient sweeps through magenta/violet instead of dragging through yellow-green at 180° of hue rotation.

About this tool

The Gradient Palette Builder creates smooth multi-stop palettes between two endpoint colors, with a choice of three interpolation spaces: straight RGB, HSL hue-aware, or OKLCH perceptually uniform. The right pick depends on what you are interpolating across — HSL for hue rotations, OKLCH for gradients that should look smooth to the eye, RGB for short low-saturation blends.

Each interpolation mode uses the corresponding function from lib/ColorUtils (generateMixScale, generateMixScaleHsl, generateMixScaleOklch). Hue is always taken the short way around the circle, so the gradient never passes through an unwanted third hue. The result card shows the gradient as a CSS-ready `linear-gradient(to right, ...)` plus each step's HEX value, so you can paste the snippet straight into your stylesheet.

How to use

  1. Pick two endpoints

    Use the Start and End color pickers. The defaults (#667eea → #764ba2) produce a familiar indigo-to-purple ramp.

  2. Choose an interpolation

    Pick RGB (simple), HSL (hue-aware) or OKLCH (perceptually uniform). Each has trade-offs for the kind of blend you are making.

  3. Set the step count

    Drag the Steps slider from 3 to 12. More steps make a smoother-looking strip and give you more tokens to choose from.

  4. Preview and copy the CSS

    The preview shows the gradient as a CSS background. The code block shows the ready-to-paste `background: linear-gradient(to right, ...)` line — click Copy.

Use cases

Designing hero gradients

Pick two brand colors and a number of stops, then paste the generated `linear-gradient` into your CSS for hero sections, cards, or call-to-action backgrounds.

Generating a token ramp

Treat the strip as a 5–12-step design token ramp — each swatch is a copy-ready hex that can be assigned to borders, hover states, or depth levels.

Producing dark-mode transitions

Interpolate between two brand colors with OKLCH to get a ramp whose perceived lightness changes evenly, ideal for dark-mode accent gradients.

Common mistakes

Mistake:Always using OKLCH.

Fix:OKLCH is great for perceptual evenness, but for very desaturated near-grays or short low-chroma blends, RGB interpolation can be visually smoother.

Mistake:Expecting HSL to be perceptually uniform.

Fix:HSL is convenient but not perceptually uniform — two HSL ramps with the same Δh can look very different in lightness. Switch to OKLCH when perception matters.

Mistake:Treating the gradient as the entire brand palette.

Fix:A 5-stop gradient is a transition, not a palette. Derive 5–10 named tokens (e.g. brand-100 … brand-900) from it rather than reusing the gradient stops directly.

Frequently asked questions

References & standards

Related tools

Box Shadow Generator

Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.

Color Blindness Simulator

Simulate color blindness on palettes and images. Compare protanopia, deuteranopia, tritanopia, and more side-by-side.

Color Contrast Checker

Advanced WCAG accessibility compliance checker with color blindness simulation, multiple text sizes, and comprehensive analysis features.

Color Converter

Convert colors between multiple formats (HEX, RGB, HSL, HSV, CMYK, LAB) with color blindness simulation, named colors, and batch processing

Color Extractor

Extract colors from uploaded images by hovering over pixels to get precise color values.

Color Generator

Generate color palettes, analyze colors, and create gradients with this comprehensive color tool.