Skip to content

[css color-mix] Feature request: Physical color mixing option (Kubelka-Munk) #8715

Open
@NateBaldwinDesign

Description

@NateBaldwinDesign

Regarding https://www.w3.org/TR/css-color-5/#funcdef-color-mix

Overview

Incorporate a physical color mixing option (eg Kubelka–Munk) alongside the current interpolation options for the css color-mix() function.

Why am I making this request?

Interpolations in perceptual color spaces are great and have many uses; however the title of the spec feature ("mix") implies a far different behavior of color. Interpolating at a certain percentage from one color to another is not the same as "mixing" colors in the physical world. While I can appreciate it's a more human-friendly term than "color-interpolate()" it almost begs for better methods of returning a "mixed" color.

Many people are unfamiliar with the behavior of light, light mixing, perceptual space, and color interpolation. Supporting a function that returns colors that closely resemble their physically mixed counterparts may do well for meeting the expectations of certain people. At the very least, it would be a good addition to the options, considering each color space/method returns different results, and the decision on which to use can be highly subjective.

I would love to see the addition of a physical color mixing approach, such as Kubelka–Munk, which more closely reflects the physical result of mixing colors. Examples of this method in implementation can be found here: https://github.com/scrtwpns/mixbox and here: https://github.com/rvanwijnen/spectral.js

Related images

Here's an example of interpolation between #002286 and #fdd200 in a variety of color spaces:
image

And another of OKLCh
image

For comparison against a Kubelka-Munk mixing of the two colors, we can see that the green is much deeper and richer (two examples):
image

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions