Kevin Powell - Community•14mo ago

css `color-mix` not working with paint api.

For some reason I can't seem to use color-mix to set a color for houdini's paint api. Setting a simple color or even a relative color works fine. Any Idea why color-mix isn't working for me?

/* working */
--squiggly-line-color: red;
/* working */
--squiggly-line-color: oklch(
    from red calc(l * 7 / 8) calc(c * 3 / 4) h
  );
/* not working */
--squiggly-line-color: color-mix(
    in oklab,
    white 75%,
    black
  );

background: paint(squiggly-line);

/* working */
--squiggly-line-color: red;
/* working */
--squiggly-line-color: oklch(
    from red calc(l * 7 / 8) calc(c * 3 / 4) h
  );
/* not working */
--squiggly-line-color: color-mix(
    in oklab,
    white 75%,
    black
  );

background: paint(squiggly-line);

3 Replies

Gashy•14mo ago

There might be a chance that the color-mix function isnt fully supported in a custom property just yet or has to be done in a specific way (little bit like how url() can be a bit awkward in a custom property if you are using quotations). Have you tried putting the colour mix function inside the paint() to see if it works?

BlueBekaOP•14mo ago

Trying to use it directly in the paint function results in: The value provided ('color-mix(in oklab, white 75%, black)') could not be parsed as a color. From inside the paint function, a custom property with a color-mix value seem to have an unset value. i.e. properties.get("--squiggly-line-color") gives CSSUnparsedValue {length: 0} I can't think of anywork around to get this to work. I don't really want to have to swap out my color-mixes for static colors.

capt_uhu•14mo ago

Looks like not supported yet. There's a chrome bug open for Implement CSS Color 4 and color-mix for Canvas 2D. While it doesn't specifically mention the paintAPI this is probably still the issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1416273&q=color-mix&can=2

Gaming

Programming

css `color-mix` not working with paint api.