jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

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.

Quick answer

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.

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.

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.

Related tools

More css tools

Also try

Also try