CSS Color-mix() Calculator
This tool is designed for designers, developers, and color enthusiasts who need precise control over color blending. Built on the CSS color-mix() specification, this tool lets you blend any two colors across 11 different color spaces, from traditional sRGB to perceptually uniform spaces like OKLAB and OKLCH. Whether you're creating design systems, fine-tuning brand palettes, or exploring color theory, you'll find the exact interpolation method you need with support for hue interpolation modes that give you complete creative control.
What sets this tool apart is its comprehensive output support for CSS Color Level 4 formats. Generate colors in HWB, LAB, LCH, OKLAB, and OKLCH alongside traditional formats like HEX, RGB, and HSL. With real-time alpha channel control, dynamic color variations, and visual gradient previews on every slider, you can see exactly how your colors blend before copying them to your clipboard. Perfect for modern web development where color precision and perceptual accuracy matter.
CSS Color-mix() Calculator
About This Tool
What is Color Mixing?
Color mixing in digital design isn't as simple as combining paint on a canvas. Different color spaces produce dramatically different results when blending the same two colors. This tool implements the CSS color-mix() function, which allows you to blend colors in various color spaces, each with unique perceptual characteristics. Traditional RGB mixing happens in a linear space that doesn't match human color perception, while perceptually uniform spaces like OKLAB create blends that look more natural to our eyes.
Understanding Color Spaces
This tool supports 11 different color spaces for mixing:
- sRGB / sRGB Linear: Standard web color space and its linear variant
- HSL: Hue, Saturation, Lightness - intuitive for designers
- HWB: Hue, Whiteness, Blackness - simpler than HSL
- LAB: Perceptually uniform, device-independent
- LCH: LAB in cylindrical coordinates (Lightness, Chroma, Hue)
- OKLAB: Improved perceptual uniformity over LAB
- OKLCH: OKLAB in cylindrical form - best for gradients
- XYZ (D50/D65): CIE color space with different white points
Hue Interpolation Methods
For cylindrical color spaces (HSL, HWB, LCH, OKLCH), hue is circular—0° and 360° are the same color. This means there are two paths between any two hues. The tool offers four interpolation methods: Shorter takes the quickest route around the hue wheel, Longer goes the long way for more dramatic transitions, Increasing always moves toward higher hue values, and Decreasing always moves toward lower values. These choices dramatically affect gradient appearance.
Output Formats
Every color mix generates 17 different output formats, ensuring compatibility with any project. From classic HEX codes to cutting-edge CSS Color Level 4 formats like OKLAB and OKLCH, you can copy the exact format you need. Alpha channel support is included across all formats, with both legacy syntax (rgba, hsla) and modern CSS syntax (rgb with / separator) provided for maximum flexibility.
Features at a Glance
- Real-time mixing with instant visual feedback
- Alpha channel control with gradient preview sliders
- Color variations generator creates tonal scales automatically
- Quick actions for randomization, swapping, and inverting
- One-click copying for any output format
- Multiple input formats (HEX, RGB, HSL) for each color
- Professional-grade accuracy using standard color conversion formulas
- Responsive design works on desktop, tablet, and mobile
Browser Support
The color-mix() function is supported in all modern browsers including Chrome 111+, Firefox 113+, Safari 16.2+, and Edge 111+. While the tool generates CSS Color Level 4 formats like OKLAB and OKLCH, check current browser support before using these in production. For maximum compatibility, traditional formats like HEX, RGB, and HSL are always safe choices and work across all browsers.