Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HWB colour space + CSS Level 4 syntax #71

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

Parcly-Taxel
Copy link

This will fix #61.

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

@Parcly-Taxel
Copy link
Author

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

@mbostock
Copy link
Member

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

CSS4 allows omitting the commas from the rgb() and hsl() functions, and
defines rgba() and hsla() as aliases of the former two functions. It
also allows more units: percentage for the opacity and
radian/gradian/turn for the hue. All these are already implemented in
current web browsers, even though HWB (which does not support the
"legacy" CSS3 syntax) is not.
@Parcly-Taxel Parcly-Taxel changed the title HWB colour space HWB colour space + Level 4 syntax Mar 25, 2020
@Parcly-Taxel Parcly-Taxel changed the title HWB colour space + Level 4 syntax HWB colour space + CSS Level 4 syntax Mar 25, 2020
@Parcly-Taxel
Copy link
Author

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:

  • rgb()/rgba()
  • percentages/raw numbers for the colour channels
  • presence/absence of opacity, and percentage/raw number for that opacity
  • commas/commaless notation (spaces between the colour channels, slash to separate opacity)

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.

@Fil Fil added the feature label Jul 10, 2020
@Ayc0
Copy link

Ayc0 commented Oct 16, 2021

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
Copy link

Ayc0 commented Apr 25, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

HWB colors.
4 participants