Blend Colors
Blend two colors to find the exact shade between them. Pick or type two colors, set how much of each to use, and choose how they are blended: a plain sRGB average, linear RGB, or the perceptual OKLab space. You get the blended color as hex, RGB, HSL, HSV, OKLCH and CMYK, the matching CSS color-mix(), and an evenly spaced set of steps between the two colors that you can copy as a palette.
Colors
Hex, rgb(), hsl(), oklch() and color names all workBlended color
Steps between the colors
Click a step to copy its hex code.
About this tool
How it works
Blend Colors works out the color that lies between two others. Set the ratio with the slider, or use the 25%, 50% and 75% presets: 0% is color 1, 100% is color 2, and 50% is an even mix. The strip under the result shows every blend from one color to the other, with a marker at your ratio.
Three color spaces
How a blend looks depends on the color space it is calculated in.
- sRGB averages the red, green and blue values. It matches most color tools and CSS
color-mix(in srgb, …), but a mix of far-apart hues such as blue and orange can look grey in the middle. - Linear RGB mixes light the way it physically adds up and keeps blends brighter.
- OKLab mixes the way we perceive color, so the steps look evenly spaced, and it's usually the best choice for gradients and palettes.
Entering colors
Colors can be entered as hex, rgb(), hsl(), oklch() or any of the 148 CSS color names, picked with the color picker, or set with the R, G and B fields.
Remembered and related
Your colors and settings are remembered in your browser for next time. For alpha, hue interpolation and every color-mix() color space, try the CSS color-mix() calculator.
Frequently Asked Questions
What is the difference between blending in sRGB, linear RGB and OKLab?
sRGB averages the red, green and blue values directly, which is what most color tools and the CSS color-mix(in srgb, …) function do. It's simple, but blends between very different hues can look muddy or darker in the middle. Linear RGB first undoes the gamma curve, so the mix behaves like real light and stays brighter. OKLab is a perceptual color space: equal steps look equally different to the eye and the middle of the blend keeps its lightness, which usually gives the most natural gradients.
How do I use the blended color in CSS?
Copy any of the formats, such as the hex code or rgb(), and paste it into your stylesheet. You can also copy the color-mix() expression, which makes the browser work out the same blend itself. It's supported in all current browsers, and handy when the two colors are CSS variables.
What are the steps for?
The steps are evenly spaced blends from color 1 to color 2. Use them as a ready-made palette, for hover and active shades, for chart colors or as gradient stops. Click a step to copy it, or copy all of them as a hex list, CSS or Sass variables, a JSON array or a CSS gradient.
Why is HSV not a CSS format?
CSS doesn't have an hsv() function. HSV (also called HSB) is used by design tools such as Photoshop, Figma and many color pickers, so it's included for entering the color there. For CSS, use hex, rgb(), hsl() or oklch().