Gradient Palette Maker
Build harmonious N-step gradients between two colors.
About the Gradient Palette Maker
The Gradient Palette Generator produces a smooth interpolation between two colors, returning N intermediate steps plus the CSS linear-gradient() declaration that reproduces the gradient in any web page. This is the workhorse tool for designing multi-stop gradients for buttons, hero backgrounds, and data-visualization color ramps.
The mathematical core is linear interpolation: c[i] = c1 + (c2 - c1) * (i / (N - 1)), applied per channel. For an 8-step gradient, the step at index 3 sits 3/7 of the way from the start color to the end color, in every channel simultaneously. The result is a perceptually smooth transition — provided the start and end colors are perceptually close.
The tool offers three interpolation spaces. Linear RGB (the default) interpolates each channel directly, which is the most common choice and matches what CSS linear-gradient() does internally in most browsers. HSL interpolation rotates hue while interpolating saturation and lightness, which avoids the muddy mid-tones that linear RGB produces when interpolating between complementary colors. HSL shortest-arc interpolation chooses the shorter of the two possible hue rotations, preventing the gradient from taking the long way around the color wheel.
For designers transitioning to modern CSS, the OKLCH interpolation in color-mix() (CSS Color 5) and the interpolation-method argument to linear-gradient() (CSS Images 4) offer perceptually uniform results. This tool’s HSL mode approximates that behavior in browsers that do not yet support the new syntax.
How It Works
For linear RGB interpolation, each of the three channels (R, G, B) is interpolated independently. The formula for step i out of N total steps is: r_i = round(r1 + (r2 - r1) * (i / (N - 1))), and similarly for green and blue. The round() call snaps to the nearest integer in [0, 255] because sRGB channels are 8-bit.
HSL interpolation requires converting both colors to HSL, then interpolating hue, saturation, and lightness separately, then converting back. The complication is hue wraparound: hue is a 0-360 degree circle, so interpolating from 350 degrees to 10 degrees can go forward through 360 (a 20-degree step) or backward through 180 (a 340-degree step). The ‘HSL shortest arc’ mode picks the shorter direction; plain HSL mode always interpolates in the positive (clockwise) direction.
The HSL-to-RGB conversion uses the W3C hue2rgb helper function. When saturation is zero, all three channels equal lightness (gray). Otherwise, two intermediate values p and q are computed, and each channel is interpolated piecewise over one of six hue sub-ranges (0-60, 60-120, 120-180, 180-240, 240-300, 300-360).
The output CSS is a standard linear-gradient(to right, ...) declaration listing all N colors as stops. Pasted into a CSS file, it produces the exact same gradient the tool previewed. For diagonal or radial gradients, change to right to to bottom right or use radial-gradient().
Worked Examples
From #3366CC (blue) to #FF6B6B (coral) in 8 steps with linear RGB: the intermediate steps pass through a muddy purple-gray around step 4. This is the classic ‘linear RGB gradient between complementary colors looks bad’ problem.
Same two colors with HSL shortest-arc interpolation: the hue rotates from 220 degrees (blue) to 4 degrees (coral) by going backward through 180, 140, 100, 60, 20 degrees — passing through teal, green, yellow, and orange. The result is a rainbow-like gradient, which may or may not be what you want.
From #0A4F3A (forest green) to #FFFFFF (white) in 5 steps with linear RGB: produces a clean progression of progressively lighter greens, no muddy midpoint. Linear RGB is fine when both colors share similar hues.
From #FF6B6B (coral) to #FFEB3B (yellow) in 6 steps with HSL interpolation: hue moves from 0 to 54 degrees, producing orange-gold intermediates that match what a designer would expect. Linear RGB would produce a similar result here because both colors are warm and high-luminance.
When to Use This Tool
- Generating a multi-stop gradient for a hero section background that matches a brand’s primary and accent colors.
- Building a color ramp for a heatmap or choropleth map (use 9-12 steps for data viz).
- Creating a button hover gradient that smoothly transitions between two states.
- Drafting a brand-color gradient for a logo or marketing page without paying for a dedicated gradient tool.
- Generating accessible color stops for a progress bar or range slider track.
- Prototyping the visual style for a CSS-only progress indicator or animated background.
- Producing a palette of related tints to use as background, surface, and hover colors in a component library.
Limitations & Disclaimer
The generator interpolates in sRGB using linear RGB or HSL math. Linear RGB produces muddy midpoints for complementary color pairs; HSL produces perceptually uneven steps because HSL hue is not perceptually uniform. For perceptually smooth gradients, use CSS Color 5 color-mix(in oklch, ...) or the CSS Images 4 interpolation-method argument, supported in Chrome 111+, Firefox 113+, and Safari 16.2+. Wide-gamut colors (Display P3, Adobe RGB) are not exposed; the tool outputs sRGB only. See our disclaimer for full terms.
Frequently Asked Questions
Why does my gradient look muddy in the middle?
Linear RGB interpolation between complementary colors (red and green, blue and orange) passes through a desaturated gray midpoint. To avoid this, switch the interpolation space to HSL or HSL shortest-arc, or use OKLCH via CSS <code>color-mix()</code> in modern browsers (Chrome 111+, Firefox 113+, Safari 16.2+).
What is the difference between linear RGB and HSL interpolation?
Linear RGB interpolates each channel directly, producing smooth gradients when both colors share a similar hue but muddy midpoints for complementary pairs. HSL interpolation rotates hue while changing saturation and lightness, producing more vivid but sometimes ‘rainbow’-like gradients. For perceptual smoothness, OKLCH is the best choice.
How many steps do I need?
For a smooth-looking gradient rendered as a single CSS <code>linear-gradient()</code> with all stops, 2 to 4 steps are usually enough — the browser interpolates between them. For a discrete palette (used in data visualization), use 5 to 12 steps. For a heatmap ramp, 9 steps is the convention popularized by D3.js’s <code>d3.interpolateRdYlBu</code>.
Can I export the palette to Figma or Sketch?
Click any color chip row in the output to copy the hex codes as a space-separated list. Paste the list into Figma’s local styles panel or Sketch’s document colors to import the palette. Figma’s color picker also accepts hex strings one at a time.
Why does the CSS linear-gradient look slightly different from the preview?
The preview uses discrete color chips (one div per step), while CSS <code>linear-gradient()</code> interpolates continuously between stops. To make CSS produce a discrete gradient that matches the preview, use <code>linear-gradient(to right, #c1 0%, #c1 12.5%, #c2 12.5%, #c2 25%, ...)</code> with each stop repeated at both endpoints of its band.
What is the maximum number of steps?
The tool allows up to 20 steps. Beyond that, the discrete color chips become too narrow to distinguish, and CSS gradients rarely need more than 8-12 stops. For continuous gradients, fewer stops with browser-native interpolation is more efficient.
Last updated: September 9, 2026 · Author: HT99 Tools Editorial Team