Blend two or three colors, see every step in between, and copy the codes.
It blends two colors, or three, and shows every step between them. The 50/50 mix sits at the top with its HEX code, and the full row of steps sits underneath. You can mix in OKLab, a color space built around how people see lightness, or in plain RGB. OKLab is the default.
RGB mixing averages the three channel numbers. Those numbers aren't spaced the way your eye sees brightness, so the midpoint often comes out darker or grayer than you expect. OKLab, published by Björn Ottosson in 2020, stores a color as lightness plus two color axes, and equal steps in it look close to equal to the eye.
| Colors | RGB mix | OKLab mix |
|---|---|---|
#FF0000 + #00FF00 | #808000 | #D0A800 |
#0000FF + #FFFF00 | #808080 | #6CABC7 |
Red and green average to a dark olive in RGB, darker than both starting colors. In OKLab the midpoint is a gold whose lightness sits halfway between them. Blue and yellow give flat gray in RGB and a soft sky blue in OKLab. CSS can run the same kind of blend in the browser with color-mix(in oklab, #ff0000, #00ff00).
Mix colors you found with the color picker or converted with the HEX to RGB converter. Then test text on your blend with the contrast checker, build lighter and darker versions with the tint and shade generator, or find matching hues on the color wheel and in the palette generator.
On screen, the halfway color depends on the space you mix in. Red #FF0000 and blue #0000FF give #800080 in RGB and #8C53A2 in OKLab. Screen colors mix as light, unlike paint, so blue and yellow don't make green here. RGB gives gray #808080 and OKLab gives #6CABC7.
RGB values are gamma encoded, so the average of two sets of numbers isn't the color halfway between them to your eye. Complementary pairs such as blue and yellow cancel out to flat gray, and many other pairs come out darker than both ends. OKLab averages lightness on its own axis, so the steps stay even.
OKLab is a perceptual color space that Björn Ottosson published in 2020. It describes a color with a lightness value, L, and two color axes: a runs from green to red and b from blue to yellow. Equal distances in OKLab look roughly equal, and modern CSS supports it through oklab() and color-mix().
Tick Color C. The row then runs from Color A through Color B to Color C, and the large swatch shows an equal mix of all three. With an odd number of steps, Color B lands exactly in the middle. Copy the row as HEX codes or as CSS variables for a gradient or palette.
Click Copy CSS variables to get a :root block with one variable per step, named --mix-1, --mix-2 and so on. Paste it into your stylesheet and use a step with var(--mix-3). For a single value, click its swatch and paste the HEX code wherever you need it.
Pick a Zaps template for your next post, story or reel, add your photos and match it to your palette.