feat: added dynamically generated circles

README.md

@@ -51,39 +51,121 @@
 To make the best use them please refer to the [Styleguide](https://github.com/catppuccin/style-guide).
 <br><img src="assets/misc/transparent.png" height="10" width="0" />
 
-#### Morning
+|                                                                                | Labels    | Hex       | RGB                  | HSL                  |
-
+| ------------------------------------------------------------------------------ | --------- | --------- | -------------------- | -------------------- |
-|                                                                         | Name     | Hex       | RGB             | HSL             | CMYK               |
+| <img src="assets/palette/circles/latte_rosewater.png" height="23" width="23"/> | Rosewater | `#dc8a78` | `rgb(220, 138, 120)` | `hsl(11, 59%, 67%)`  |
-| ----------------------------------------------------------------------- | -------- | --------- | --------------- | --------------- | ------------------ |
+| <img src="assets/palette/circles/latte_flamingo.png" height="23" width="23"/>  | Flamingo  | `#dd7878` | `rgb(221, 120, 120)` | `hsl(0, 60%, 67%)`   |
-| <img src="assets/palette/circles/flamingo.png" height="23" width="23"/> | Flamingo | `#F2CDCD` | `242, 205, 205` | `0, 59%, 88%`   | `0%, 15%, 15%, 5%` |
+| <img src="assets/palette/circles/latte_pink.png" height="23" width="23"/>      | Pink      | `#ea76cb` | `rgb(234, 118, 203)` | `hsl(316, 73%, 69%)` |
-| <img src="assets/palette/circles/mauve.png" height="23" width="23"/>    | Mauve    | `#DDB6F2` | `221, 182, 242` | `279, 70%, 83%` | `9%, 25%, 0%, 5%`  |
+| <img src="assets/palette/circles/latte_mauve.png" height="23" width="23"/>     | Mauve     | `#8839ef` | `rgb(136, 57, 239)`  | `hsl(266, 85%, 58%)` |
-| <img src="assets/palette/circles/pink.png" height="23" width="23"/>     | Pink     | `#F5C2E7` | `245, 194, 231` | `316, 72%, 86%` | `0%, 21%, 6%, 4%`  |
+| <img src="assets/palette/circles/latte_red.png" height="23" width="23"/>       | Red       | `#d20f39` | `rgb(210, 15, 57)`   | `hsl(347, 87%, 44%)` |
-| <img src="assets/palette/circles/maroon.png" height="23" width="23"/>   | Maroon   | `#E8A2AF` | `232, 162, 175` | `349, 60%, 77%` | `0%, 30%, 25%, 9%` |
+| <img src="assets/palette/circles/latte_maroon.png" height="23" width="23"/>    | Maroon    | `#e64553` | `rgb(230, 69, 83)`   | `hsl(355, 76%, 59%)` |
-| <img src="assets/palette/circles/red.png" height="23" width="23"/>      | Red      | `#F28FAD` | `242, 143, 173` | `342, 79%, 75%` | `0%, 41%, 29%, 5%` |
+| <img src="assets/palette/circles/latte_peach.png" height="23" width="23"/>     | Peach     | `#fe640b` | `rgb(254, 100, 11)`  | ` hsl(22, 99%, 52%)` |
-| <img src="assets/palette/circles/peach.png" height="23" width="23"/>    | Peach    | `#F8BD96` | `248, 189, 150` | `24, 88%, 78%`  | `0%, 24%, 40%, 3%` |
+| <img src="assets/palette/circles/latte_yellow.png" height="23" width="23"/>    | Yellow    | `#df8e1d` | `rgb(223, 142, 29)`  | `hsl(35, 77%, 49%)`  |
-| <img src="assets/palette/circles/yellow.png" height="23" width="23"/>   | Yellow   | `#FAE3B0` | `250, 227, 176` | `41, 88%, 84%`  | `0%, 9%, 30%, 2%`  |
+| <img src="assets/palette/circles/latte_green.png" height="23" width="23"/>     | Green     | `#40a02b` | `rgb(64, 160, 43)`   | `hsl(109, 58%, 40%)` |
-| <img src="assets/palette/circles/green.png" height="23" width="23"/>    | Green    | `#ABE9B3` | `171, 233, 179` | `128, 58%, 79%` | `27%, 0%, 23%, 9%` |
+| <img src="assets/palette/circles/latte_teal.png" height="23" width="23"/>      | Teal      | `#179299` | `rgb(23, 146, 153)`  | `hsl(183, 74%, 35%)` |
-| <img src="assets/palette/circles/teal.png" height="23" width="23"/>     | Teal     | `#B5E8E0` | `181, 232, 224` | `171, 53%, 81%` | `22%, 0%, 3%, 9%`  |
+| <img src="assets/palette/circles/latte_sky.png" height="23" width="23"/>       | Sky       | `#04a5e5` | `rgb(4, 165, 229)`   | `hsl(197, 97%, 46%)` |
-| <img src="assets/palette/circles/blue.png" height="23" width="23"/>     | Blue     | `#96CDFB` | `150, 205, 251` | `207, 93%, 79%` | `40%, 18%, 0%, 2%` |
+| <img src="assets/palette/circles/latte_sapphire.png" height="23" width="23"/>  | Sapphire  | `#209fb5` | `rgb(32, 159, 181)`  | `hsl(189, 70%, 42%)` |
-| <img src="assets/palette/circles/sky.png" height="23" width="23"/>      | Sky      | `#89DCEB` | `137, 220, 235` | `189, 71%, 73%` | `42%, 6%, 0%, 8%`  |
+| <img src="assets/palette/circles/latte_blue.png" height="23" width="23"/>      | Blue      | `#1e66f5` | `rgb(30, 102, 245)`  | `hsl(220, 91%, 54%)` |
-
+| <img src="assets/palette/circles/latte_lavender.png" height="23" width="23"/>  | Lavender  | `#7287fd` | `rgb(114, 135, 253)` | `hsl(231, 97%, 72%)` |
-<img src="assets/misc/transparent.png" height="10" width="0" />
+| <img src="assets/palette/circles/latte_text.png" height="23" width="23"/>      | Text      | `#4c4f69` | `rgb(76, 79, 105)`   | `hsl(234, 16%, 35%)` |
-
+| <img src="assets/palette/circles/latte_subtext1.png" height="23" width="23"/>  | Subtext1  | `#5c5f77` | `rgb(92, 95, 119)`   | `hsl(233, 13%, 41%)` |
-#### Night
+| <img src="assets/palette/circles/latte_subtext0.png" height="23" width="23"/>  | Subtext0  | `#6c6f85` | `rgb(108, 111, 133)` | `hsl(233, 10%, 47%)` |
-
+| <img src="assets/palette/circles/latte_overlay2.png" height="23" width="23"/>  | Overlay2  | `#7c7f93` | `rgb(124, 127, 147)` | `hsl(232, 10%, 53%)` |
-|                                                                          | Name      | Hex       | RGB             | HSL              | CMYK                |
+| <img src="assets/palette/circles/latte_overlay1.png" height="23" width="23"/>  | Overlay1  | `#8c8fa1` | `rgb(140, 143, 161)` | `hsl(231, 10%, 59%)` |
-| ------------------------------------------------------------------------ | --------- | --------- | --------------- | ---------------- | ------------------- |
+| <img src="assets/palette/circles/latte_overlay0.png" height="23" width="23"/>  | Overlay0  | `#9ca0b0` | `rgb(156, 160, 176)` | `hsl(228, 11%, 65%)` |
-| <img src="assets/palette/circles/black0.png" height="23" width="23"/>    | Black 0   | `#161320` | `22, 19, 32`    | `254, 25%, 10%`  | `31%, 41%, 0%, 87%` |
+| <img src="assets/palette/circles/latte_surface2.png" height="23" width="23"/>  | Surface2  | `#acb0be` | `rgb(172, 176, 190)` | `hsl(227, 12%, 71%)` |
-| <img src="assets/palette/circles/black1.png" height="23" width="23"/>    | Black 1   | `#1A1826` | `26, 24, 38`    | `249, 23%, 12%`  | `32%, 37%, 0%, 85%` |
+| <img src="assets/palette/circles/latte_surface1.png" height="23" width="23"/>  | Surface1  | `#bcc0cc` | `rgb(188, 192, 204)` | `hsl(225, 14%, 77%)` |
-| <img src="assets/palette/circles/black2.png" height="23" width="23"/>    | Black 2   | `#1E1E2E` | `30, 30, 46`    | `240, 21%, 15%%` | `35%, 35%, 0%, 82%` |
+| <img src="assets/palette/circles/latte_surface0.png" height="23" width="23"/>  | Surface0  | `#ccd0da` | `rgb(204, 208, 218)` | `hsl(223, 16%, 83%)` |
-| <img src="assets/palette/circles/black3.png" height="23" width="23"/>    | Black 3   | `#302D41` | `48, 45, 65`    | `249, 18%, 22%`  | `26%, 31%, 0%, 75%` |
+| <img src="assets/palette/circles/latte_base.png" height="23" width="23"/>      | Base      | `#eff1f5` | `rgb(239, 241, 245)` | `hsl(220, 23%, 95%)` |
-| <img src="assets/palette/circles/black4.png" height="23" width="23"/>    | Black 4   | `#575268` | `87, 82, 104`   | `254, 12%, 36%`  | `16%, 21%, 0%, 59%` |
+| <img src="assets/palette/circles/latte_mantle.png" height="23" width="23"/>    | Mantle    | `#e6e9ef` | `rgb(230, 233, 239)` | `hsl(220, 22%, 92%)` |
-| <img src="assets/palette/circles/gray0.png" height="23" width="23"/>     | Gray 0    | `#6E6C7E` | `110, 108, 126` | `247, 8%, 46%`   | `13%, 14%, 0%, 51%` |
+| <img src="assets/palette/circles/latte_crust.png" height="23" width="23"/>     | Crust     | `#dce0e8` | `rgb(220, 224, 232)` | `hsl(220, 21%, 89%)` |
-| <img src="assets/palette/circles/gray1.png" height="23" width="23"/>     | Gray 1    | `#988BA2` | `152, 139, 162` | `274, 11%, 59%`  | `6%, 14%, 0%, 36%`  |
+
-| <img src="assets/palette/circles/gray2.png" height="23" width="23"/>     | Gray 2    | `#C3BAC6` | `195, 186, 198` | `285, 10%, 75%`  | `2%, 6%, 0%, 22%`   |
+|                                                                                 | Labels    | Hex       | RGB                  | HSL                  |
-| <img src="assets/palette/circles/white.png" height="23" width="23"/>     | White     | `#D9E0EE` | `217, 224, 238` | `220, 38%, 89%`  | `9%, 6%, 0%, 7%`    |
+| ------------------------------------------------------------------------------- | --------- | --------- | -------------------- | -------------------- |
-| <img src="assets/palette/circles/lavender.png" height="23" width="23"/>  | Lavender  | `#C9CBFF` | `201, 203, 255` | `238, 100%, 89%` | `21%, 20%, 0%, 0%`  |
+| <img src="assets/palette/circles/frappe_rosewater.png" height="23" width="23"/> | Rosewater | `#f2d5cf` | `rgb(242, 213, 207)` | `hsl(10, 57%, 88%)`  |
-| <img src="assets/palette/circles/rosewater.png" height="23" width="23"/> | Rosewater | `#F5E0DC` | `245, 224, 220` | `10, 56%, 91%`   | `0%, 9%, 10%, 4%`   |
+| <img src="assets/palette/circles/frappe_flamingo.png" height="23" width="23"/>  | Flamingo  | `#eebebe` | `rgb(238, 190, 190)` | `hsl(0, 59%, 84%)`   |
+| <img src="assets/palette/circles/frappe_pink.png" height="23" width="23"/>      | Pink      | `#f4b8e4` | `rgb(244, 184, 228)` | `hsl(316, 73%, 84%)` |
+| <img src="assets/palette/circles/frappe_mauve.png" height="23" width="23"/>     | Mauve     | `#ca9ee6` | `rgb(202, 158, 230)` | `hsl(277, 59%, 76%)` |
+| <img src="assets/palette/circles/frappe_red.png" height="23" width="23"/>       | Red       | `#e78284` | `rgb(231, 130, 132)` | `hsl(359, 68%, 71%)` |
+| <img src="assets/palette/circles/frappe_maroon.png" height="23" width="23"/>    | Maroon    | `#ea999c` | `rgb(234, 153, 156)` | `hsl(358, 66%, 76%)` |
+| <img src="assets/palette/circles/frappe_peach.png" height="23" width="23"/>     | Peach     | `#ef9f76` | `rgb(239, 159, 118)` | `hsl(20, 79%, 70%)`  |
+| <img src="assets/palette/circles/frappe_yellow.png" height="23" width="23"/>    | Yellow    | `#e5c890` | `rgb(229, 200, 144)` | `hsl(40, 62%, 73%)`  |
+| <img src="assets/palette/circles/frappe_green.png" height="23" width="23"/>     | Green     | `#a6d189` | `rgb(166, 209, 137)` | `hsl(96, 44%, 68%)`  |
+| <img src="assets/palette/circles/frappe_teal.png" height="23" width="23"/>      | Teal      | `#81c8be` | `rgb(129, 200, 190)` | `hsl(172, 39%, 65%)` |
+| <img src="assets/palette/circles/frappe_sky.png" height="23" width="23"/>       | Sky       | `#99d1db` | `rgb(153, 209, 219)` | `hsl(189, 48%, 73%)` |
+| <img src="assets/palette/circles/frappe_sapphire.png" height="23" width="23"/>  | Sapphire  | `#85c1dc` | `rgb(133, 193, 220)` | `hsl(199, 55%, 69%)` |
+| <img src="assets/palette/circles/frappe_blue.png" height="23" width="23"/>      | Blue      | `#8caaee` | `rgb(140, 170, 238)` | `hsl(222, 74%, 74%)` |
+| <img src="assets/palette/circles/frappe_lavender.png" height="23" width="23"/>  | Lavender  | `#babbf1` | `rgb(186, 187, 241)` | `hsl(239, 66%, 84%)` |
+| <img src="assets/palette/circles/frappe_text.png" height="23" width="23"/>      | Text      | `#c6ceef` | `rgb(198, 206, 239)` | `hsl(228, 56%, 86%)` |
+| <img src="assets/palette/circles/frappe_subtext1.png" height="23" width="23"/>  | Subtext1  | `#b5bddc` | `rgb(181, 189, 220)` | `hsl(228, 36%, 79%)` |
+| <img src="assets/palette/circles/frappe_subtext0.png" height="23" width="23"/>  | Subtext0  | `#a5acc9` | `rgb(165, 172, 201)` | `hsl(228, 25%, 72%)` |
+| <img src="assets/palette/circles/frappe_overlay2.png" height="23" width="23"/>  | Overlay2  | `#949bb7` | `rgb(148, 155, 183)` | `hsl(228, 20%, 65%)` |
+| <img src="assets/palette/circles/frappe_overlay1.png" height="23" width="23"/>  | Overlay1  | `#838aa4` | `rgb(131, 138, 164)` | `hsl(227, 15%, 58%)` |
+| <img src="assets/palette/circles/frappe_overlay0.png" height="23" width="23"/>  | Overlay0  | `#737891` | `rgb(115, 120, 145)` | `hsl(230, 12%, 51%)` |
+| <img src="assets/palette/circles/frappe_surface2.png" height="23" width="23"/>  | Surface2  | `#62677e` | `rgb(98, 103, 126)`  | `hsl(229, 13%, 44%)` |
+| <img src="assets/palette/circles/frappe_surface1.png" height="23" width="23"/>  | Surface1  | `#51566c` | `rgb(81, 86, 108)`   | `hsl(229, 14%, 37%)` |
+| <img src="assets/palette/circles/frappe_surface0.png" height="23" width="23"/>  | Surface0  | `#414559` | `rgb(65, 69, 89)`    | `hsl(230, 16%, 30%)` |
+| <img src="assets/palette/circles/frappe_base.png" height="23" width="23"/>      | Base      | `#303446` | `rgb(48, 52, 70)`    | `hsl(229, 19%, 23%)` |
+| <img src="assets/palette/circles/frappe_mantle.png" height="23" width="23"/>    | Mantle    | `#292c3c` | `rgb(41, 44, 60)`    | `hsl(231, 19%, 20%)` |
+| <img src="assets/palette/circles/frappe_crust.png" height="23" width="23"/>     | Crust     | `#232634` | `rgb(35, 38, 52)`    | `hsl(229, 20%, 17%)` |
+
+|                                                                                    | Labels    | Hex       | RGB                  | HSL                  |
+| ---------------------------------------------------------------------------------- | --------- | --------- | -------------------- | -------------------- |
+| <img src="assets/palette/circles/macchiato_rosewater.png" height="23" width="23"/> | Rosewater | `#f4dbd6` | `rgb(244, 219, 214)` | `hsl(10, 58%, 90%)`  |
+| <img src="assets/palette/circles/macchiato_flamingo.png" height="23" width="23"/>  | Flamingo  | `#f0c6c6` | `rgb(240, 198, 198)` | `hsl(0, 58%, 86%)`   |
+| <img src="assets/palette/circles/macchiato_pink.png" height="23" width="23"/>      | Pink      | `#f5bde6` | `rgb(245, 189, 230)` | `hsl(316, 74%, 85%)` |
+| <img src="assets/palette/circles/macchiato_mauve.png" height="23" width="23"/>     | Mauve     | `#c6a0f6` | `rgb(198, 160, 246)` | `hsl(267, 83%, 80%)` |
+| <img src="assets/palette/circles/macchiato_red.png" height="23" width="23"/>       | Red       | `#ed8796` | `rgb(237, 135, 150)` | `hsl(351, 74%, 73%)` |
+| <img src="assets/palette/circles/macchiato_maroon.png" height="23" width="23"/>    | Maroon    | `#ee99a0` | `rgb(238, 153, 160)` | `hsl(355, 71%, 77%)` |
+| <img src="assets/palette/circles/macchiato_peach.png" height="23" width="23"/>     | Peach     | `#f5a97f` | `rgb(245, 169, 127)` | `hsl(21, 86%, 73%)`  |
+| <img src="assets/palette/circles/macchiato_yellow.png" height="23" width="23"/>    | Yellow    | `#eed49f` | `rgb(238, 212, 159)` | `hsl(40, 70%, 78%)`  |
+| <img src="assets/palette/circles/macchiato_green.png" height="23" width="23"/>     | Green     | `#a6da95` | `rgb(166, 218, 149)` | `hsl(105, 48%, 72%)` |
+| <img src="assets/palette/circles/macchiato_teal.png" height="23" width="23"/>      | Teal      | `#8bd5ca` | `rgb(139, 213, 202)` | `hsl(171, 47%, 69%)` |
+| <img src="assets/palette/circles/macchiato_sky.png" height="23" width="23"/>       | Sky       | `#91d7e3` | `rgb(145, 215, 227)` | `hsl(189, 59%, 73%)` |
+| <img src="assets/palette/circles/macchiato_sapphire.png" height="23" width="23"/>  | Sapphire  | `#7dc4e4` | `rgb(125, 196, 228)` | `hsl(199, 66%, 69%)` |
+| <img src="assets/palette/circles/macchiato_blue.png" height="23" width="23"/>      | Blue      | `#8aadf4` | `rgb(138, 173, 244)` | `hsl(220, 83%, 75%)` |
+| <img src="assets/palette/circles/macchiato_lavender.png" height="23" width="23"/>  | Lavender  | `#b7bdf8` | `rgb(183, 189, 248)` | `hsl(234, 82%, 85%)` |
+| <img src="assets/palette/circles/macchiato_text.png" height="23" width="23"/>      | Text      | `#c5cff5` | `rgb(197, 207, 245)` | `hsl(228, 71%, 87%)` |
+| <img src="assets/palette/circles/macchiato_subtext1.png" height="23" width="23"/>  | Subtext1  | `#b3bce0` | `rgb(179, 188, 224)` | `hsl(228, 42%, 79%)` |
+| <img src="assets/palette/circles/macchiato_subtext0.png" height="23" width="23"/>  | Subtext0  | `#a1aacb` | `rgb(161, 170, 203)` | `hsl(227, 29%, 71%)` |
+| <img src="assets/palette/circles/macchiato_overlay2.png" height="23" width="23"/>  | Overlay2  | `#8f97b7` | `rgb(143, 151, 183)` | `hsl(228, 22%, 64%)` |
+| <img src="assets/palette/circles/macchiato_overlay1.png" height="23" width="23"/>  | Overlay1  | `#7d84a2` | `rgb(125, 132, 162)` | `hsl(229, 17%, 56%)` |
+| <img src="assets/palette/circles/macchiato_overlay0.png" height="23" width="23"/>  | Overlay0  | `#6c728d` | `rgb(108, 114, 141)` | `hsl(229, 13%, 49%)` |
+| <img src="assets/palette/circles/macchiato_surface2.png" height="23" width="23"/>  | Surface2  | `#5a5f78` | `rgb(90, 95, 120)`   | `hsl(230, 14%, 41%)` |
+| <img src="assets/palette/circles/macchiato_surface1.png" height="23" width="23"/>  | Surface1  | `#484c64` | `rgb(72, 76, 100)`   | `hsl(231, 16%, 34%)` |
+| <img src="assets/palette/circles/macchiato_surface0.png" height="23" width="23"/>  | Surface0  | `#363a4f` | `rgb(54, 58, 79)`    | `hsl(230, 19%, 26%)` |
+| <img src="assets/palette/circles/macchiato_base.png" height="23" width="23"/>      | Base      | `#24273a` | `rgb(36, 39, 58)`    | `hsl(232, 23%, 18%)` |
+| <img src="assets/palette/circles/macchiato_mantle.png" height="23" width="23"/>    | Mantle    | `#1e2030` | `rgb(30, 32, 48)`    | `hsl(233, 23%, 15%)` |
+| <img src="assets/palette/circles/macchiato_crust.png" height="23" width="23"/>     | Crust     | `#181926` | `rgb(24, 25, 38)`    | `hsl(236, 23%, 12%)` |
+
+|                                                                                | Labels    | Hex       | RGB                  | HSL                  |
+| ------------------------------------------------------------------------------ | --------- | --------- | -------------------- | -------------------- |
+| <img src="assets/palette/circles/mocha_rosewater.png" height="23" width="23"/> | Rosewater | `#f5e0dc` | `rgb(245, 224, 220)` | `hsl(10, 56%, 91%)`  |
+| <img src="assets/palette/circles/mocha_flamingo.png" height="23" width="23"/>  | Flamingo  | `#f2cdcd` | `rgb(242, 205, 205)` | `hsl(0, 59%, 88%)`   |
+| <img src="assets/palette/circles/mocha_pink.png" height="23" width="23"/>      | Pink      | `#f5c2e7` | `rgb(245, 194, 231)` | `hsl(316, 72%, 86%)` |
+| <img src="assets/palette/circles/mocha_mauve.png" height="23" width="23"/>     | Mauve     | `#cba6f7` | `rgb(203, 166, 247)` | `hsl(267, 84%, 81%)` |
+| <img src="assets/palette/circles/mocha_red.png" height="23" width="23"/>       | Red       | `#f38ba8` | `rgb(243, 139, 168)` | `hsl(343, 81%, 75%)` |
+| <img src="assets/palette/circles/mocha_maroon.png" height="23" width="23"/>    | Maroon    | `#eba0ac` | `rgb(235, 160, 172)` | `hsl(350, 65%, 77%)` |
+| <img src="assets/palette/circles/mocha_peach.png" height="23" width="23"/>     | Peach     | `#fab387` | `rgb(250, 179, 135)` | `hsl(23, 92%, 75%)`  |
+| <img src="assets/palette/circles/mocha_yellow.png" height="23" width="23"/>    | Yellow    | `#f9e2af` | `rgb(249, 226, 175)` | `hsl(41, 86%, 83%)`  |
+| <img src="assets/palette/circles/mocha_green.png" height="23" width="23"/>     | Green     | `#a6e3a1` | `rgb(166, 227, 161)` | `hsl(115, 54%, 76%)` |
+| <img src="assets/palette/circles/mocha_teal.png" height="23" width="23"/>      | Teal      | `#94e2d5` | `rgb(148, 226, 213)` | `hsl(170, 57%, 73%)` |
+| <img src="assets/palette/circles/mocha_sky.png" height="23" width="23"/>       | Sky       | `#89dceb` | `rgb(137, 220, 235)` | `hsl(189, 71%, 73%)` |
+| <img src="assets/palette/circles/mocha_sapphire.png" height="23" width="23"/>  | Sapphire  | `#74c7ec` | `rgb(116, 199, 236)` | `hsl(199, 76%, 69%)` |
+| <img src="assets/palette/circles/mocha_blue.png" height="23" width="23"/>      | Blue      | `#87b0f9` | `rgb(135, 176, 249)` | `hsl(218, 90%, 75%)` |
+| <img src="assets/palette/circles/mocha_lavender.png" height="23" width="23"/>  | Lavender  | `#b4befe` | `rgb(180, 190, 254)` | `hsl(232, 97%, 85%)` |
+| <img src="assets/palette/circles/mocha_text.png" height="23" width="23"/>      | Text      | `#c6d0f5` | `rgb(198, 208, 245)` | `hsl(227, 70%, 87%)` |
+| <img src="assets/palette/circles/mocha_subtext1.png" height="23" width="23"/>  | Subtext1  | `#b3bcdf` | `rgb(179, 188, 223)` | `hsl(228, 41%, 79%)` |
+| <img src="assets/palette/circles/mocha_subtext0.png" height="23" width="23"/>  | Subtext0  | `#a1a8c9` | `rgb(161, 168, 201)` | `hsl(229, 27%, 71%)` |
+| <img src="assets/palette/circles/mocha_overlay2.png" height="23" width="23"/>  | Overlay2  | `#8e95b3` | `rgb(142, 149, 179)` | `hsl(229, 20%, 63%)` |
+| <img src="assets/palette/circles/mocha_overlay1.png" height="23" width="23"/>  | Overlay1  | `#7b819d` | `rgb(123, 129, 157)` | `hsl(229, 15%, 55%)` |
+| <img src="assets/palette/circles/mocha_overlay0.png" height="23" width="23"/>  | Overlay0  | `#696d86` | `rgb(105, 109, 134)` | `hsl(232, 12%, 47%)` |
+| <img src="assets/palette/circles/mocha_surface2.png" height="23" width="23"/>  | Surface2  | `#565970` | `rgb(86, 89, 112)`   | `hsl(233, 13%, 39%)` |
+| <img src="assets/palette/circles/mocha_surface1.png" height="23" width="23"/>  | Surface1  | `#43465a` | `rgb(67, 70, 90)`    | `hsl(232, 15%, 31%)` |
+| <img src="assets/palette/circles/mocha_surface0.png" height="23" width="23"/>  | Surface0  | `#313244` | `rgb(49, 50, 68)`    | `hsl(237, 16%, 23%)` |
+| <img src="assets/palette/circles/mocha_base.png" height="23" width="23"/>      | Base      | `#1e1e2e` | `rgb(30, 30, 46)`    | `hsl(240, 21%, 15%)` |
+| <img src="assets/palette/circles/mocha_mantle.png" height="23" width="23"/>    | Mantle    | `#181825` | `rgb(24, 24, 37)`    | `hsl(240, 21%, 12%)` |
+| <img src="assets/palette/circles/mocha_crust.png" height="23" width="23"/>     | Crust     | `#11111b` | `rgb(17, 17, 27)`    | `hsl(240, 23%, 9%)`  |
 
 &nbsp;