How do I mix two colors and see all the in-betweens?
Color mixer - pick two colors, slide the mix ratio (0-100%), see the result plus a strip of 11 intermediate stops.
Two blend modes: OKLCH (perceptual, clean interpolation) and RGB (classic, sometimes muddy mid-points).
Great for brand color blending, in-between picks, color-theory education.
How to use it
- Pick "Color A" and "Color B" - HEX, native picker.
- Pick the mode: OKLCH (recommended) or RGB. OKLCH preserves perceptual lightness during mixing, RGB is mathematically classic.
- Slider 0-100% sets the proportion of B in the mix. 0% = A, 100% = B, 50% = even.
- The 11-stop strip shows the full gradient between A and B. Click to copy HEX.
- "Details" = current mix in 4 formats (HEX, RGB, HSL, OKLCH).
When this is useful
Where the color mixer pays off - typical scenarios:
- Brand color blending - two brand colors, need an in-between for a transitional button.
- Hover state - button base + 50% white = lighter hover.
- Dark mode pairs - light-mode color + dark-mode color, mixer shows the smooth transition.
- Color-theory education - see how "blue + yellow in RGB" goes muddy gray, while "blue + yellow in OKLCH" goes clean green - concrete proof for why OKLCH is better for gradients.
- Generative art - mixers are the basis of dithering, blending, layer compositing.
- Pre-design - not sure what accent color - mix two, check the in-betweens.
Questions and answers
OKLCH has perceptual uniformity - 50% mix looks like 50%. RGB 50% blue + yellow = (128,128,128) gray, which does NOT look like 50% blue + 50% yellow. OKLCH 50% mix between blue and yellow gives a clean green - perceptually "in the middle".