Color Mixer

About Color Mixer

Blends two colours by any amount and shows the result in six colour spaces side by side, with a ramp of steps between them and the CSS color-mix() that makes the browser do the same mix live.

The space matters more than people expect. Mixing in sRGB averages the stored numbers, and because those numbers are gamma-encoded, the middle of a blend between two saturated colours goes dull and dark — the familiar muddy midpoint. OKLab mixes in a space built around perception, so the midpoint looks halfway; OKLCH also travels round the hue circle — the shorter way, as CSS does — so blue to amber passes through violet and pink instead of grey.

color-mix(in oklch, #3f6dfb 60%, #f59e0b) is supported in every current browser, which makes the mix a live value: change either colour in a custom property and every mix derived from it follows.

Where it helps

• Shows the same mix in six spaces, so the difference between them is visible, not theoretical.
• Writes the color-mix() declaration for a live mix in CSS.
• Builds a ramp of any number of steps between the two colours.
• Handles grey endpoints properly, so a mix with white or black does not swing through an unrelated hue.

Limits

• HSL mixing is included for comparison, but it is rarely what you want — its lightness is not perceptual.
• color-mix() percentages belong to the first colour, which is the reverse of the amount field here; the CSS written out accounts for that.

Frequently asked questions

Why does the sRGB mix look darker in the middle?

sRGB values are gamma-encoded: halfway between two numbers is not halfway in light. Averaging them undershoots the brightness of the true midpoint, which is why blends in sRGB look muddy. Linear sRGB, OKLab and OKLCH do not have that problem.

Which space should I use?

OKLCH for vivid gradients and mixing distinct hues; OKLab for tints and shades of one colour, where you want a straight, even path. Those two cover almost every design use.

Is color-mix() safe to use in production?

Yes — it is supported in all current versions of Chrome, Edge, Firefox and Safari. For very old browsers, use the hex result written above it as a fallback declaration.

Related tools

• Gradient Generator — Build linear, radial and conic CSS gradients
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Palette Generator — Harmonious colour schemes from a base colour
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
• Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Web Font Previewer — Set your own text in a font file before you ship it