@@ -86,7 +86,7 @@ Mixing colors: the ''color-mix'' function {#colormix}
86
86
(and thus, 60% of the lightness of the blue).
87
87
The chroma and hue of the green are left unchanged.
88
88
89
- <pre class="lang-css"> mix-color(rgb(0% 42.35% 33.33%), rgb(41.2% 69.88% 96.64%), lightness(40%));</pre>
89
+ <pre class="lang-css"> mix-color(rgb(0% 42.35% 33.33%) rgb(41.2% 69.88% 96.64%), lightness(40%));</pre>
90
90
91
91
The calculation is as follows:
92
92
* <span class="swatch" style="--color: rgb(0% 42.35% 33.33%)"></span> rgb(0% 42.35% 33.33%) is lch(40.083% 32.808 171.175)
@@ -104,7 +104,7 @@ Mixing colors: the ''color-mix'' function {#colormix}
104
104
(and thus, 62% of that of the blue).
105
105
The chroma and lightness of the red are left unchanged.
106
106
107
- <pre class="lang-css"> mix-color(rgb(82.02% 30.21% 35.02%), rgb(5.64% 55.94% 85.31%), hue(75.23%));</pre>
107
+ <pre class="lang-css"> mix-color(rgb(82.02% 30.21% 35.02%) rgb(5.64% 55.94% 85.31%) hue(75.23%));</pre>
108
108
109
109
The calculation is as follows:
110
110
* <span class="swatch" style="--color: rgb(82.02% 30.21% 35.02%)"></span> rgb(82.02% 30.21% 35.02%) is lch(52% 58.1 22.7)
@@ -124,7 +124,7 @@ Mixing colors: the ''color-mix'' function {#colormix}
124
124
This time, the lightness is set to 68.4% and
125
125
the chroma is left unchanged.
126
126
127
- <pre class="lang-css"> mix-color(rgb(82.02% 30.21% 35.02%), rgb(5.64% 55.94% 85.31%), hue(75.23%) lightness(68.4%));</pre>
127
+ <pre class="lang-css"> mix-color(rgb(82.02% 30.21% 35.02%) rgb(5.64% 55.94% 85.31%) hue(75.23%) lightness(68.4%));</pre>
128
128
129
129
The calculation is as follows:
130
130
* <span class="swatch" style="--color: rgb(82.02% 30.21% 35.02%)"></span> rgb(82.02% 30.21% 35.02%) is lch(52% 58.1 22.7)
@@ -149,7 +149,7 @@ Mixing colors: the ''color-mix'' function {#colormix}
149
149
(and thus, 70% of the lightness of yellow).
150
150
The chroma and hue of red are left unchanged.
151
151
152
- <pre class="lang-css"> mix-color(red, yellow, lightness(30%));</pre>
152
+ <pre class="lang-css"> mix-color(red yellow lightness(30%));</pre>
153
153
154
154
The calculation is as follows:
155
155
* sRGB <span class="swatch" style="--color: red"></span> red (#F00) is lch(54.2917% 106.8390 40.8526)
@@ -182,7 +182,7 @@ which applies to all color channels.
182
182
keeps the intermediate colors
183
183
as saturated as the endpoint colors.
184
184
185
- <pre class="lang-css"> mix-color(red, yellow, 65%);</pre>
185
+ <pre class="lang-css"> mix-color(red yellow 65%);</pre>
186
186
187
187
The calculation is as follows:
188
188
* sRGB <span class="swatch" style="--color: red"></span> red (#F00) is lch(54.2917% 106.8390 40.8526)
@@ -245,7 +245,7 @@ which is rgb(52.446% 45.821% 62.953%)
245
245
246
246
This shows a desaturated result, compared to LCH interpolation.
247
247
248
- <pre class="lang-css"> mix-color(rgb(82.02% 30.21% 35.02%), rgb(5.64% 55.94% 85.31%), lab() a(38%) b(38%));</pre>
248
+ <pre class="lang-css"> mix-color(rgb(82.02% 30.21% 35.02%) rgb(5.64% 55.94% 85.31%) lab() a(38%) b(38%));</pre>
249
249
250
250
<!-- is that right, lab() or lab ? -->
251
251
@@ -365,7 +365,7 @@ Adjusting colors: the ''color-adjust'' function {#coloradjust}
365
365
with the lightness being reduced by 20%.
366
366
The chroma and hue of red are left unchanged.
367
367
368
- <pre class="lang-css"> color-adjust(peru, lightness(-20%));</pre>
368
+ <pre class="lang-css"> color-adjust(peru lightness(-20%));</pre>
369
369
370
370
The calculation is as follows:
371
371
* <span class="swatch" style="--color: peru"></span> peru (#CD853F) is lch(62.2532% 54.0114 63.6769)
@@ -406,7 +406,7 @@ When an origin color is present, the following keywords can also be used in this
406
406
To manipulate color channels in the sRGB colorspace:
407
407
408
408
<pre>
409
- rgb(from <span class="swatch" style="--color: indianred"></span> indianred, 255 g b)
409
+ rgb(from <span class="swatch" style="--color: indianred"></span> indianred 255 g b)
410
410
</pre>
411
411
412
412
This takes the sRGB value of indianred (205 92 92) and replaces the red channel with 255 to give <span class="swatch" style="--color: rgb(255 92 92)"></span> rgb(255 92 92).
@@ -432,7 +432,7 @@ When an origin color is present, the following keywords can also be used in this
432
432
This adds 180 degrees to the hue angle, giving a complementary color.
433
433
<pre>
434
434
--accent: <span class="swatch" style="--color: lightseagreen"></span> lightseagreen;
435
- --complement: <span class="swatch" style="--color: hsl(357deg 70% 41%)"></span> hsl(from var(--accent), calc(h+180) s l);
435
+ --complement: <span class="swatch" style="--color: hsl(357deg 70% 41%)"></span> hsl(from var(--accent) calc(h+180) s l);
436
436
</pre>
437
437
lightseagreen is hsl(177deg 70% 41%), so --complement is <span class="swatch" style="--color: hsl(357deg 70% 41%)"></span> hsl(357deg 70% 41%)
438
438
</div>
0 commit comments