Skip to content

Commit 1ff0593

Browse files
svgeesussvgeesus
committed
[css-color-4] Update Lab/LCH/OKLab/OKLCH grammar for number and percent; add examples
1 parent e121d8e commit 1ff0593

File tree

1 file changed

+25
-9
lines changed

1 file changed

+25
-9
lines changed

‎css-color-4/Overview.bs‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3411,7 +3411,10 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
34113411
CSS allows colors to be directly expressed in Lab and LCH.
34123412

34133413
<pre class='prod'>
3414-
<dfn>lab()</dfn> = lab( [<<percentage>> | none] [<<number>> | none] [<<number>> | none] [ / [<<alpha-value>> | none] ]? )
3414+
<dfn>lab()</dfn> = lab( [<<percentage>> | <<number>> | none]
3415+
[ <<percentage>> | <<number>> | none]
3416+
[ <<percentage>> | <<number>> | none]
3417+
[ / [<<alpha-value>> | none] ]? )
34153418
</pre>
34163419

34173420
<table>
@@ -3475,14 +3478,18 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
34753478
<pre class="lang-css">
34763479
<span class="swatch" style="--color: rgb(49.06% 13.87% 15.9%)"></span> lab(29.2345% 39.3825 20.0664);
34773480
<span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> lab(52.2345% 40.1645 59.9971);
3478-
<span class="swatch" style="--color: rgb(61.65% 57.51% 9.28%)"></span> lab(60.2345% -5.3654 58.956);
3481+
<span class="swatch" style="--color: rgb(61.65% 57.51% 9.28%)"></span> lab(60.2345 -5.3654 58.956);
34793482
<span class="swatch" style="--color: rgb(40.73% 65.12% 22.35%)"></span> lab(62.2345% -34.9638 47.7721);
34803483
<span class="swatch" style="--color: rgb(38.29% 67.27% 93.85%)"></span> lab(67.5345% -8.6911 -41.6019);
3484+
<span class="swatch" style="--color: rgb(50.2% 0% 50.2%)"></span> lab(29.69% 44.888% -29.04%)
34813485
</pre>
34823486
</div>
34833487

34843488
<pre class='prod'>
3485-
<dfn>lch()</dfn> = lch( [<<percentage>> | none] [<<number>> | none] [<<hue>> | none] [ / [<<alpha-value>> | none] ]? )
3489+
<dfn>lch()</dfn> = lch( [<<percentage>> | <<number>> | none]
3490+
[ <<percentage>> | <<number>> | none]
3491+
[ <<hue>> | none]
3492+
[ / [<<alpha-value>> | none] ]? )
34863493
</pre>
34873494

34883495
<table>
@@ -3547,9 +3554,10 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
35473554
<pre class="lang-css">
35483555
<span class="swatch" style="--color: rgb(49.06% 13.87% 15.9%)"></span> lch(29.2345% 44.2 27);
35493556
<span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> lch(52.2345% 72.2 56.2);
3550-
<span class="swatch" style="--color: rgb(61.65% 57.51% 9.28%)"></span> lch(60.2345% 59.2 95.2);
3557+
<span class="swatch" style="--color: rgb(61.65% 57.51% 9.28%)"></span> lch(60.2345 59.2 95.2);
35513558
<span class="swatch" style="--color: rgb(40.73% 65.12% 22.35%)"></span> lch(62.2345% 59.2 126.2);
35523559
<span class="swatch" style="--color: rgb(38.29% 67.27% 93.85%)"></span> lch(67.5345% 42.5 258.2);
3560+
<span class="swatch" style="--color: rgb(50.2% 0% 50.2%)"></span> lch(29.69% 45.553% 327.1)
35533561
</pre>
35543562
</div>
35553563

@@ -3566,7 +3574,10 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
35663574
CSS allows colors to be directly expressed in OKLab and OKLCH.
35673575

35683576
<pre class='prod'>
3569-
<dfn>oklab()</dfn> = oklab( [<<percentage>> | none] [<<number>> | none] [<<number>> | none] [ / [<<alpha-value>> | none] ]? )
3577+
<dfn>oklab()</dfn> = oklab( [ <<percentage>> | <<number>> | none]
3578+
[ <<percentage>> | <<number>> | none]
3579+
[ <<percentage>> | <<number>> | none]
3580+
[ / [<<alpha-value>> | none] ]? )
35703581
</pre>
35713582

35723583
<table>
@@ -3627,14 +3638,18 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
36273638
<pre class="lang-css">
36283639
<span class="swatch" style="--color: rgb(49.06% 13.87% 15.9%)"></span> oklab(40.101% 0.1147 0.0453);
36293640
<span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> oklab(59.686% 0.1009 0.1192);
3630-
<span class="swatch" style="--color: rgb(61.65% 57.51% 9.28%)"></span> oklab(65.125% -0.0320 0.1274);
3641+
<span class="swatch" style="--color: rgb(61.65% 57.51% 9.28%)"></span> oklab(0.65125 -0.0320 0.1274);
36313642
<span class="swatch" style="--color: rgb(40.73% 65.12% 22.35%)"></span> oklab(66.016% -0.1084 0.1114);
36323643
<span class="swatch" style="--color: rgb(38.29% 67.27% 93.85%)"></span> oklab(72.322% -0.0465 -0.1150);
3644+
<span class="swatch" style="--color: rgb(50.2% 0% 50.2%)"></span> oklab(42.1% 41% -25%)
36333645
</pre>
36343646
</div>
36353647

36363648
<pre class='prod'>
3637-
<dfn>oklch()</dfn> = oklch( [<<percentage>> | none] [<<number>> | none] [<<hue>> | none] [ / [<<alpha-value>> | none] ]? )
3649+
<dfn>oklch()</dfn> = oklch( [ <<percentage>> | <<number>> | none]
3650+
[ <<percentage>> | <<number>> | none]
3651+
[ <<hue>> | none]
3652+
[ / [<<alpha-value>> | none] ]? )
36383653
</pre>
36393654

36403655
<table>
@@ -3697,9 +3712,10 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
36973712
<pre class="lang-css">
36983713
<span class="swatch" style="--color: rgb(49.06% 13.87% 15.9%)"></span> oklch(40.101% 0.12332 21.555);
36993714
<span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> oklch(59.686% 0.15619 49.7694);
3700-
<span class="swatch" style="--color: rgb(61.65% 57.51% 9.28%)"></span> oklch(65.125% 0.13138 104.097);
3701-
<span class="swatch" style="--color: rgb(40.73% 65.12% 22.35%)"></span> oklch(66.016% 0.15546 134.231);
3715+
<span class="swatch" style="--color: rgb(61.65% 57.51% 9.28%)"></span> oklch(0.65125 0.13138 104.097);
3716+
<span class="swatch" style="--color: rgb(40.73% 65.12% 22.35%)"></span> oklch(0.66016 0.15546 134.231);
37023717
<span class="swatch" style="--color: rgb(38.29% 67.27% 93.85%)"></span> oklch(72.322% 0.12403 247.996);
3718+
<span class="swatch" style="--color: rgb(50.2% 0% 50.2%)"></span> oklch(42.1% 48.25% 328.4)
37033719
</pre>
37043720
</div>
37053721

0 commit comments

Comments
 (0)