How does sRGB mixing differ from OKLab mixing?

sRGB interpolates digital color channels directly. OKLab mixes in a perceptual space, often producing intermediate colors whose visual progression feels more even.

Does a 50/50 mix always look halfway between the sources?

It is mathematically halfway in the selected mixing space. Human perception is nonlinear, which is why the sRGB and OKLab 50/50 results can look noticeably different.

What happens at 0% or 100%?

The result becomes one of the original source colors. Intermediate slider positions combine the two sources using the exact displayed percentages.

What does Copy CSS produce?

It creates a CSS color-mix() expression containing both source colors, their proportions and the selected mixing space, ready for browsers that support that syntax.

Back to Design & Color Tools

Color Mixer

Blend two digital colors at any ratio and compare ordinary channel mixing with a more perceptually even result.

Mixing mode

sRGB — DigitalStandard digital color mixing.OKLab — PerceptualA more perceptually uniform color mix.

Color 1

Color 2

Mixed color

#9465C8

Mix ratio

Adjust how much of each color is used.

Color 1 — 50%Color 2 — 50%

Result values

HEX

#9465C8

RGB

rgb(148 101 200)

HSL

hsl(268.5 47.4% 59%)

OKLCH

oklch(0.5985 0.1514 304.1)

color: color-mix(in srgb, #3B82F6 50%, #EC4899 50%);

How to use Color Mixer

1
Select sRGB – Digital or OKLab – Perceptual as the Mixing mode.
2
Choose Color 1 and Color 2 with their pickers or enter their HEX values.
3
Move the Mix ratio slider to set the exact percentage contributed by each source.
4
Use Swap colors to reverse the sources without manually re-entering them.
5
Copy the mixed HEX, RGB, HSL or OKLCH value, copy all values or copy the generated CSS color-mix expression.

Frequently asked questions

About Color Mixer

Color Mixer reveals that a blend depends on more than two endpoints and a percentage. The selected interpolation space changes the route between the colors: direct sRGB arithmetic reflects common digital channel mixing, whereas OKLab is designed around perceptual relationships.

The ratio control makes each contribution explicit and updates the mixed swatch plus four numeric representations in real time. Swapping sources is useful when testing how a CSS expression reads, while the endpoints remain exact at zero and one hundred percent.

Individual values support design applications that expect HEX, RGB, HSL or OKLCH. The CSS output preserves the actual source colors and ratio through color-mix(), allowing the browser to perform the same conceptual blend instead of receiving only the final static color.