leaverou/css.land

Hands on CSS demos

css.land's Issues

Safari 15 supports `lch(...)` syntax natively

Currently, the displayed color is rendered with either rgb(...) or color(display-p3 ...) syntax. However, Safari 15 supports lch(...) syntax natively. It would be awesome to use the native syntax if possible!

---

I tried manually copy-pasting the produced lch() color into the --color style attribute, and got a slightly brighter color (lch(49% 132 360) on top, color(display-p3 0.8423 0 0.4685) on the bottom)

.

LCH tool handles saturated yellows very poorly

I have no idea exactly what “right” behaviour here is, but the current behaviour doesn’t look right, and certainly feels terrible.

In short: yellows are handled really badly in this tool https://css.land/lch/.

As an example: import #ff0. This comes through as lch(97.607% 94.708 99.575), rgb(100% 100% 0%) and color(display-p3 1 0.9829 0.7277) (“actually color(display-p3 1.0001 1 0.3309)”).

The Display P3 value bounding there seem strange, with the blue channel 0.3309 → 0.7277, but I’m not qualified to judge it truly. I just remark on the apparent strangeness of it.

(The three bars are way off base, showing colours much lighter than the yellow actually is. This yellow is nowhere near perceptually equivalent to other colours at 97.607% lightness.)

Try twiddling the chroma channel. Take it any higher or lower, and either the red or the green channel will slightly exceed 100%, and it blitzes the yellow, lightening it 75% (to the vicinity of #ffffc0).

How about an only somewhat lighter yellow? Import #ff6. You get lch(97.931% 71.801 100.853), rgb(100% 100% 40%), color(display-p3 1 0.9896 0.7048) (“actually color(display-p3 1.0001 1 0.4961)”).

Again, strange Display P3 blue, but meh.

Try twiddling the chroma channel again. The same problem occurs.

For these #ff_ values, this is all happening because RGB isn’t straight relative to LCH: lightening the yellow in RGB space is causing the LCH hue to rotate a little, and so red or green slightly exceeds 100%.

Then for these colours—and even for slightly less extreme yellows picked manually—as soon as they go out of range, the technique used to restore them into the sRGB range destroys the colour utterly.

Vibrant yellow is such a weird colour and hard to deal with. For that matter, vibrant colours in general are surprisingly hard to deal with in perceptually-uniform colour spaces, because you’re right on the boundaries of what’s possible. That’s something they don’t tend to tell you.

I don’t know what’s at fault here, whether it’s this tool only or whether browser implementations of lch() would be bad as well.

[lch] Use color(display-p3) when available

I might be wrong but on Safari the colours here seem to be the srgb gamut, rather than the p3 or the rec2020 version.

Or maybe I’m wrong and am just not paying attention!

Doesn’t Work in Safari 15.0.2

I updated my iPad and I noticed that the site doesn't work properly, showing this instead:

It works in Firefox and Chrome however. I don't have MacOS but I used an extension to see the error and it says something about Access Control

Discussion: Add an OSS License?

Hi,

Any chance that an OSS license can be posted for this repo? I'm working on an open source LCH based dynamic theming engine for a particular gaming platform (FoundryVTT). This also happens to be the non-trivial demo code for a new Svelte based runtime / UI component library I'm putting out. So I'll be making a separate set of Svelte components for working with LCH. I'd like to examine using the conversion code in this repo to support Rec2020, P3, etc. as well as provide a guide / inspiration for implementing the Svelte LCH color picker (IE similar slider display).

It would be fantastic to have an exact license to add / reference for this repo. From the associated blog post and the backgrounds of those involved it appears this repo / code is meant to inform and help folks and bring awareness.

It would also be great to get an idea of licensing aspects to the following referenced source files:

https://drafts.csswg.org/css-color-4/multiply-matrices.js
https://drafts.csswg.org/css-color-4/conversions.js
https://drafts.csswg.org/css-color-4/utilities.js

multiply-matrices.js has a brief MIT attribution and there are statements say in conversions.js on where info was sourced. I know this is the sample code provided from css-color-4 draft, but it is not clearly marked there either.

Discussion: Alternate selector display

I mentioned making a Svelte LCH color picker. I'm interested in providing an alternate display similar the one seen in the HSLuv display, but for LCH. Certainly a little bit of research on my side to get up to speed on the specifics regarding LCH and what not. If this is a reasonable idea perhaps adding the like in this repo makes sense too. I would be glad to contribute. If there are any pointers to a better understanding on how to go about this implementation I would be glad to have a conversation.

It would be nice to have a slider based display and an optional "gamut selector" at seen in the top of this image.

Export?

Would it be possible to have a function which exports the saved colours?

I've taken a screenshot, but that seems the least useful. Happy to help (time, time, time)

gradient stops use clipped RGB channels

Maybe this was for performance reasons, since chroma correction can slow things down?

https://github.com/LeaVerou/css.land/blob/master/lch/lch.js#L80 Should set forceInGamut=true when calling the conversion function.

I think force_into_sRGB_gamut() could also be extended to support chroma reduction for the p3 gamut?

[lch] Importing color(display-p3) produces black

Can not work

Description

Hi! The lch color picker doesn't seem to work anymore, and no matter how I change the values in the panel, the background panel of the webpage doesn't change (it always looks like a checkerboard).

Environment

Safari 16.2

lch() and color() missing the alpha value

This is a nice color picker!

Maybe the lch() and color() functions should display the alpha value?
lch(63% 116 50 / 50%), color(display-p3 1.004 0.3555 0.0983 / 50%) etc.

Force into gamut affects all channels?

Most of tools I see (Adobe and Mac's Colour Meter) would just clip the channel outside the range, so lch(50% 100 100) would be shown as rgb(44% 49% 0%). I'm wondering why have you decided to go with locking LCH hue and lightness and changing chroma instead?

Changing chroma with fixed lightness and hue will still affect sRGB hue, especially at boundaries (right where you're aiming):