search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.3k stars 4.11k forks source link

Add support for CSS Color Level 5 ('hwb', 'lab', 'lch', 'oklab', 'oklch') #52440

Open ghost opened 1 year ago

ghost commented 1 year ago

What problem does this address?

Hey. When editing a block, only these are available: RGB, HSL, Hex.

SCREENSHOT-2

As you can see, in this example, "hwb", "lab", "lch", "oklab" and "oklch "are missing.

What is your proposed solution?

I pleasantly ask you to: Recognize the missing CSS Color Syntaxes. List: https://www.w3.org/TR/css-color-5/#relative-colors More info: https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/ and https://atmos.style/blog/lch-color-space More info: https://caniuse.com/css-lch-lab and https://caniuse.com/mdn-css_types_color_hwb

Ren2049 commented 1 year ago

Okxxx is the real deal for color consistency, but lab, lch, oklab and oklch formats aren't useful for color picking because they follow the color gamut very closely, meaning they can't be represented in a square or cylinder like a color picker because each hue has different boundaries.

There's a okhsl and okhsv hsl equivalent though: https://bottosson.github.io/posts/colorpicker/

Here's a okhsv/okhsl picker and having this in WP would be a real advantage for designers: https://ok-color-picker.netlify.app

The better color consistency means that it gets rid of the hue shifts of regular HSL/RGB and has better hue distribution across the 360° of a color wheel which is useful for programmatic color palettes.