Gradient palette generator
Turn two to five colors into a smooth gradient palette with 3 to 20 even steps. Choose the color space the steps are worked out in, see the gradient as a bar, and copy the steps as a HEX list or the gradient as a CSS linear-gradient(). Free, in your browser, and nothing is sent anywhere.
How to make a gradient color palette
- 1Set the colors of "Stop 1" and "Stop 2"
- 2Use "Add a stop" for up to five colors
- 3Drag "Steps" to the number of colors you need
- 4Copy the HEX list or the CSS line
- An even run of colors from your first stop to your last
How the steps are made
- Up to five stops.Run from blue to pink, or from dark through a bright middle color to light
- Steps that look even.Mixed in OKLab by default, which keeps the middle steps brighter than sRGB does
- Nothing is sent anywhere.The steps are worked out by your browser, on your own device
What you can do
- Type each stop as #hex, rgb(), hsl(), lab(), oklch(), a CSS color name or a Tailwind name, or choose it with the color picker
- Use two to five stops, with "Add a stop" and "Remove the last stop"
- Choose from 3 to 20 steps. The first and the last step are your outer stops, and the stops are spread evenly
- Mix in "OKLab (even steps to the eye)", OKLCH, CIE Lab, "sRGB (like most design tools)" or "Linear sRGB (like mixing light)"
- Copy every step as HEX, "Copy as HEX list", or copy the CSS line, such as linear-gradient(in oklab, #0ea5e9, #f43f5e)
Good to know
- The tool opens with #0EA5E9 and #F43F5E. With 7 steps in OKLab the middle step is #AF84A6. In sRGB it is #8172A4, grayer and darker
- A new stop starts as white. Change it to the color you want
- Only the last stop can be removed. To take out a middle color, change the stops so the colors move up
- The CSS line uses your stops with the color space you chose, so the browser draws the same gradient
Questions
How do I make a gradient palette from two colors?
Set the two stops, pick the number of steps and copy the result. The tool works out the colors in between, evenly spaced, and shows them as a bar and as swatches.
Why does the middle of my gradient look gray?
Mixing in sRGB takes the straight line between two colors, and halfway that line often passes through gray. OKLab, the preset, keeps the middle steps brighter.
Can I use the gradient in CSS?
Yes. Copy the CSS line, a linear-gradient() with the color space written in it. For a design tool, copy the HEX list instead.
Are my colors sent anywhere?
No. The gradient is worked out by your browser on your own device. No request is made with your colors.
More tools in Web & code
That page doesn't exist. Search or drop a file below to find the tool you need.
One site for every file job. What’s yours?
Stop hopping between converter sites. Pick from 410+ tools, or a recipe that chains several.
- Files Stay On Your Device
- No watermark
- Works offline
Drop a file here
A pasted file works too.
or search for a tool
Open an app
From “ugh, this file” to done, in three steps.
- Drop it, or pick a task
No file? Search for what you need. Files are processed on your device, not uploaded for processing.
- Pick what you want
Smaller, another format, signed, merged. One click, no settings to study first.
- Make it a recipe
Need three steps in a row every week? Chain them once and run the same recipe next time.
One approved toolbox for the whole team.
In offices, on building sites and in agencies, teams handle sensitive files all day. ToolRecipe gives everyone the same tools and the same recipes, and the files are processed on each person's own computer.
- Files are processed on the employee's device
- Company recipes everyone runs the same way
- One place instead of ten converter sites