Loading…

How to use CSS color-mix() Generator

Pick two colors and a mix percentage, and the tool builds the matching CSS color-mix() function and previews the computed result.

Frequently asked questions

What is CSS color-mix()?

A CSS Color 5 function that blends two colors in a chosen color space. color-mix(in srgb, red 30%, blue) mixes 30% red with 70% blue.

Does the preview match the browser?

We compute the srgb result the same way browsers do for the srgb space — linear interpolation of the gamma-encoded channels.

Which browsers support color-mix()?

color-mix() is supported in all current major browsers. The generated HEX is a safe fallback for older ones.

More Color Tools

Nearest Tailwind Color
Find the closest Tailwind CSS color name and shade for any hex
Color Blend Mode Calculator
Compute multiply, screen, overlay and more blend results of 2 colors
RGB Percentage Converter
Convert HEX to percentage rgb(), 0–1 float and 8-bit integer forms
Color Picker
Pick colors visually and get HEX, RGB, HSL, HSV, CMYK values
Color Format Converter
Convert between HEX, RGB, HSL, HSV, CMYK, LAB and CSS names
Color Contrast Checker
Check WCAG AA/AAA contrast ratios for text and backgrounds
WCAG Color Compliance
Test all WCAG 2.1 text size requirements with pass/fail badges
Color Mixer
Blend two colors with a ratio slider and preview the mix
Tints & Shades Generator
Generate a complete range of tints and shades from any color
Gradient Color Steps
Generate N evenly-spaced colors between two endpoints
Color Harmonies
Generate complementary, triadic and analogous palettes
Random Palette Generator
Generate beautiful random color palettes with one click

← View all Color ToolsBrowse all 1,100+ tools →