No Login Data Private Local Save

CSS color‑mix() Function Playground - Online Tester

20
0
0
0

CSS color‑mix() Playground

Visually explore the CSS color-mix() function across different color spaces in real time.

Chrome 111+ Firefox 113+ Safari 16.2+
0% 100% %
sRGB OKLab ★ OKLCh HSL LCh Display P3 Lab
Mixed Color
Result: #b587c4 rgb(181, 135, 196) hsl(285, 34%, 65%)
color-mix(in srgb, #6366f1 50%, #f59e0b 50%);

Use this directly in your CSS for color, background-color, border-color, etc.

Usage Example: background-color: color-mix(in srgb, #6366f1 50%, #f59e0b 50%);
← Color 2 (0%) Color 1 (100%) →
Click any step in the gradient strip to jump to that mix ratio

Frequently Asked Questions

The color-mix() CSS function takes two colors and returns the result of mixing them in a specified color space, with an optional percentage for each color. It's part of the CSS Color Module Level 5 specification and allows developers to dynamically blend colors directly in CSS without preprocessors like Sass or LESS.

As of 2024, color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+, and Edge 111+. It has broad modern browser support (over 90% global coverage). For older browsers, consider providing fallback colors using @supports queries.

sRGB is the standard color space for the web but it's not perceptually uniform — equal numerical steps don't produce equal visual changes. OKLab is designed to be perceptually uniform, meaning gradients and mixes look more natural and smooth to the human eye. For color mixing that looks visually balanced, OKLab or OKLCh are often better choices than sRGB. Try switching between them on the gradient strip above to see the difference!

Each color in color-mix() can have an optional percentage. If both percentages are specified and sum to 100%, that's the exact ratio. If only one is specified, the other automatically becomes 100% - specified%. If neither is specified, it defaults to 50%–50%. If percentages sum to less or more than 100%, they are scaled proportionally. Example: color-mix(in srgb, red 30%, blue) → blue gets 70% automatically.

Absolutely! This is one of the most powerful use cases. You can define colors as CSS custom properties and mix them dynamically: --primary: #6366f1; --accent: #f59e0b; background: color-mix(in oklab, var(--primary) 70%, var(--accent) 30%); This enables theme systems with dynamic color blending that were previously only possible with preprocessors.

Common use cases include: creating dynamic hover/active states by mixing with white or black; generating accessible color palettes from a base color; creating semi-transparent overlays without opacity; building theme systems with CSS custom properties; generating gradient midpoints; and creating color variations for charts and data visualizations — all directly in CSS without JavaScript or preprocessors.

🔧 Related Tools