Request for Comments: HWB Functions

The CSS working group has been up to all sorts of exciting stuff recently in the
Color Level 4 spec, and the Sass team is starting to think about how to
integrate those cool new features into Sass’s color model. We need more time to
hammer out ex…

The CSS working group has been up to all sorts of exciting stuff recently in the
Color Level 4 spec, and the Sass team is starting to think about how to
integrate those cool new features into Sass’s color model. We need more time to
hammer out exactly the right designs for complex features like the Lab color
space, but that doesn’t mean we can’t add a few new color goodies.

Today we’re announcing a proposal for one such feature: built-in Sass functions
for HWB colors! Once this proposal (drafted by Sass core team member Miriam
Suzanne
) is accepted and implemented, you’ll be able to write colors in HWB
syntax and adjust their whiteness and blackness the same way you can adjust a
color’s saturation and lightness today.

The Functions permalinkThe Functions

Here are the new and improved functions this proposal adds:

color.hwb() permalinkcolor.hwb()

The color.hwb() function defines a color using its hue, whiteness, and
blackness. Like the existing rgb() and hsl() functions, It can either use
the space-separated syntax defined in the spec (hwb(270 20% 40%)) or
the more Sass-y comma-separated syntax (hwb(270, 20%, 40%)). Because HWB
colors use the same sRGB colorspace as all other Sass color values, colors
created this way are fully compatible with all existing Sass color functions and
will be emitted as their RGB equivalents for maximum browser compatibility.

Note that unlike rgb() and hsl(), the proposal doesn’t add this function
to the global scope yet. This is because Sass has a policy of never adding
support for new CSS syntax before at least one browser implements it. Specs have
a tendency to change until they’re locked in by browsers, and if Sass ends up
supporting something different than the browsers themselves that’s bad news!

color.whiteness() and color.blackness() permalinkcolor.whiteness() and color.blackness()

These functions work like the color.saturation() and color.lightness()
functions do for HSL colors. They even work for colors that weren’t created with
color.hwb(), so you can use them to check how pale or dark any color is.

Because HWB colors have the same notion of “hue” as HSL colors, the existing
color.hue() function already works perfectly!

color.scale(), color.adjust(), and color.change() permalinkcolor.scale(), color.adjust(), and color.change()

All three color modification functions now support $whiteness and $blackness
arguments. If you want a color (again no matter how it was created) to be 20%
whiter, just pass it to color.scale($color, $whiteness: 20%) and there you go!

Let us know what you think! permalinkLet us know what you think!

If you’re interested in learning more about this proposal, read it in full on
GitHub. It’s open for comments and revisions for the next month, so if you’d
like to see something change please file an issue and we can discuss it!


Print Share Comment Cite Upload Translate
APA
Natalie Weizenbaum | Sciencx (2024-03-28T15:39:05+00:00) » Request for Comments: HWB Functions. Retrieved from https://www.scien.cx/2020/10/07/request-for-comments-hwb-functions/.
MLA
" » Request for Comments: HWB Functions." Natalie Weizenbaum | Sciencx - Wednesday October 7, 2020, https://www.scien.cx/2020/10/07/request-for-comments-hwb-functions/
HARVARD
Natalie Weizenbaum | Sciencx Wednesday October 7, 2020 » Request for Comments: HWB Functions., viewed 2024-03-28T15:39:05+00:00,<https://www.scien.cx/2020/10/07/request-for-comments-hwb-functions/>
VANCOUVER
Natalie Weizenbaum | Sciencx - » Request for Comments: HWB Functions. [Internet]. [Accessed 2024-03-28T15:39:05+00:00]. Available from: https://www.scien.cx/2020/10/07/request-for-comments-hwb-functions/
CHICAGO
" » Request for Comments: HWB Functions." Natalie Weizenbaum | Sciencx - Accessed 2024-03-28T15:39:05+00:00. https://www.scien.cx/2020/10/07/request-for-comments-hwb-functions/
IEEE
" » Request for Comments: HWB Functions." Natalie Weizenbaum | Sciencx [Online]. Available: https://www.scien.cx/2020/10/07/request-for-comments-hwb-functions/. [Accessed: 2024-03-28T15:39:05+00:00]
rf:citation
» Request for Comments: HWB Functions | Natalie Weizenbaum | Sciencx | https://www.scien.cx/2020/10/07/request-for-comments-hwb-functions/ | 2024-03-28T15:39:05+00:00
https://github.com/addpipe/simple-recorderjs-demo