Adding lab() and lch()

files/en-us/web/css/color_value/lab()/index.html

@@ -0,0 +1,60 @@
+---
+title: lab()
+slug: Web/CSS/color_value/lab()
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Reference
+  - Web
+  - color
+  - lab
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>lab()</code></strong> functional notation expresses a given color in the CIE L*a*b* color space. Lab represents the entire range of color that humans can see.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">lab(29.2345% 39.3825 20.0664);
+lab(52.2345% 40.1645 59.9971);
+lab(52.2345% 40.1645 59.9971 / .5);
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+  <dt>Functional notation: <code>lab(L a b [/ A])</code></dt>
+  <dd><code>L</code> specifies the CIE Lightness, and is a {{cssxref("&lt;percentage&gt;")}} between <code>0%</code> representing black and <code>100%</code> representing white.</dd>
+  <dd>The second argument <code>a</code> is the distance along the <code>a</code> axis in the Lab colorspace.</dd>
+  <dd>The third argument <code>b</code> is the distance along the <code>b</code> axis in the Lab colorspace.</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', '#lab-colors')}}</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.lab")}}</p>
+
+<h2>See also</h2>
+
+<ul>
+  <li><a href="https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/">LCH colors in CSS: what, why, and how?</a></li>
+  <li><a href="https://webkit.org/blog/11577/release-notes-for-safari-technology-preview-122/">Safari Technology Preview 122 release notes</a>: includes <code>lab()</code> and {{cssxref("color_value/lch()",'lch()')}} colors.</li>
+</ul>

files/en-us/web/css/color_value/lch()/index.html

@@ -0,0 +1,60 @@
+---
+title: lch()
+slug: Web/CSS/color_value/lch()
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Reference
+  - Web
+  - color
+  - lch
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>lch()</code></strong> functional notation expresses a given color in the LCH color space. It has the same L axis as {{cssxref("color_value/lab()","lab()")}}, but uses polar coordinates C (Chroma) and H (Hue).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">lch(29.2345% 44.2 27);
+lch(52.2345% 72.2 56.2);
+lch(52.2345% 72.2 56.2 / .5);
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+  <dt>Functional notation: <code>lab(L C H [/ A])</code></dt>
+  <dd><code>L</code> specifies the CIE Lightness, and is a {{cssxref("&lt;percentage&gt;")}} between <code>0%</code> representing black and <code>100%</code> representing white.</dd>
+  <dd>The second argument <code>C</code> is the chroma (roughly representing the "amount of color"). Its minimum useful value is 0, while its maximum is theoretically unbounded (but in practice does not exceed 230).</dd>
+  <dd>The third argument <code>H</code> is the hue angle. <code>0deg</code> points along the positive "a" axis (toward purplish red), <code>90deg</code> points along the positive "b" axis (toward mustard yellow), <code>180deg</code> points along the negative "a" axis (toward greenish cyan), and <code>270deg</code> points along the negative "b" axis (toward sky blue).</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', '#lab-colors')}}</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.lab")}}</p>
+
+<h2>See also</h2>
+
+<ul>
+  <li><a href="https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/">LCH colors in CSS: what, why, and how?</a></li>
+  <li><a href="https://webkit.org/blog/11577/release-notes-for-safari-technology-preview-122/">Safari Technology Preview 122 release notes</a>: includes <code>lch()</code> and {{cssxref("color_value/lab()",'lab()')}} colors.</li>
+</ul>