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..a2e7bbb19ed444b
--- /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
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>hwb()</code></strong> functional notation expresses a given color according to its hue, whitness, and blackness. An optional alpha component represents the color's transparency.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">hwb(194 0% 0%) /* #00c3ff */
+hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
+hwb(194, 0%, 0%, .5); /* with comma-separated values */
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+  <dt>Functional notation: <code>hwb[a](H W B[/ A])</code></dt>
+  <dd><code>H</code> (hue) is an {{cssxref("&lt;angle&gt;")}} of the color circle given in <code>deg</code>s, <code>rad</code>s, <code>grad</code>s, or <code>turn</code>s in {{SpecName("CSS4 Colors","#the-hsl-notation")}}. When written as a unitless {{cssxref("&lt;number&gt;")}}, 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 <code>&lt;angle&gt;</code>, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.</dd>
+  <dd><code>W</code> (whiteness) specifies the amount of white to mix in, as a percentage from 0% (no whiteness) to 100% (full whiteness).</dd>
+  <dd><code>B</code> (blackness) specifies the amount of black to mix in, also from 0% (no blackness) to 100% (full blackness).</dd>
+  <dd><code>A</code> (alpha) can be a {{cssxref("&lt;number&gt;")}} between <code>0</code> and <code>1</code>, or a {{cssxref("&lt;percentage&gt;")}}, where the number <code>1</code> corresponds to <code>100%</code> (full opacity).</dd>
+ </dl>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Specification</th>
+    <th scope="col">Status</th>
+    <th scope="col">Comment</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td>{{SpecName('CSS4 Colors', '#the-hwb-notation')}}</td>
+    <td>{{Spec2('CSS4 Colors')}}</td>
+    <td>Initial definition</td>
+   </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.types.color.hwb")}}</p>
+
+<p>The <code>hwb()</code> value has yet to be implemented in any browser. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1352755">Mozilla bug: 1352755</a></p>