- From: Nate Baldwin via GitHub <sysbot+gh@w3.org>
- Date: Mon, 06 Dec 2021 23:03:47 +0000
- To: public-css-archive@w3.org
I would love to see this implemented! This problem was the foundational basis for creating [Leonardo](https://leonardocolor.io), which gives designers & developers the ability to generate a color based on the **target contrast ratio**. Putting this type of functionality directly into the CSS Color Module spec seems like the right approach. I especially like the syntax as it's very simple and easy to understand: ``` color-contrast(lighten rebeccapurple on wheat to 3:1); ``` I have some thoughts regards to *how* the color is lightened or darkened that I would like to express. If simply modifying LCh lightness value of a color, at some point the results will be out of sRGB gamut. One mechanism to correct this would be to clamp to sRGB, however the resulting colors are not likely to be closely aligned with designers' intent.  This is problematic in that for certain colors, the perceptual shift in chroma could be dramatic. A slightly lighter value of a color vs a much lighter value of the same color can appear not harmonious. Another possible approach would be to interpolate from the original color directly to white and black. However this approach has a more pronounced problem as the previous method for some colors (but not all, as in the example below).  The method I would like to recommend is something in between. *Retaining chroma as close as possible* to the original color is preferred, however it should have a smooth rate of change as the color approaches white and black. From what I've seen in this area, a smoothing curve such as Catmull-Rom does a great job of this.  **Now to address the elephant: Yellow.** Yellow is by far one of the most difficult colors to work with in this space, because darker values of yellow (within sRGB) never look right. Even when interpolating in LCh, given the gamut restrictions of sRGB, the colors are undesirable.  The above gradient illustrates a linear interpolation from #ffee00 to white and black in LCh color space. The sample swatches I've highlighted help to illustrate that "darker yellow" is not a favorable color. As a designer, we may wish to **adjust the hue** along with chroma in order to make sure colors appear more aesthetically pleasing as they get lighter or darker. In this case, we could solve it by adding more "key colors" to our argument: ``` color-contrast(darken #ffee00, #755000 on wheat to 3:1); ``` By adding the darker orangish color to the argument, you could interpolate from white, to #ffee00, to #755000, and to black. Now, the sampled colors take on more of an Amber quality, making sure the color is still rich (having and appearing to have higher chroma) as it gets darker.  Since CSS doesn't inherently provide a great way to visualize how a color will change relative to others, this approach could ensure that the original color's aesthetic qualities are respected within the confines of the sRGB gamut. -- GitHub Notification of comment by NateBaldwinDesign Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5153#issuecomment-987336625 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 6 December 2021 23:03:50 UTC