Mix two colors
Type a HEX code (3 or 6 digits, with or without #) or use the color picker. The link in your address bar always holds the current mix, so you can share it.
| Color variations | RGB values | HEX values | Readable text |
|---|
Copy the palette
Every shade above, ready to paste.
Start from a Metro color
Click to set the first color; hold Shift (or long-press) to set the second. See all Metro UI colors.
About the color mixer
This tool does what it says: it mixes colors. Choose a color to start with and a color to end with, and the mixer works out every shade in between.
You can enter HEX codes or use the built-in color picker, which covers the entire RGB spectrum — 16,777,216 colors. Each shade comes with both its HEX and RGB values, ready for your design tool, your stylesheet or anywhere else.
There are two ways to blend. RGB mixes the red, green and blue channels in equal steps, which is how this mixer has always worked. Perceptual (OKLab) mixes in a color space built around how people see color, so the steps look evenly spaced and blends between complementary colors stay bright instead of turning muddy in the middle.
How to use the color mixer
- Choose the first color with the color picker, or paste a HEX code if you already know it.
- Choose the second color the same way. The shades update as you type.
- Set how many shades you want, and pick RGB or perceptual blending.
- Click any HEX or RGB value to copy it, or copy the whole palette as CSS variables, SCSS, Tailwind colors or JSON.
You can also blend the Metro UI colors: pick any of them above as a starting point.
Have an idea for making the mixer better? Let us know.