CSS color-mix()

Client

Mix two colors with the CSS color-mix() function— pick srgb, oklab, or hsl and adjust the percentage.

About CSS color-mix()

Blend two CSS colors with color-mix() in srgb, oklab, or hsl—preview and copy the value in your browser. The interactive transform on this page runs in your browser tab—Toolcore does not need your paste for the core operation described above.

How to use this page

Paste or type in the main workspace, run the primary action from the toolbar, then copy or download the result. Use Load example when the page offers it, or URL prefill (?q= / ?qb=) so agents and tickets open the same input.

Preview
color-mix(in srgb, #0d9488 40%, #f472b6)

sRGB preview: #9880A4

Nearby workflows on Toolcore

  • Color converter — HEX, RGB, HSL, OKLCH, named colors—paste a CSS color or use harmonic palette hints. when color values need conversion, contrast review, or theme export.
  • CSS gradient builder — Linear or radial gradients with multiple stops—live preview and copy a background declaration locally. when color values need conversion, contrast review, or theme export.
  • WCAG contrast checker — Foreground vs background: contrast ratio and WCAG AA/AAA for normal and large text. when color values need conversion, contrast review, or theme export.
  • Accessible color suggest — One anchor color (text or surface): sRGB mixes toward white/black to hit WCAG targets—copy HEX and verify in the contrast checker. when color values need conversion, contrast review, or theme export.

Common use cases

  • Prototype translucent brand tints without hand-writing alpha hex values.
  • Compare srgb vs oklab mixes for UI surfaces before committing tokens.
  • Copy a single color-mix() value into component CSS or Tailwind arbitrary properties.

Common mistakes to avoid

  • Assuming identical preview in every browser

    Older engines may not paint color-mix(); the page also shows an sRGB channel estimate when space is not srgb.

FAQ

What does 40% color A mean?

It follows CSS color-mix: 40% of the first color and 60% of the second in the chosen color space.

More tools

Related utilities you can open in another tab—mostly client-side.