Skip to content

Commit ec4ee8b

Browse files
svgeesussvgeesus
committed
[css-color-4] add Lab and LCH examples
1 parent 83767ce commit ec4ee8b

File tree

2 files changed

+63
-0
lines changed

2 files changed

+63
-0
lines changed

‎css-color-4/Overview.bs

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1910,6 +1910,17 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
19101910
separated by a slash,
19111911
and interpreted identically to the <<alpha-value>> in ''rgb()''.
19121912

1913+
1914+
<div class="example">
1915+
<pre>
1916+
<span class="swatch" style="--color: rgb(49.06% 13.87% 15.9%)"></span> lab(29.2345% 39.3825 20.0664);
1917+
<span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> lab(52.2345% 40.1645 59.9971);
1918+
<span class="swatch" style="--color: rgb(61.65% 57.51% 9.28%)"></span> lab(60.2345, -5.3654 58.956);
1919+
<span class="swatch" style="--color: rgb(40.73% 65.12% 22.35%)"></span> lab(62.2345% -34.9638 47.7721);
1920+
<span class="swatch" style="--color: rgb(38.29% 67.27% 93.85%)"></span> lab(67.5345% -8.6911 -41.6019);
1921+
</pre>
1922+
</div>
1923+
19131924
<pre class='prod'>
19141925
<dfn>lch()</dfn> = lch( <<percentage>> <<number>> <<hue>> [ / <<alpha-value>> ]? )
19151926
</pre>
@@ -1943,6 +1954,15 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
19431954
separated by a slash,
19441955
and interpreted identically to the <<alpha-value>> in ''rgb()''.
19451956

1957+
<div class="example">
1958+
<pre>
1959+
<span class="swatch" style="--color: rgb(49.06% 13.87% 15.9%)"></span> lch(29.2345% 44.2 27);
1960+
<span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> lch(52.2345% 72.2 56.2);
1961+
<span class="swatch" style="--color: rgb(61.65% 57.51% 9.28%)"></span> lch(60.2345% 59.2 95.2);
1962+
<span class="swatch" style="--color: rgb(40.73% 65.12% 22.35%)"></span> lch(62.2345% 59.2 126.2);
1963+
<span class="swatch" style="--color: rgb(38.29% 67.27% 93.85%)"></span> lch(67.5345% 42.5 258.2);
1964+
</pre>
1965+
</div>
19461966

19471967
<h3 id='rgb-to-lab'>
19481968
Converting sRGB colors to Lab colors</h3>

‎css-color-4/workings/LCH-wheel-sRGB.txt

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
20 degree increments in LCH converted to sRGB
2+
Calculated with https://css.land/lch/
3+
out of gamut indicated in white #FFF
4+
5+
lch(50% 40 0) rgb(70.39% 34.93% 47.35%) 40 0
6+
lch(50% 40 20) rgb(70.77% 35.61% 38.38%) 37.58770483143634, 13.680805733026748
7+
lch(50% 40 40) rgb(68.29% 37.96% 30.2%) 30.64177772475912, 25.71150438746157
8+
lch(50% 40 60) rgb(63.38% 41.21% 23.58%) 20.000000000000004, 34.64101615137754
9+
lch(50% 40 80) rgb(56.54% 44.61% 19.4%) 6.945927106677217, 39.39231012048832
10+
lch(50% 40 100) rgb(48.24% 47.65% 18.76%) -6.945927106677212, 39.39231012048832
11+
lch(50% 40 120) rgb(38.76% 50.1% 22.08%) -19.999999999999993, 34.64101615137755
12+
lch(50% 40 140) rgb(27.84% 51.87% 28.48%) -30.641777724759116, 25.71150438746158
13+
lch(50% 40 160) rgb(12.95% 52.99% 36.81%) -37.587704831436334, 13.680805733026755
14+
#FFF -40, 0
15+
#FFF 37.58770483143634, -13.680805733026746
16+
#FFF -30.64177772475912, -25.71150438746157
17+
#FFF -20.000000000000018, -34.64101615137754
18+
lch(50% 40 260) rgb(21.23% 48.89% 72.92%) -6.945927106677213, -39.39231012048832
19+
lch(50% 40 280) rgb(37.9% 45.95% 73.05%) 6.945927106677199, -39.392310120488325
20+
lch(50% 40 300) rgb(50.54% 42.5% 69.97%) 20.000000000000004, -34.64101615137754
21+
lch(50% 40 320) rgb(60.23% 39.01% 64.12%) 30.641777724759113, -25.711504387461584
22+
lch(50% 40 340) rgb(66.89% 36.21% 56.26%) 37.58770483143634, -13.680805733026745
23+
24+
---
25+
26+
lch(50% 20 0) rgb(59.26% 41.67% 46.97%) 20 20
27+
lch(50% 20 20) rgb(59.66% 41.9% 42.44%) 18.79385241571817, 6.840402866513374
28+
lch(50% 20 40) rgb(58.52% 42.76% 38.39%) 15.32088886237956, 12.855752193730785
29+
lch(50% 20 60) rgb(56.02% 44.07% 35.28%) 10.000000000000002, 17.32050807568877
30+
lch(50% 20 80) rgb(52.43% 45.6% 33.51%) 3.4729635533386083, 19.69615506024416
31+
lch(50% 20 100) rgb(48.05% 47.11% 33.34%) -3.472963553338606, 19.69615506024416
32+
lch(50% 20 120) rgb(43.23% 48.44% 34.83%) -9.999999999999996, 17.320508075688775
33+
lch(50% 20 140) rgb(38.34% 49.48% 37.76%) -15.320888862379558, 12.85575219373079
34+
lch(50% 20 160) rgb(33.83% 50.16% 41.76%) -18.793852415718167, 6.840402866513378
35+
lch(50% 20 180) rgb(30.33% 50.46% 46.34%) -20, 0
36+
lch(50% 20 200) rgb(28.65% 50.36% 50.92%) -18.79385241571817, -6.840402866513373
37+
lch(50% 20 220) rgb(29.5% 49.86% 54.98%) -15.32088886237956, -12.855752193730785
38+
lch(50% 20 240) rgb(32.83% 48.96% 58.03%) -10.000000000000009, -17.32050807568877
39+
lch(50% 20 260) rgb(37.84% 47.73% 59.69%) -3.4729635533386065, -19.69615506024416
40+
lch(50% 20 280) rgb(43.54% 46.24% 59.77%) 3.4729635533385994, -19.696155060244163
41+
lch(50% 20 300) rgb(49.06% 44.66% 58.27%) 10.000000000000002, -17.32050807568877
42+
lch(50% 20 320) rgb(53.79% 43.21% 55.38%) 15.320888862379556, -12.855752193730792
43+
lch(50% 20 340) rgb(57.28% 42.14% 51.46%) 18.79385241571817, -6.840402866513372

0 commit comments

Comments
 (0)