Tag: CSS

Mixing two colours mathematically is one of those operations everyone needs occasionally and few people do well by eye. Designers reach for it when picking a button hover state (“I need something between my brand purple and pure black”), when building gradient stops, when matching a competitor’s colour to a brand-adjacent variant. The naive approach — averaging the RGB values — works for greys but produces muddy results across distant hues. A good color mixer uses perceptually-uniform colour spaces to give you mid-points that look halfway between the two inputs.

Our color mixer tool takes two HEX inputs and produces a 7-step interpolated ramp, with a slider you can drag for any specific blend ratio. Output formats include HEX, RGB, HSL, and OKLCH for the interpolation modes that support it. This guide explains what each interpolation mode does, when to pick which, and the workflows where colour mixing solves real design problems.

Three interpolation modes — RGB, HSL, OKLCH

Why the same input produces different mid-points in each mode. Mix red #FF0000 and blue #0000FF:

• RGB mid-point: #800080 (purple) — the literal R/G/B average. Looks dark and muddy.
• HSL mid-point (shorter hue arc): #FF00FF (magenta) — rotates through the magenta side of the wheel. Vivid.
• HSL mid-point (longer hue arc): #00FF00 (green) — rotates through cyan and green the long way around. Wild.
• OKLCH mid-point: #A53C7C (warm magenta-purple) — perceptually balanced, neither washed-out nor neon.

For everyday design work, OKLCH produces the answer most designers would call “right”. RGB is fine for similar colours; HSL is best when you specifically want the mid-point to traverse vivid colours (rainbow gradients, cyberpunk aesthetics).

Five workflows where a color mixer earns its keep

• Picking a button hover state. Mix your brand colour with a darker variant (often pure black or your darkest neutral) at 15-25% to get a hover state that reads as “same colour, more pressed”.
• Building gradient stops. A two-colour gradient with a manually-mixed middle stop reads better than a default browser gradient — especially for distant hues where browsers’ sRGB interpolation produces muddy mid-points.
• Bridging brand colours. If your design system has two brand colours (primary blue + accent orange, say) and you need a third for a specific component, a 50/50 mix gives you a colour that “feels” like it belongs to both.
• Match-mode A/B test colours. Mix your existing CTA colour with the test variant at 25%, 50%, 75% to design a smooth visual A/B test rather than a jarring switch.
• Theme transition colours. When transitioning between light and dark mode, the mid-point colour for borders, surfaces, and shadows often needs to be hand-picked. A mixer between the two extremes gives you the right mid-tone.

How to use the browser color mixer

1. Open the color mixer
2. Enter two HEX values (or use the colour pickers) — your start and end colours
3. Pick the interpolation mode: RGB, HSL, or OKLCH (default OKLCH for balanced ramps)
4. The 7-step ramp renders instantly. Each step shows its HEX value
5. Drag the slider to any specific blend ratio (0% = start, 100% = end, 50% = midpoint) for fine control
6. Click any swatch to copy its HEX. Or click “Copy all” to grab the entire ramp as comma-separated HEX values

Switch interpolation mode with the same inputs — the ramp re-renders showing the difference. Doing this once visually clarifies why OKLCH is the modern default: the colours look more “evenly spread” between the start and end than either RGB or HSL.

Mixing colours in code

JavaScript (colord library):

import { colord } from "colord";

// 50/50 mix of red and blue
const mid = colord("#FF0000").mix("#0000FF", 0.5).toHex();
// => "#800080" (RGB blend)

// Build a 5-step ramp
const ramp = [0, 0.25, 0.5, 0.75, 1].map((t) =>
  colord("#FF6B6B").mix("#4ADE80", t).toHex()
);

Modern CSS (color-mix() function — supported in Chrome 111+, Safari 16.2+, Firefox 113+):

/* 50/50 mix in OKLCH (perceptually uniform) */
.button:hover {
  background: color-mix(in oklch, var(--brand) 75%, black 25%);
}

/* 30/70 mix in RGB */
.divider {
  background: color-mix(in srgb, #635BFF 30%, white 70%);
}

Python (colormath):

from colormath.color_objects import sRGBColor, LabColor
from colormath.color_conversions import convert_color

a = sRGBColor.new_from_rgb_hex("#FF6B6B")
b = sRGBColor.new_from_rgb_hex("#4ADE80")
la, lb = convert_color(a, LabColor), convert_color(b, LabColor)

# 50/50 in Lab (perceptually uniform)
mid_lab = LabColor(
    (la.lab_l + lb.lab_l) / 2,
    (la.lab_a + lb.lab_a) / 2,
    (la.lab_b + lb.lab_b) / 2,
)
print(convert_color(mid_lab, sRGBColor).get_rgb_hex())

The color-mix() CSS function is the modern way — no JavaScript needed. Use it directly in your stylesheets and the browser computes the mix at render time. ~94% global support as of 2026.

Common mistakes when mixing colours

• Mixing two colours that produce a muddy mid-point. Distant hues (red-blue, yellow-purple) often have washed-out RGB mid-points. Switch to OKLCH or HSL for vibrant results.
• Forgetting to test contrast at every step. A start colour that passes WCAG against your text and an end colour that also passes don’t guarantee every step in between passes. Audit accessibility across the full ramp before shipping.
• Using HSL longer hue arc by default. The longer-arc rotation is dramatic and rarely what designers actually want. Default to shorter arc (the standard) and only switch to longer for explicit rainbow effects.
• Mixing in the wrong colour space for print. Screen-to-print conversion already loses gamut accuracy. Don’t add interpolation noise on top — pick the print colours directly from a Pantone-aware palette.

When NOT to mix colours

• For your primary brand palette. Brand colours should be specified, not mixed. The mixer is for finding adjacent or transitional colours, not the brand itself.
• For accessibility-critical text on coloured backgrounds. Mixed colours often hover near contrast thresholds. Use Tailwind’s pre-tuned ramps where every step is verified for contrast against neutral text.
• For colour systems requiring CMYK accuracy. Mixing in RGB then converting to CMYK accumulates errors. Mix directly in CMYK in print-aware tools.

Frequently asked questions

What’s the difference between mixing colours and gradients?

A colour mixer produces discrete colour values at specific blend ratios (good for picking exact colours for use in CSS or design tokens). A gradient produces a continuous visual transition between colours (good for backgrounds, hero sections, button fills). They use the same underlying interpolation math; the difference is whether the output is a discrete value or a smooth transition.

Should I use RGB, HSL, or OKLCH for mixing?

OKLCH for perceptual uniformity (the default modern best practice). HSL for vivid mid-points (the colours pass through more saturated regions). RGB for similar colours where the difference is small. For most design system work, OKLCH gives you the answer that matches “the eye’s average” and avoids muddy mid-points or unexpected hue shifts.

Why does my CSS color-mix() result look different from the tool?

The color-mix() CSS function defaults to in oklab if you don’t specify a colour space. Our tool defaults to oklch which produces slightly different results than oklab. Match the spaces explicitly: color-mix(in oklch, ...) in CSS for results identical to the tool.

Can I mix more than two colours?

Not in a single mix operation — colour mixing is fundamentally pairwise. To blend three colours, mix the first two together, then mix that result with the third. Or use a multi-stop gradient and sample colours from specific positions, which is what 3-colour gradient generators effectively do.

Is the mixed colour the same as a 50% opacity overlay?

Visually similar but mathematically different. Mixing produces a single new colour. A 50% opacity overlay shows whatever’s behind through the semi-transparent overlay, so the visual result depends on the background. For a fixed white background, an opacity-50 red overlay and a 50/50 mix of red and white look identical. Over a different background, the opacity overlay produces a different visible colour.

Does the tool support the alpha channel?

The current mixer focuses on opaque colour interpolation. For alpha-aware mixing (where you blend two semi-transparent colours), use color-mix() in CSS with explicit alpha values, or use the colord library’s .alpha() method in JavaScript.

Related tools and guides

• Color Mixer — the tool this guide is about
• Color Shades Generator — for 11-step ramps from a single base colour
• Color Shades Generator guide
• CSS Gradient Generator — uses the same interpolation math, output as a gradient
• HEX to RGBA Converter — convert mixed colours into other formats
• All color tools