Skip to content

Commit 29024b0

Browse files
committed
[css-color-5] add LCH colorpicker example
1 parent 7ac7d93 commit 29024b0

File tree

1 file changed

+14
-1
lines changed

1 file changed

+14
-1
lines changed

css-color-5/Overview.bs

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,19 @@ Introduction {#intro}
4141
this becomes even more useful to not need to manually set color,
4242
and to instead have a single source from which schemes are calculated.
4343

44+
<figure>
45+
<p><img src="images/LC-picker-scale.png" alt="LC color picker" style="width: 40vmin"><br/>
46+
<img src="images/LC-picker-map2.png" alt="chloropleth map of the US" style="width: 48vmin"></p>
47+
<figcaption>Above, a color picker operating in LCH space.
48+
Here, a pair of colors are being used
49+
to define a color scale
50+
on the Chroma-Lightness plane (constant Hue).
51+
Below, the color scale in use on a chloropleth map.
52+
</figcaption>
53+
</figure>
54+
4455
Currently Sass, calc() on HSL values, or PostCSS is used to do this.
45-
Preprocessors are unable to work on dynamically adjusted colors,
56+
However, preprocessors are unable to work on dynamically adjusted colors;
4657
all current solutions are restricted to the sRGB gamut
4758
and to the perceptual limitations of HSL
4859
(colors are bunched up in the color wheel,
@@ -61,6 +72,8 @@ Introduction {#intro}
6172
However, other colorspaces can be specified,
6273
including ``hsl()`` or ``srgb`` if desired.
6374

75+
76+
6477
Mixing colors: the ''color-mix'' function {#colormix}
6578
=====================================================
6679

0 commit comments

Comments
 (0)