-
Notifications
You must be signed in to change notification settings - Fork 92
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
base: main
Are you sure you want to change the base?
Conversation
This is in CSS Color Module Level 4: https://drafts.csswg.org/css-color/#the-hwb-notation A simple colour picker can be found at https://observablehq.com/@parcly-taxel/the-hwb-colour-model
@mbostock I think this is ready to merge. This will serve as another pull request to include for my CS3282 module. |
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.
@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. |
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 |
@Parcly-Taxel @mbostock do you know if this PR is mergeable? |
This will fix #61.
I made a notebook with a picker for this space here.