CSS color-mix() playground

Explore color-mix() by adjusting the color space, two colors, and their percentages. In polar spaces such as hsl, hwb, lch, and oklch you can also change hue interpolation and see the browser-resolved color in the generated code.

color-mix()

HTML

<div class="color-mix"></div>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<div class="inline-[250px] block-[250px] bg-[color-mix(in_srgb,_#ff7a8a_50%,_#6fd6ff_50%)]"></div>

CSS

.color-mix {
  inline-size: 250px;
  block-size: 250px;
  background-color: color-mix(in srgb, #ff7a8a 50%, #6fd6ff 50%);
}