d3 / d3-color

Color spaces! RGB, HSL, Cubehelix, CIELAB, and more.
https://d3js.org/d3-color
ISC License
398 stars 91 forks source link

HWB colour space + CSS Level 4 syntax #71

Open Parcly-Taxel opened 4 years ago

Parcly-Taxel commented 4 years ago

This will fix #61.

I made a notebook with a picker for this space here.

Parcly-Taxel commented 4 years ago

@mbostock I think this is ready to merge. This will serve as another pull request to include for my CS3282 module.

mbostock commented 4 years ago

Do any browsers support this yet? I’d be more inclined to add it if it had browser support.

Parcly-Taxel commented 4 years ago

Do any browsers support this yet? I’d be more inclined to add it if it had browser support.

@mbostock As far as I know, the CSS Color Module Level 4, which includes HWB, is only a working draft and is not supported by any browser yet. This is why my Observable notebook converts HWB to RGB to insert into the displayed swatch.

However, this D3 module currently does not support some CSS colour formats that are supported by browsers now. Specifically, for the RGB space, all possible combinations of the following are allowed:

Analogous support also exists for the HSL space, with units allowed for the hue. See below:

p {
  color: rgb(73.7 76.7 77.7 / 0.7);
  color: hsl(3.80rad 100% 50% / 70%);
}

I've pushed a commit that adds support for all of the above syntax.

Ayc0 commented 2 years ago

Do any browsers support this yet? I’d be more inclined to add it if it had browser support.

Safari added support for the lch notation (that d3-color already supports: https://caniuse.com/mdn-css_types_color_lch), and for the hwb notation: https://caniuse.com/mdn-css_types_color_hwb in their v15 (they are the only ones that have implemented those 2 notations for now).

And it seems that most browsers have implemented the syntax rgb(R G B / A): https://caniuse.com/mdn-css_types_color_rgb_function_accepts_alpha (and same thing for hsl(H S L / A) https://caniuse.com/mdn-css_types_color_hsl_function_accepts_alpha)

Ayc0 commented 1 year ago

@Parcly-Taxel @mbostock do you know if this PR is mergeable?