Color Mixer

Blends two input colors at a chosen ratio and returns the resulting hex, RGB, and HSL values. Mixing happens in RGB space by linear interpolation of the channel values, weighted by the slider position.

Perceptual color spaces such as LAB or OKLab produce smoother gradients but require gamma decoding. The RGB approach used here is fast and matches how most CSS gradients are rendered.

The interpolation is straightforward: for a ratio t between 0 and 1, each output channel equals (1−t)·channel_A + t·channel_B. With t = 0.5, the result is the arithmetic mean of the two colors' red, green, and blue values. The mixed value is then re-serialized to a six-digit hex string and converted to HSL via the standard RGB-to-HSL transform. The HSL output is informational; mixing in HSL space directly produces different and often less expected results because hue interpolates around a circle.

A worked example: mixing #FF0000 (pure red) and #0000FF (pure blue) at 50% gives #800080, the dark purple at the midpoint of the RGB cube's red-blue diagonal. Mixing the same pair in OKLab would yield a brighter, more saturated magenta because OKLab interpolation respects perceptual lightness. The visual difference is small for similar colors and large for complementary pairs. CSS gradients use the sRGB linear path by default, so the RGB mix here matches what a browser draws between the same two stops.

Limitations follow from the choice of color space. Pure RGB interpolation passes through grey for complementary colors, which can look muddy. Mixing yellow (255,255,0) with blue (0,0,255) gives (128,128,128), a flat grey, because the additive light model has no concept of subtractive pigment behavior. For paint or print mixing, no screen-based tool gives correct results; CMYK ink mixing has its own physics. Alpha is interpolated linearly when both inputs include it; otherwise both are treated as fully opaque. Gamma correction is not applied, so very bright and very dark colors can produce darker midpoints than the eye expects.

For cases where perceptual smoothness matters, OKLab and OKLCh have become the de-facto standard in modern design tooling, and CSS Color Module Level 4 supports them via color-mix(in oklab, ...). Browsers shipping that syntax will render gradients between the same two stops with notably different midpoints than the legacy sRGB path.