feat: add lch table

This commit is contained in:
Andreas 2024-04-11 02:51:41 +02:00
parent 89111dff96
commit 63f2492c1b
No known key found for this signature in database
GPG key ID: E1B786F950ED3FAF

692
resources/lch.md Normal file
View file

@ -0,0 +1,692 @@
<h3 align="center">
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
Catppuccin
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
</h3>
<h6 align="center">
LCH Colours
</h6>
<p align="center">
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/palette/macchiato.png" width="400" />
</p>
<details>
<summary>🌻 Latte</summary>
<table>
<tr>
<th></th>
<th>Labels</th>
<th>Hex</th>
<th>LCH</th>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_rosewater.png" width="23"/></td>
<td>Rosewater</td>
<td><code>#dc8a78</code></td>
<td><code>lch(65.968% 38.655 37.414)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_flamingo.png" width="23"/></td>
<td>Flamingo</td>
<td><code>#dd7878</code></td>
<td><code>lch(62.246% 44.175 24.847)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_pink.png" width="23"/></td>
<td>Pink</td>
<td><code>#ea76cb</code></td>
<td><code>lch(65.682% 58.173 336.456)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_mauve.png" width="23"/></td>
<td>Mauve</td>
<td><code>#8839ef</code></td>
<td><code>lch(43.717% 99.374 307.123)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_red.png" width="23"/></td>
<td>Red</td>
<td><code>#d20f39</code></td>
<td><code>lch(45.538% 77.148 26.15)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_maroon.png" width="23"/></td>
<td>Maroon</td>
<td><code>#e64553</code></td>
<td><code>lch(54.445% 69.874 25.543)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_peach.png" width="23"/></td>
<td>Peach</td>
<td><code>#fe640b</code></td>
<td><code>lch(62.682% 91.017 50.746)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_yellow.png" width="23"/></td>
<td>Yellow</td>
<td><code>#df8e1d</code></td>
<td><code>lch(66.431% 71.037 68.522)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_green.png" width="23"/></td>
<td>Green</td>
<td><code>#40a02b</code></td>
<td><code>lch(58.497% 66.841 133.098)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_teal.png" width="23"/></td>
<td>Teal</td>
<td><code>#179299</code></td>
<td><code>lch(54.791% 33.136 203.578)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_sky.png" width="23"/></td>
<td>Sky</td>
<td><code>#04a5e5</code></td>
<td><code>lch(63.136% 47.066 246.053)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_sapphire.png" width="23"/></td>
<td>Sapphire</td>
<td><code>#209fb5</code></td>
<td><code>lch(59.868% 35.37 217.272)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_blue.png" width="23"/></td>
<td>Blue</td>
<td><code>#1e66f5</code></td>
<td><code>lch(46.109% 82.041 285.517)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_lavender.png" width="23"/></td>
<td>Lavender</td>
<td><code>#7287fd</code></td>
<td><code>lch(59.036% 64.952 286.149)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_text.png" width="23"/></td>
<td>Text</td>
<td><code>#4c4f69</code></td>
<td><code>lch(34.127% 16.006 283.237)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_subtext1.png" width="23"/></td>
<td>Subtext1</td>
<td><code>#5c5f77</code></td>
<td><code>lch(40.74% 14.354 282.297)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_subtext0.png" width="23"/></td>
<td>Subtext0</td>
<td><code>#6c6f85</code></td>
<td><code>lch(47.176% 12.835 281.422)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_overlay2.png" width="23"/></td>
<td>Overlay2</td>
<td><code>#7c7f93</code></td>
<td><code>lch(53.458% 11.419 280.547)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_overlay1.png" width="23"/></td>
<td>Overlay1</td>
<td><code>#8c8fa1</code></td>
<td><code>lch(59.605% 10.087 279.616)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_overlay0.png" width="23"/></td>
<td>Overlay0</td>
<td><code>#9ca0b0</code></td>
<td><code>lch(65.927% 8.898 276.164)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_surface2.png" width="23"/></td>
<td>Surface2</td>
<td><code>#acb0be</code></td>
<td><code>lch(71.842% 7.703 274.588)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_surface1.png" width="23"/></td>
<td>Surface1</td>
<td><code>#bcc0cc</code></td>
<td><code>lch(77.66% 6.56 272.603)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_surface0.png" width="23"/></td>
<td>Surface0</td>
<td><code>#ccd0da</code></td>
<td><code>lch(83.391% 5.468 269.969)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_base.png" width="23"/></td>
<td>Base</td>
<td><code>#eff1f5</code></td>
<td><code>lch(95.076% 2.186 265.971)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_mantle.png" width="23"/></td>
<td>Mantle</td>
<td><code>#e6e9ef</code></td>
<td><code>lch(92.244% 3.297 266.103)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/latte_crust.png" width="23"/></td>
<td>Crust</td>
<td><code>#dce0e8</code></td>
<td><code>lch(89.042% 4.425 266.248)</code></td>
</tr>
</table>
</details>
<details>
<summary>🪴 Frappé</summary>
<table>
<tr>
<th></th>
<th>Labels</th>
<th>Hex</th>
<th>LCH</th>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_rosewater.png" width="23"/></td>
<td>Rosewater</td>
<td><code>#f2d5cf</code></td>
<td><code>lch(87.601% 11.895 35.29)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_flamingo.png" width="23"/></td>
<td>Flamingo</td>
<td><code>#eebebe</code></td>
<td><code>lch(81.324% 19.032 21.265)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_pink.png" width="23"/></td>
<td>Pink</td>
<td><code>#f4b8e4</code></td>
<td><code>lch(81.398% 30.444 334.249)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_mauve.png" width="23"/></td>
<td>Mauve</td>
<td><code>#ca9ee6</code></td>
<td><code>lch(71.179% 40.215 311.356)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_red.png" width="23"/></td>
<td>Red</td>
<td><code>#e78284</code></td>
<td><code>lch(65.889% 43.281 23.12)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_maroon.png" width="23"/></td>
<td>Maroon</td>
<td><code>#ea999c</code></td>
<td><code>lch(71.662% 33.563 20.357)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_peach.png" width="23"/></td>
<td>Peach</td>
<td><code>#ef9f76</code></td>
<td><code>lch(72.996% 43.831 51.197)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_yellow.png" width="23"/></td>
<td>Yellow</td>
<td><code>#e5c890</code></td>
<td><code>lch(82.125% 32.387 81.372)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_green.png" width="23"/></td>
<td>Green</td>
<td><code>#a6d189</code></td>
<td><code>lch(79.448% 39.354 128.066)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_teal.png" width="23"/></td>
<td>Teal</td>
<td><code>#81c8be</code></td>
<td><code>lch(75.707% 25.059 185.578)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_sky.png" width="23"/></td>
<td>Sky</td>
<td><code>#99d1db</code></td>
<td><code>lch(80.23% 20.249 213.285)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_sapphire.png" width="23"/></td>
<td>Sapphire</td>
<td><code>#85c1dc</code></td>
<td><code>lch(74.69% 24.973 233.348)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_blue.png" width="23"/></td>
<td>Blue</td>
<td><code>#8caaee</code></td>
<td><code>lch(69.352% 37.932 273.54)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_lavender.png" width="23"/></td>
<td>Lavender</td>
<td><code>#babbf1</code></td>
<td><code>lch(77.21% 28.3 286.741)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_text.png" width="23"/></td>
<td>Text</td>
<td><code>#c6d0f5</code></td>
<td><code>lch(83.609% 19.599 276.328)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_subtext1.png" width="23"/></td>
<td>Subtext1</td>
<td><code>#b5bfe2</code></td>
<td><code>lch(77.425% 18.881 275.819)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_subtext0.png" width="23"/></td>
<td>Subtext0</td>
<td><code>#a5adce</code></td>
<td><code>lch(70.92% 18.006 277.465)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_overlay2.png" width="23"/></td>
<td>Overlay2</td>
<td><code>#949cbb</code></td>
<td><code>lch(64.511% 17.276 276.966)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_overlay1.png" width="23"/></td>
<td>Overlay1</td>
<td><code>#838ba7</code></td>
<td><code>lch(57.943% 16.005 275.975)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_overlay0.png" width="23"/></td>
<td>Overlay0</td>
<td><code>#737994</code></td>
<td><code>lch(51.056% 15.663 278.483)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_surface2.png" width="23"/></td>
<td>Surface2</td>
<td><code>#626880</code></td>
<td><code>lch(44.161% 14.357 277.515)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_surface1.png" width="23"/></td>
<td>Surface1</td>
<td><code>#51576d</code></td>
<td><code>lch(37.097% 13.613 276.879)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_surface0.png" width="23"/></td>
<td>Surface0</td>
<td><code>#414559</code></td>
<td><code>lch(29.533% 12.729 279.758)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_base.png" width="23"/></td>
<td>Base</td>
<td><code>#303446</code></td>
<td><code>lch(21.911% 12.01 279.328)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_mantle.png" width="23"/></td>
<td>Mantle</td>
<td><code>#292c3c</code></td>
<td><code>lch(18.245% 10.908 280.594)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/frappe_crust.png" width="23"/></td>
<td>Crust</td>
<td><code>#232634</code></td>
<td><code>lch(15.338% 9.789 279.567)</code></td>
</tr>
</table>
</details>
<details>
<summary>🌺 Macchiato</summary>
<table>
<tr>
<th></th>
<th>Labels</th>
<th>Hex</th>
<th>LCH</th>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_rosewater.png" width="23"/></td>
<td>Rosewater</td>
<td><code>#f4dbd6</code></td>
<td><code>lch(89.387% 10.125 34.793)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_flamingo.png" width="23"/></td>
<td>Flamingo</td>
<td><code>#f0c6c6</code></td>
<td><code>lch(83.597% 16.464 21.01)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_pink.png" width="23"/></td>
<td>Pink</td>
<td><code>#f5bde6</code></td>
<td><code>lch(82.697% 28.357 334.162)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_mauve.png" width="23"/></td>
<td>Mauve</td>
<td><code>#c6a0f6</code></td>
<td><code>lch(71.793% 46.509 305.267)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_red.png" width="23"/></td>
<td>Red</td>
<td><code>#ed8796</code></td>
<td><code>lch(68.065% 42.221 13.778)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_maroon.png" width="23"/></td>
<td>Maroon</td>
<td><code>#ee99a0</code></td>
<td><code>lch(72.222% 34.902 17.234)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_peach.png" width="23"/></td>
<td>Peach</td>
<td><code>#f5a97f</code></td>
<td><code>lch(76.097% 42.06 52.819)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_yellow.png" width="23"/></td>
<td>Yellow</td>
<td><code>#eed49f</code></td>
<td><code>lch(86.168% 30.025 82.739)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_green.png" width="23"/></td>
<td>Green</td>
<td><code>#a6da95</code></td>
<td><code>lch(82.146% 39.165 133.52)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_teal.png" width="23"/></td>
<td>Teal</td>
<td><code>#8bd5ca</code></td>
<td><code>lch(80.194% 25.936 184.982)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_sky.png" width="23"/></td>
<td>Sky</td>
<td><code>#91d7e3</code></td>
<td><code>lch(81.66% 24.495 212.875)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_sapphire.png" width="23"/></td>
<td>Sapphire</td>
<td><code>#7dc4e4</code></td>
<td><code>lch(75.351% 28.826 234.228)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_blue.png" width="23"/></td>
<td>Blue</td>
<td><code>#8aadf4</code></td>
<td><code>lch(70.243% 39.773 272.209)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_lavender.png" width="23"/></td>
<td>Lavender</td>
<td><code>#b7bdf8</code></td>
<td><code>lch(77.702% 31.022 283.844)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_text.png" width="23"/></td>
<td>Text</td>
<td><code>#cad3f5</code></td>
<td><code>lch(84.676% 17.959 276.338)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_subtext1.png" width="23"/></td>
<td>Subtext1</td>
<td><code>#b8c0e0</code></td>
<td><code>lch(77.858% 17.161 276.932)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_subtext0.png" width="23"/></td>
<td>Subtext0</td>
<td><code>#a5adcb</code></td>
<td><code>lch(70.836% 16.441 276.382)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_overlay2.png" width="23"/></td>
<td>Overlay2</td>
<td><code>#939ab7</code></td>
<td><code>lch(63.777% 16.166 277.457)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_overlay1.png" width="23"/></td>
<td>Overlay1</td>
<td><code>#8087a2</code></td>
<td><code>lch(56.448% 15.452 276.908)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_overlay0.png" width="23"/></td>
<td>Overlay0</td>
<td><code>#6e738d</code></td>
<td><code>lch(48.728% 15.16 279.598)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_surface2.png" width="23"/></td>
<td>Surface2</td>
<td><code>#5b6078</code></td>
<td><code>lch(40.979% 14.467 279.198)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_surface1.png" width="23"/></td>
<td>Surface1</td>
<td><code>#494d64</code></td>
<td><code>lch(33.082% 14.32 280.832)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_surface0.png" width="23"/></td>
<td>Surface0</td>
<td><code>#363a4f</code></td>
<td><code>lch(24.727% 13.706 280.662)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_base.png" width="23"/></td>
<td>Base</td>
<td><code>#24273a</code></td>
<td><code>lch(16.021% 13.102 282.512)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_mantle.png" width="23"/></td>
<td>Mantle</td>
<td><code>#1e2030</code></td>
<td><code>lch(12.63% 11.32 283.554)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/macchiato_crust.png" width="23"/></td>
<td>Crust</td>
<td><code>#181926</code></td>
<td><code>lch(9.137% 9.474 285.135)</code></td>
</tr>
</table>
</details>
<details>
<summary>🌿 Mocha</summary>
<table>
<tr>
<th></th>
<th>Labels</th>
<th>Hex</th>
<th>LCH</th>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_rosewater.png" width="23"/></td>
<td>Rosewater</td>
<td><code>#f5e0dc</code></td>
<td><code>lch(90.822% 8.398 34.114)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_flamingo.png" width="23"/></td>
<td>Flamingo</td>
<td><code>#f2cdcd</code></td>
<td><code>lch(85.616% 14.363 20.811)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_pink.png" width="23"/></td>
<td>Pink</td>
<td><code>#f5c2e7</code></td>
<td><code>lch(83.88% 25.693 334.292)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_mauve.png" width="23"/></td>
<td>Mauve</td>
<td><code>#cba6f7</code></td>
<td><code>lch(73.715% 43.723 305.702)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_red.png" width="23"/></td>
<td>Red</td>
<td><code>#f38ba8</code></td>
<td><code>lch(70.052% 42.909 3.938)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_maroon.png" width="23"/></td>
<td>Maroon</td>
<td><code>#eba0ac</code></td>
<td><code>lch(73.666% 30.383 10.862)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_peach.png" width="23"/></td>
<td>Peach</td>
<td><code>#fab387</code></td>
<td><code>lch(79.073% 40.402 55.394)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_yellow.png" width="23"/></td>
<td>Yellow</td>
<td><code>#f9e2af</code></td>
<td><code>lch(90.87% 28.175 84.518)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_green.png" width="23"/></td>
<td>Green</td>
<td><code>#a6e3a1</code></td>
<td><code>lch(84.85% 39.255 138.768)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_teal.png" width="23"/></td>
<td>Teal</td>
<td><code>#94e2d5</code></td>
<td><code>lch(84.558% 27.231 183.499)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_sky.png" width="23"/></td>
<td>Sky</td>
<td><code>#89dceb</code></td>
<td><code>lch(82.865% 28.299 213.89)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_sapphire.png" width="23"/></td>
<td>Sapphire</td>
<td><code>#74c7ec</code></td>
<td><code>lch(76.016% 32.652 234.895)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_blue.png" width="23"/></td>
<td>Blue</td>
<td><code>#89b4fa</code></td>
<td><code>lch(72.282% 39.842 268.531)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_lavender.png" width="23"/></td>
<td>Lavender</td>
<td><code>#b4befe</code></td>
<td><code>lch(77.92% 33.763 282.109)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_text.png" width="23"/></td>
<td>Text</td>
<td><code>#cdd6f4</code></td>
<td><code>lch(85.642% 15.913 274.797)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_subtext1.png" width="23"/></td>
<td>Subtext1</td>
<td><code>#bac2de</code></td>
<td><code>lch(78.478% 15.087 275.359)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_subtext0.png" width="23"/></td>
<td>Subtext0</td>
<td><code>#a6adc8</code></td>
<td><code>lch(70.832% 14.791 276.456)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_overlay2.png" width="23"/></td>
<td>Overlay2</td>
<td><code>#9399b2</code></td>
<td><code>lch(63.365% 13.963 277.234)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_overlay1.png" width="23"/></td>
<td>Overlay1</td>
<td><code>#7f849c</code></td>
<td><code>lch(55.358% 13.7 278.584)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_overlay0.png" width="23"/></td>
<td>Overlay0</td>
<td><code>#6c7086</code></td>
<td><code>lch(47.492% 12.884 279.691)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_surface2.png" width="23"/></td>
<td>Surface2</td>
<td><code>#585b70</code></td>
<td><code>lch(38.99% 12.686 281.423)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_surface1.png" width="23"/></td>
<td>Surface1</td>
<td><code>#45475a</code></td>
<td><code>lch(30.547% 11.919 283.069)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_surface0.png" width="23"/></td>
<td>Surface0</td>
<td><code>#313244</code></td>
<td><code>lch(21.284% 11.882 285.459)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_base.png" width="23"/></td>
<td>Base</td>
<td><code>#1e1e2e</code></td>
<td><code>lch(11.859% 11.317 288.18)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_mantle.png" width="23"/></td>
<td>Mantle</td>
<td><code>#181825</code></td>
<td><code>lch(8.741% 9.475 288.015)</code></td>
</tr>
<tr>
<td><img src="../assets/palette/circles/mocha_crust.png" width="23"/></td>
<td>Crust</td>
<td><code>#11111b</code></td>
<td><code>lch(5.357% 6.857 285.475)</code></td>
</tr>
</table>
</details>
&nbsp;
<p align="center"><img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" /></p>
<p align="center">Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
<p align="center"><a href="https://github.com/catppuccin/catppuccin/blob/main/LICENSE"><img src="https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=MIT&logoColor=d9e0ee&colorA=302d41&colorB=b7bdf8"/></a></p>c