CSS color‑mix() Transparency Demo - Online Alpha Blend

color-mix() is a CSS function that blends two colors in a specified color space. Its syntax is:

color-mix(in <color-space>, <color1> <p1>, <color2> <p2>)

The percentages determine how much of each color contributes to the result. When percentages sum to less than 100%, the remainder is treated as transparent. This function works natively in all modern browsers (Chrome 111+, Firefox 113+, Safari 16.2+) and eliminates the need for preprocessors like Sass for color blending.

Alpha transparency is fully respected in color-mix(). If a color has an alpha value less than 1 (e.g., rgba(255, 0, 0, 0.5)), the blending calculation accounts for that transparency. The final result's alpha is also computed appropriately. This is particularly useful for layering semi-transparent colors, creating glass-morphism effects, or building design systems with opacity tokens.

The mix percentage and the alpha channel are independent concepts: the percentage controls the blend ratio, while alpha controls each color's opacity before blending.

sRGB — Default, widely supported. Good for general use but can produce muddy midtones with complementary colors.

Oklab / Oklch — Perceptually uniform. Produces smooth, natural-looking gradients. Highly recommended for modern web design. Oklch uses hue-based notation which is intuitive for designers.

HSL / HWB — Good for hue-based blending. Can create vibrant intermediate colors, but may have uneven perceptual brightness.

Lab / Lch — Device-independent, perceptually uniform. Excellent for precise color work and when consistency across devices matters.

Display P3 — Wider gamut. Ideal if targeting modern Apple devices with P3 displays for richer, more saturated blends.

Sass mix() always blends in sRGB space and is a compile-time operation — the result is a static hex/rgb value. CSS color-mix() is native browser functionality that:

• Supports 14+ color spaces (sRGB, Oklab, Display P3, etc.)
• Works at runtime — can respond to CSS custom properties and user interactions
• Respects alpha transparency properly in all spaces
• Enables dynamic theming without JavaScript

• Dynamic hover/active states — Blend a brand color with white or black for button states
• Design tokens — Create entire palettes from a few base colors
• Theme switching — Blend with transparency for seamless dark/light mode transitions
• Gradient generation — Build smooth multi-stop gradients programmatically
• Accessibility — Ensure sufficient contrast by blending with black/white
• Glass-morphism — Blend semi-transparent colors over backgrounds

Yes! As of 2024, color-mix() has over 89% global browser support. It's supported in:

• Chrome 111+ (March 2023)
• Firefox 113+ (May 2023)
• Safari 16.2+ (December 2022)
• Edge 111+

For older browsers, provide a fallback solid color using @supports:

.element {
  background: #7b7cf9; /* fallback */
}
@supports (background: color-mix(in srgb, red 50%, blue 50%)) {
  .element {
    background: color-mix(in oklab, #3b82f6 50%, #ef4444 50%);
  }
}