[css-color-5] Relative color syntax

Author: LeaVerou

css-color-5/Overview.bs

@@ -182,7 +182,7 @@ Modifying colors {#colormodify}
 ===============================
 
 Note: There are currently two proposals for modifying colors:
-''color-adjust'' and [[#extended-color|Extending color() to add modifiers]].
+''color-adjust'' and [[#relative-colors|Relative color syntax]].
 
 Issue(3187): there are two proposals for color modification (<a href="https://github.com/w3c/csswg-drafts/issues/3187#issuecomment-499126198">proposal 1</a>, <a href="https://gist.github.com/una/edcfa0d3600e0b89b2ebf266bf549721">proposal 2</a>).
 The CSS WG expects that the best aspects of each
@@ -237,6 +237,111 @@ Adjusting colors: the ''color-adjust'' function {#coloradjust}
 
 <img src="images/adjust_red_lightness30.png" alt="Result of adjust-color(red, lightness(30%)" />
 
-Extending ''color()'' to add modifiers {#extended-color}
+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. 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.
+
+Issue: A future version of this specification may define a relative syntax for ''color()'' as well.
+
+<h4>Relative RGB colors</h4>
+
+The grammar of the ''rgb()'' function is extended as follows:
+
+<pre class='prod'>
+<dfn>rgb()</dfn> = rgb([from <<color>>]? <<percentage>>{3} [ / <<alpha-value>> ]? ) |
+		rgb([from <<color>>]? <<number>>{3} [ / <<alpha-value>> ]? )
+<dfn>&lt;alpha-value></dfn> = <<number>> | <<percentage>>
+</pre>
+
+The following keywords can also be used in this function (provided the end result conforms to the expected type for the parameter) and correspond to:
+
+- 'r' is a <<percentage>> that corresponds to the origin color's red channel after its conversion to sRGB
+- 'g' is a <<percentage>> that corresponds to the origin color's green channel after its conversion to sRGB
+- 'b' is a <<percentage>> that corresponds to the origin color's blue channel after its conversion to sRGB
+- 'alpha' is a <<percentage>> that corresponds to the origin color's alpha transparency
+
+<h4>Relative HSL colors</h4>
+
+The grammar of the ''hsl()'' function is extended as follows:
+
+<pre class='prod'>
+<dfn>hsl()</dfn> = hsl([from <<color>>]? <<hue>> <<percentage>> <<percentage>> [ / <<alpha-value>> ]? )
+<dfn>&lt;hue></dfn> = <<number>> | <<angle>>
+</pre>
+
+The following keywords can also be used in this function (provided the end result conforms to the expected type for the parameter) and correspond to:
+
+- 'h' is a <<number>> that corresponds to the origin color's HSL hue after its conversion to sRGB, normalized to a [0, 360) range.
+- 's' is a <<percentage>> that corresponds to the origin color's HSL saturation after its conversion to sRGB
+- 'l' is a <<percentage>> that corresponds to the origin color's HSL lightness after its conversion to sRGB
+- 'alpha' is a <<percentage>> that corresponds to the origin color's alpha transparency
+
+<h4>Relative HWB colors</h4>
+
+The grammar of the ''hwb()'' function is extended as follows:
+
+<pre class='prod'>
+	<dfn>hwb()</dfn> = hwb([from <<color>>]? <<hue>> <<percentage>> <<percentage>> [ / <<alpha-value>> ]? )
+</pre>
+
+The following keywords can also be used in this function (provided the end result conforms to the expected type for the parameter) and correspond to:
+
+- 'h' is a <<number>> that corresponds to the origin color's HWB hue after its conversion to sRGB
+- 'w' is a <<percentage>> that corresponds to the origin color's HWB whiteness after its conversion to sRGB
+- 'b' is a <<percentage>> that corresponds to the origin color's HWB blackness after its conversion to sRGB
+- 'alpha' is a <<percentage>> that corresponds to the origin color's alpha transparency
+
+<h4>Relative Lab colors</h4>
+
+The grammar of the ''lab()'' function is extended as follows:
+
+<pre class='prod'>
+<dfn>lab()</dfn> = lab([from <<color>>]? <<percentage>> <<number>> <<number>> [ / <<alpha-value>> ]? )
+</pre>
+
+The following keywords can also be used in this function (provided the end result conforms to the expected type for the parameter) and correspond to:
+
+- 'l' is a <<percentage>> that corresponds to the origin color's CIE Lightness
+- 'a' is a <<number>> that corresponds to the origin color's CIELab a axis
+- '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
+
+<h4>Relative LCH colors</h4>
+
+The grammar of the ''lch()'' function is extended as follows:
+
+<pre class='prod'>
+<dfn>lch()</dfn> = lch([from <<color>>]? <<percentage>> <<number>> <<hue>> [ / <<alpha-value>> ]? )
+</pre>
+
+The following keywords can also be used in this function (provided the end result conforms to the expected type for the parameter) and correspond to:
+
+- 'l' is a <<percentage>> that corresponds to the origin color's CIE Lightness
+- 'c' is a <<number>> that corresponds to the origin color's LCH chroma
+- 'h' is a <<number>> that corresponds to the origin color's LCH hue, normalized to a [0, 360) range.
+- 'alpha' is a <<percentage>> that corresponds to the origin color's alpha transparency
+
+<div class="example">
+	''lch(from peru calc(l * 0.8) c h)'' produces a color that is 20% darker than <span class="swatch" style="--color: peru"></span> peru or lch(62.2532% 54.0114 63.6769), with its chroma and hue left unchanged.
+	The result is <span class="swatch" style="--color: rgb(57.58%, 32.47%, 3.82%)"> </span> lch(49.80256% 54.0114 63.6769)
+</div>
+
+<h4>Relative grayscale colors</h4>
+
+The grammar of the ''gray()'' function is extended as follows:
+
+<pre class='prod'>
+<dfn>gray()</dfn> = gray([from <<color>>]? <<number>>  [ / <<alpha-value>> ]? )
+</pre>
+
+The following keywords can also be used in this function (provided the end result conforms to the expected type for the parameter) and correspond to:
+
+- 'l' is a <<percentage>> that corresponds to the origin color's CIE Lightness
+- 'alpha' is a <<percentage>> that corresponds to the origin color's alpha transparency
+
+<div class="example">
+	''gray(from var(--base-color) l)'' produces a grayscale version of ''var(--base-color)'' with the same lightness.
+</div>