jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Free CSS Color Mix Generator

Enter a base color and get color-mix() CSS for hover, border, subtle background, and muted text colors. Uses the oklab color space for perceptually uniform mixing.

Loading tool...

What is CSS Color Mix Generator?

The CSS color-mix() function mixes two colors in a specified color space. It creates color variations directly in CSS without a preprocessor like Sass. Using oklab produces more perceptually uniform results than srgb. Common use cases include hover states, borders, subtle backgrounds, and muted text -- all derived from a single base color.

quickAnswer

Use color-mix() to blend two colors in a specified color space, such as oklab or srgb. It is useful for creating tint, shade, and hover variants from a single base color without a preprocessor.

Last updated: 2026-05-25

limitations

  • color-mix() requires Chrome 111+, Edge 111+, Safari 16.2+, and Firefox 113+. Older browsers do not support it and will ignore the declaration.
  • The oklab color space produces more perceptually uniform results than srgb. Mixing in srgb can create muddy intermediates.
  • color-mix() may not reference CSS custom properties that contain color-mix() output in some older browser versions due to property cycle detection.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Enter a base color as a hex value.
  2. Review the calculated color-mix() variants using white, black, or transparent.
  3. Copy each color-mix() declaration into your CSS.
  4. Use the generated custom properties for consistent color theming.

What you can use it for

  • Create hover states by mixing a color with white or black.
  • Generate subtle background tints from a brand color.
  • Build border colors that are slightly darker than the background.

Use cases

Practical examples

example

Button hover state with color-mix

A button uses the base brand color for its background and color-mix() for the hover state.

example

Card background tint

A card uses color-mix() to create a subtle tint background from the site accent color.

Common mistakes

  • Using srgb instead of oklab for color mixing, which produces less natural results.
  • Applying color-mix() without checking browser support.
  • Using color-mix() where a simple opacity change would work.

verification

  1. Inspect the element in DevTools Styles panel and verify the computed color value matches the expected mix of the two inputs.
  2. Test the fallback color declaration in a browser that does not support color-mix(), such as an older Chrome or Firefox version.

FAQ

Questions about CSS Color Mix Generator

Why use oklab instead of srgb?

oklab produces perceptually uniform color mixing. Mixing in srgb can produce gray, muddy intermediates.

Does color-mix() work in all browsers?

Chrome 111+, Edge 111+, Safari 16.2+, Firefox 113+. It has broad modern support.

Can I mix more than two colors in a single color-mix() call?

No. A single color-mix() call takes exactly two colors. To mix three or more colors, nest color-mix() calls: color-mix(in oklab, red, color-mix(in oklab, blue, green)). The innermost mix is resolved first, then the outer mix combines the result. While this works, deeply nested mixes become hard to read quickly.

How does color-mix() handle colors with different opacity levels?

The alpha channel is mixed linearly along with the color channels. If one color has 50% opacity and the other has 100%, a 50% mix produces 75% opacity. The interpolation color space does not affect alpha mixing 閳ユ攣lpha is always mixed in a linear space regardless of the chosen color interpolation method. Use percentage values to control the weight of each color in the mix.

Related tools

More css tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Also try

Also try

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool