CSS color-mix() Generator
Generate CSS color-mix() declarations. Mix two colors in different color spaces with a configurable ratio and preview the result.
Color 1: #ff0000Color 2: #0000ffRatio: 50% / 50%Color Space: SRGBCSS Length: 59 chars
Presets & Samples
50% Color 1 / 50% Color 2
Preview
Color 1 (Left) · Mixed (Center) · Color 2 (Right)
CSS Output
Mixed color calculation CSS declaration updated
background-color: color-mix(in srgb, #ff0000 50%, #0000ff);
Browser support: Chrome 111+, Firefox 113+, Safari 16.2+
About CSS color-mix()
The CSS color-mix() function lets you mix two colors in a specified color space and ratio directly in CSS, without JavaScript or preprocessors. Different color spaces produce different mixing results — oklch andoklab are perceptually uniform, producing visually smooth gradients, while srgb matches what canvas/WebGL use. The percentage specifies how much of the first color to use; the remainder comes from the second.
Private & free — this tool runs entirely in your browser.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.