[css-color-5] Lab Example

Author: LeaVerou

css-color-5/Overview.bs

@@ -240,7 +240,7 @@ Adjusting colors: the ''color-adjust'' function {#coloradjust}
 Relative color syntax {#relative-colors}
 --------------------------------------------------------
 
-Besides specifying absolute coordinates, all color functions can also be used with a *relative syntax* to produce colors in the function's target color space, based on an existing color (henceforth referred to as "origin color"). This syntax consists of the keyword `from`, a <<color>> value, and optionally numerical coordinates specific to the color function. To allow calculations on the original color's coordinates, there are single-letter keywords for each coordinate and `alpha` that corresponds to the color's alpha. If no coordinates are specified, the function merely converts the origin color to the target function's color space.
+Besides specifying absolute coordinates, all color functions can also be used with a *relative syntax* to produce colors in the function's target color space, based on an existing color (henceforth referred to as "origin color"). This syntax consists of the keyword ''from'', a <<color>> value, and optionally numerical coordinates specific to the color function. To allow calculations on the original color's coordinates, there are single-letter keywords for each coordinate and `alpha` that corresponds to the color's alpha. If no coordinates are specified, the function merely converts the origin color to the target function's color space.
 
 The following sections outline the relative color syntax for each color function.
 
@@ -309,6 +309,17 @@ When an origin color is present, the following keywords can also be used in this
 - 'b' is a <<number>> that corresponds to the origin color's CIELab b axis
 - 'alpha' is a <<percentage>> that corresponds to the origin color's alpha transparency
 
+<div class="example">
+	Multiple ways to adjust the transparency of a base color:
+
+	* ''lab(from var(--mycolor) l a b / 100%)'' sets the alpha of ''var(--mycolor)'' to 100% regardless of what it originally was.
+	* ''lab(from var(--mycolor) l a b / calc(alpha * 0.8))'' reduces the alpha of ''var(--mycolor)'' by 20% of its original value.
+	* ''lab(from var(--mycolor) l a b / calc(alpha - 20%))'' reduces the alpha of ''var(--mycolor)'' by 20% of 100%.
+
+	Note that all the adjustments are lossless in the sense that no gamut clipping occurs, since lab() encompasses all visible color.
+	This is not true for the alpha adjustments in the sRGB based functions (such as'rgb()', 'hsl()', or 'hwb()'), which would also convert to sRGB in addition to adjusting the alpha transparency.
+</div>
+
 <h4>Relative LCH colors</h4>
 
 The grammar of the ''lch()'' function is extended as follows: