ع

Color Mixer

Mix two colors with adjustable ratios and different interpolation methods.

Steps between the colors

Compare interpolation methods

About the Color Mixer

Blend two colors and compare interpolation methods: sRGB (like CSS by default), linear RGB (physically closer to light mixing), CIELAB, OKLab (perceptually smooth) and HSL.

How to use it

  1. Choose color A and color B.
  2. Move the ratio slider to set the mix.
  3. Pick an interpolation method.
  4. Copy the mixed color or the whole step scale.

Examples

  • Mix brand red with white at 20% for a background tint.
  • Compare sRGB and OKLab mixes of blue and yellow.

Frequently asked questions

Why do methods give different results?
Each method averages colors in a different space. sRGB can produce muddy midpoints; OKLab keeps perceived lightness smoother.
Is this like mixing paint?
No. Digital mixing models light, not pigments. Blue and yellow will not make a rich green the way paint does.
Can I get multiple steps?
Yes, the step scale shows evenly spaced mixes between the two colors.

Related tools

CSS Gradient GeneratorLinear, radial and conic gradients with multiple stops and CSS export.Shades GeneratorGenerate tints, tones, lighter and darker shades and saturation variations.Color Harmony GeneratorComplementary, analogous, triadic, tetradic, split-complementary and monochromatic harmonies.