CSS color-mix() Generator

Set two HEX colors and a mix ratio to draft a CSS color-mix(in srgb, ...) declaration. Check browser support and contrast separately.

This tool processes its main input in your browser and does not send it to an external API. Fonts and interface assets may load from external providers.

YULATOOLS · TOOL GUIDE

CSS color-mix() Generator

The CSS color-mix generator combines two HEX values and the first color's percentage into a `color-mix(in srgb, ...)` declaration. Change either color or the ratio to update the CSS text shown by the tool.

The page generates code; it does not apply the rule to a live component or check support in your users' browsers. Test the output in your project and add a fallback color if your supported browsers require one.

When is it useful?

  • Drafting a blended interface color from two brand colors.
  • Seeing how the first color's percentage changes the CSS declaration.

How to use it

  1. Choose the two HEX colors to combine.
  2. Adjust the slider to set the first color's contribution; the second color fills the remaining percentage.
  3. Copy or adapt the generated declaration, then test browser support and text contrast in your project.

Example

Input: #00d9ff and #f5b942; first color at 50%

Output: background: color-mix(in srgb, #00d9ff 50%, #f5b942);

Who is it for?

  • Frontend developers using modern CSS color functions
  • Design-system teams preparing color tokens
  • Interface designers exploring color blends

Privacy and limitations

Color selection and CSS generation run in the browser; the input colors are not sent to an API. The output is not tested for browser compatibility or accessibility contrast.

Frequently asked questions

Which color space does the generated rule use?

The output explicitly uses `color-mix(in srgb, ...)`. Edit the CSS if your design needs another supported color space.

What does a 50% setting mean?

It assigns a 50% contribution to the first color. The second color supplies the remaining proportion in the generated function.

Will the CSS work in older browsers?

Support depends on browser and version. Check the CSS feature in your target clients and add a fallback if your project needs one.

Does the tool guarantee an accessible color?

No. It drafts a mixing declaration but does not calculate WCAG contrast. Test the final foreground and background colors separately.