Gradient Palette Maker
Build harmonious gradients for design and UI projects.
About the Gradient Palette Maker
The Gradient Palette Generator produces an N-step color ramp between two endpoints, interpolating linearly through sRGB space. Pick a start color, an end color, and how many intermediate steps you want (2 to 20), and the tool returns the full list of HEX codes plus a ready-to-paste linear-gradient() CSS declaration. This is the fastest way to build a 50-900 ramp for a design system, generate a chart-friendly categorical palette, or prototype a hero-section background gradient.
Designers and developers need gradient palettes more often than they realize. Tailwind color scales (gray-50 through gray-900) are essentially 10-step gradients. Data visualization libraries like D3 expect continuous color scales that interpolate between two or more stops. CSS background gradients need evenly spaced color stops for smooth visual transitions. And brand guidelines often define a 5-7 step ‘tint’ ramp derived from a primary color and white.
The generator interpolates in sRGB space, which is the same behavior as CSS linear-gradient() itself — what you see in the swatches will match what your browser renders in production. For perceptually smoother gradients (especially between very saturated colors), OKLab interpolation is preferred, but sRGB is the most predictable and most widely supported.
How It Works
Linear interpolation in sRGB space is conceptually simple: for each step i out of n total, compute the parameter t = i / (n - 1) (ranging from 0 at the first step to 1 at the last step), then compute each channel as start + (end - start) × t. The result is rounded to the nearest integer to produce a valid 0-255 channel value, then converted back to HEX.
This matches the default behavior of CSS linear-gradient() and the canvas createLinearGradient method. The browser interpolates RGB channels linearly between color stops, which is why gradients between very saturated complementary colors (like red and green) often pass through a muddy brown in the middle — the average of pure red (255,0,0) and pure green (0,255,0) is (128,128,0), which is olive.
For perceptually uniform gradients, you would convert both endpoints to a perceptually uniform color space like OKLab or CIE Lab, interpolate linearly there, and convert back. This produces gradients that appear smooth to the eye even between saturated complementary colors. The current generator uses plain sRGB interpolation to match CSS behavior, but the output HEX list can be fed into any tool that does its own interpolation in another space.
The generated CSS linear-gradient(90deg, ...) declaration lists every step as an explicit stop. You can simplify this in your stylesheet to just two endpoints (linear-gradient(90deg, #0A4F3A, #FAF7F0)) and the browser will interpolate automatically — the explicit stops are useful only when you need predictable colors at each step (e.g., for a chart axis or design tokens).
Worked Examples
Take the default #0A4F3A forest green to #FAF7F0 cream across 5 steps. The generator returns #0A4F3A, #497E68, #89AC95, #C8D9C2, #FAF7F0. Notice how each step is roughly halfway between the previous and the next in RGB space. The result reads as a natural tonal ramp from deep forest to pale cream.
Now try a more extreme gradient: pure red #FF0000 to pure green #00FF00 with 7 steps. The middle swatches pass through olive and brown — #FF0000, #D92D00, #B35500, #8C7E00, #66A600, #40CF00, #00FF00. This muddy middle is the well-known “dark band” artifact of sRGB interpolation. For a smooth red-to-green perceptual gradient you would need to interpolate through yellow in HSL or use OKLab interpolation.
For a design system ramp, try #1E40AF to #EFF6FF across 10 steps — this is essentially the Tailwind blue-900 to blue-50 ramp. The generator produces 10 evenly spaced shades that you can copy into your CSS variables or Tailwind config as a custom color scale.
For a hero-section background, pick #0A4F3A and #0E7C5A with 3 steps and copy the linear-gradient(90deg, ...) output directly into your CSS. Subtle two-stop gradients like this add depth without overwhelming the layout.
When to Use This Tool
- Generating a 50-900 color scale for a design system based on a single brand color.
- Producing continuous color palettes for D3.js charts that interpolate smoothly between two hues.
- Building hero-section or card backgrounds with subtle multi-stop gradients.
- Generating accessible tint and shade variants of a brand color for hover/active states.
- Creating heatmap color scales (e.g., white to red for intensity visualizations).
- Generating color stops for SVG
<linearGradient>or<radialGradient>elements. - Prototyping color transitions before committing to a final palette in Figma or Sketch.
Limitations & Disclaimer
This generator interpolates linearly in sRGB color space, which matches CSS linear-gradient() behavior but produces muddy midpoints between saturated complementary colors. For perceptually uniform gradients, use a tool that interpolates in OKLab or CIE Lab. The maximum number of steps is 20; for longer ramps (e.g., a 50-step heatmap) generate in batches and concatenate. Alpha-channel interpolation is not supported — for translucent gradients use CSS linear-gradient directly with rgba() stops. The output HEX codes are rounded to 8-bit per channel, which can cause minor banding in very long gradients. See our disclaimer for full terms.
Frequently Asked Questions
Why does the gradient between complementary colors look muddy?
sRGB interpolation averages each channel independently, so red (255,0,0) to green (0,255,0) passes through olive (128,128,0). For smooth perceptual gradients between saturated colors, you need to interpolate in a perceptually uniform space like OKLab or CIE Lab, or route through a midpoint hue in HSL.
Can I generate gradients with more than 2 endpoints?
Not directly in this version. For multi-stop gradients (e.g., red to yellow to green), generate each segment separately and concatenate the resulting HEX lists. A future version may support multi-stop input.
Is the output the same as what CSS linear-gradient renders?
Yes, when using RGB color stops without alpha. CSS uses premultiplied alpha for transparent gradients, which differs slightly from naive interpolation. The generated gradient stops match what the browser produces for opaque color stops.
How many steps should I use for a design system ramp?
Industry standard is 9-11 steps per color (e.g., Tailwind uses 10 steps from 50 to 950). Fewer than 7 steps often lacks intermediate tones for hover/active states; more than 12 becomes hard to name and use consistently.
Why are my gradient colors slightly different in Photoshop?
Photoshop uses color-managed interpolation with ICC profiles. This generator works in plain sRGB. The difference is usually only a few RGB values per channel but can be visible in saturated gradients. For print production, use a color-managed tool.
Can I copy the gradient as CSS or SCSS?
Yes — the output includes a ready-to-paste <code>linear-gradient(90deg, ...)</code> CSS declaration. To use it in SCSS, assign it to a variable like <code>$brand-gradient: linear-gradient(90deg, #0A4F3A, #FAF7F0);</code>.
Last updated: July 21, 2026 · Author: HT99 Tools Editorial Team · Reviewed by: HT99 Tools Editorial Team