From 67ab750a003f6437f5eb21bc033c00ff064b384d Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Mon, 15 Mar 2021 09:22:49 +0000 Subject: [PATCH 1/2] adding page for hwb() --- .../web/css/color_value/hwb()/index.html | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 files/en-us/web/css/color_value/hwb()/index.html diff --git a/files/en-us/web/css/color_value/hwb()/index.html b/files/en-us/web/css/color_value/hwb()/index.html new file mode 100644 index 000000000000000..d75e3f8284e88b7 --- /dev/null +++ b/files/en-us/web/css/color_value/hwb()/index.html @@ -0,0 +1,55 @@ +--- +title: hwb() +slug: Web/CSS/color_value/hwb() +tags: + - CSS + - CSS Data Type + - Data Type + - Reference + - Web + - color + - hwb +--- +
{{CSSRef}}
+ +

The hwb() functional notation expresses a given color according to its hue, whitness, and blackness. An optional alpha component represents the color's transparency.

+ +

Syntax

+ +
hwb(194 0% 0%) /* #00c3ff */
+hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
+hwb(194, 0%, 0%, .5); /* with comma-separated values */
+
+ +

Values

+ +
+
Functional notation: hsl[a](H, S, L[, A])
+
H (hue) is an {{cssxref("<angle>")}} of the color circle given in degs, rads, grads, or turns in {{SpecName("CSS4 Colors","#the-hsl-notation")}}. When written as a unitless {{cssxref("<number>")}}, it is interpreted as degrees, as specified in {{SpecName("CSS3 Colors", "#hsl-color")}}. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an <angle>, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.
+
W (whiteness) specifies the amount of white to mix in, as a percentage from 0% (no whiteness) to 100% (full whiteness).
+
B (blackness) specifies the amount of black to mix in, also from 0% (no blackness) to 100% (full blackness).
+
A (alpha) can be a {{cssxref("<number>")}} between 0 and 1, or a {{cssxref("<percentage>")}}, where the number 1 corresponds to 100% (full opacity).
+
+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Colors', '#the-hwb-notation')}}{{Spec2('CSS4 Colors')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("css.types.color.hwb")}}

+ +

The hwb() value has yet to be implemented in any browser. Mozilla bug: 1352755

From b151b9c3a9e58f1c569eeb660f842467130fe321 Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Mon, 15 Mar 2021 11:17:57 +0000 Subject: [PATCH 2/2] fix --- files/en-us/web/css/color_value/hwb()/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/color_value/hwb()/index.html b/files/en-us/web/css/color_value/hwb()/index.html index d75e3f8284e88b7..a2e7bbb19ed444b 100644 --- a/files/en-us/web/css/color_value/hwb()/index.html +++ b/files/en-us/web/css/color_value/hwb()/index.html @@ -24,7 +24,7 @@

Syntax

Values

-
Functional notation: hsl[a](H, S, L[, A])
+
Functional notation: hwb[a](H W B[/ A])
H (hue) is an {{cssxref("<angle>")}} of the color circle given in degs, rads, grads, or turns in {{SpecName("CSS4 Colors","#the-hsl-notation")}}. When written as a unitless {{cssxref("<number>")}}, it is interpreted as degrees, as specified in {{SpecName("CSS3 Colors", "#hsl-color")}}. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an <angle>, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.
W (whiteness) specifies the amount of white to mix in, as a percentage from 0% (no whiteness) to 100% (full whiteness).
B (blackness) specifies the amount of black to mix in, also from 0% (no blackness) to 100% (full blackness).