CSS color-mix() Playground - Online Function Generator

For the most perceptually uniform and natural results, use oklch or oklab. These modern color spaces are designed to match human perception, avoiding the "gray zone" problem that occurs in sRGB when mixing complementary colors (like blue and yellow). oklch is especially recommended for UI design because it preserves hue better during blending. Use srgb only when you need consistent results with legacy rendering or when matching existing sRGB-based designs.

Sass's mix() function only blends in the sRGB color space and works at compile time. CSS color-mix() is native to the browser, supports 14+ color spaces, and can work with CSS custom properties (variables) at runtime. This means you can dynamically update colors based on user interaction, theming, or real-time data — something impossible with preprocessors. Additionally, modern color spaces like oklch produce far superior perceptual blends compared to sRGB.

As of 2024, color-mix() is supported in all major modern browsers: Chrome 111+ (March 2023), Firefox 113+ (May 2023), Safari 16.2+ (December 2022), and Edge 111+. Internet Explorer does not support it. For older browsers, consider providing a fallback color. You can use @supports (color: color-mix(in srgb, red, blue)) for feature detection. Note that some wide-gamut color spaces like display-p3 and rec2020 may render differently depending on the user's display hardware.

Yes! This is one of the most powerful features. You can define colors as CSS variables and mix them dynamically: color-mix(in oklch, var(--brand-primary) 80%, var(--brand-secondary)). Combined with :hover, :focus, or JavaScript-driven variable updates, you can create entire dynamic color systems without writing a single line of JavaScript color manipulation. This is ideal for design systems, dark mode theming, and accessibility-driven color adjustments.

According to the CSS specification, if the percentages sum to less than 100%, they are normalized proportionally. For example, color-mix(in srgb, red 20%, blue 30%) is treated as red 40% and blue 60% (20:30 ratio normalized to sum 100%). If percentages sum to more than 100%, they are also scaled down proportionally. If no percentages are specified, each color defaults to 50%. If only one color has a percentage, the other gets the remainder (100% minus the specified percentage).

Common use cases include: (1) Hover/active states — mix a base color with white or black for instant button variants. (2) Design tokens — create entire color ramps from a few base colors. (3) Theming — blend brand colors for light/dark modes. (4) Accessible contrast — dynamically adjust text color by mixing with backgrounds. (5) Gradients — use color-mix() inside gradient stops for smoother transitions. (6) Component variants — generate subtle color variations for cards, badges, and alerts without writing extra CSS classes.

This is the classic demonstration of perceptual non-uniformity in sRGB. In the sRGB color space, blue and yellow are mathematical opposites on the color wheel, so averaging their RGB values produces a neutral gray. However, human perception doesn't follow sRGB math — we perceive blue+yellow as greenish (like mixing paint). The oklch color space was designed to match human perception, so it blends through the hue spectrum naturally, producing a vibrant green at 50%. This is why oklch is recommended for UI color blending.