diff --git a/README.md b/README.md
index 5611c99..90745eb 100644
--- a/README.md
+++ b/README.md
@@ -53,133 +53,782 @@ To make the best use them please refer to the [Styleguide](https://github.com/ca
🐑 Latte
-
-| | Labels | Hex | RGB | HSL |
-| ------------------------------------------------------------------------------ | --------- | --------- | -------------------- | -------------------- |
-| | Rosewater | `#dc8a78` | `rgb(220, 138, 120)` | `hsl(11, 59%, 67%)` |
-| | Flamingo | `#dd7878` | `rgb(221, 120, 120)` | `hsl(0, 60%, 67%)` |
-| | Pink | `#ea76cb` | `rgb(234, 118, 203)` | `hsl(316, 73%, 69%)` |
-| | Mauve | `#8839ef` | `rgb(136, 57, 239)` | `hsl(266, 85%, 58%)` |
-| | Red | `#d20f39` | `rgb(210, 15, 57)` | `hsl(347, 87%, 44%)` |
-| | Maroon | `#e64553` | `rgb(230, 69, 83)` | `hsl(355, 76%, 59%)` |
-| | Peach | `#fe640b` | `rgb(254, 100, 11)` | ` hsl(22, 99%, 52%)` |
-| | Yellow | `#df8e1d` | `rgb(223, 142, 29)` | `hsl(35, 77%, 49%)` |
-| | Green | `#40a02b` | `rgb(64, 160, 43)` | `hsl(109, 58%, 40%)` |
-| | Teal | `#179299` | `rgb(23, 146, 153)` | `hsl(183, 74%, 35%)` |
-| | Sky | `#04a5e5` | `rgb(4, 165, 229)` | `hsl(197, 97%, 46%)` |
-| | Sapphire | `#209fb5` | `rgb(32, 159, 181)` | `hsl(189, 70%, 42%)` |
-| | Blue | `#1e66f5` | `rgb(30, 102, 245)` | `hsl(220, 91%, 54%)` |
-| | Lavender | `#7287fd` | `rgb(114, 135, 253)` | `hsl(231, 97%, 72%)` |
-| | Text | `#4c4f69` | `rgb(76, 79, 105)` | `hsl(234, 16%, 35%)` |
-| | Subtext1 | `#5c5f77` | `rgb(92, 95, 119)` | `hsl(233, 13%, 41%)` |
-| | Subtext0 | `#6c6f85` | `rgb(108, 111, 133)` | `hsl(233, 10%, 47%)` |
-| | Overlay2 | `#7c7f93` | `rgb(124, 127, 147)` | `hsl(232, 10%, 53%)` |
-| | Overlay1 | `#8c8fa1` | `rgb(140, 143, 161)` | `hsl(231, 10%, 59%)` |
-| | Overlay0 | `#9ca0b0` | `rgb(156, 160, 176)` | `hsl(228, 11%, 65%)` |
-| | Surface2 | `#acb0be` | `rgb(172, 176, 190)` | `hsl(227, 12%, 71%)` |
-| | Surface1 | `#bcc0cc` | `rgb(188, 192, 204)` | `hsl(225, 14%, 77%)` |
-| | Surface0 | `#ccd0da` | `rgb(204, 208, 218)` | `hsl(223, 16%, 83%)` |
-| | Base | `#eff1f5` | `rgb(239, 241, 245)` | `hsl(220, 23%, 95%)` |
-| | Mantle | `#e6e9ef` | `rgb(230, 233, 239)` | `hsl(220, 22%, 92%)` |
-| | Crust | `#dce0e8` | `rgb(220, 224, 232)` | `hsl(220, 21%, 89%)` |
-
+
+
+ |
+ Labels |
+ Hex |
+ RGG |
+ HSL |
+
+
+ |
+ Rosewater |
+ #dc8a78 |
+ rgb(220, 138, 120) |
+ hsl(11, 59%, 67%) |
+
+
+ |
+ Flamingo |
+ #dd7878 |
+ rgb(221, 120, 120) |
+ hsl(0, 60%, 67%) |
+
+
+ |
+ Pink |
+ #ea76cb |
+ rgb(234, 118, 203) |
+ hsl(316, 73%, 69%) |
+
+
+ |
+ Mauve |
+ #8839ef |
+ rgb(136, 57, 239) |
+ hsl(266, 85%, 58%) |
+
+
+ |
+ Red |
+ #d20f39 |
+ rgb(210, 15, 57) |
+ hsl(347, 87%, 44%) |
+
+
+ |
+ Maroon |
+ #e64553 |
+ rgb(230, 69, 83) |
+ hsl(355, 76%, 59%) |
+
+
+ |
+ Peach |
+ #fe640b |
+ rgb(254, 100, 11) |
+ hsl(22, 99%, 52%) |
+
+
+ |
+ Yellow |
+ #df8e1d |
+ rgb(223, 142, 29) |
+ hsl(35, 77%, 49%) |
+
+
+ |
+ Green |
+ #40a02b |
+ rgb(64, 160, 43) |
+ hsl(109, 58%, 40%) |
+
+
+ |
+ Teal |
+ #179299 |
+ rgb(23, 146, 153) |
+ hsl(183, 74%, 35%) |
+
+
+ |
+ Sky |
+ #04a5e5 |
+ rgb(4, 165, 229) |
+ hsl(197, 97%, 46%) |
+
+
+ |
+ Sapphire |
+ #209fb5 |
+ rgb(32, 159, 181) |
+ hsl(189, 70%, 42%) |
+
+
+ |
+ Blue |
+ #1e66f5 |
+ rgb(30, 102, 245) |
+ hsl(220, 91%, 54%) |
+
+
+ |
+ Lavender |
+ #7287fd |
+ rgb(114, 135, 253) |
+ hsl(231, 97%, 72%) |
+
+
+ |
+ Text |
+ #4c4f69 |
+ rgb(76, 79, 105) |
+ hsl(234, 16%, 35%) |
+
+
+ |
+ Subtext1 |
+ #5c5f77 |
+ rgb(92, 95, 119) |
+ hsl(233, 13%, 41%) |
+
+
+ |
+ Subtext0 |
+ #6c6f85 |
+ rgb(108, 111, 133) |
+ hsl(233, 10%, 47%) |
+
+
+ |
+ Overlay2 |
+ #7c7f93 |
+ rgb(124, 127, 147) |
+ hsl(232, 10%, 53%) |
+
+
+ |
+ Overlay1 |
+ #8c8fa1 |
+ rgb(140, 143, 161) |
+ hsl(231, 10%, 59%) |
+
+
+ |
+ Overlay0 |
+ #9ca0b0 |
+ rgb(156, 160, 176) |
+ hsl(228, 11%, 65%) |
+
+
+ |
+ Surface2 |
+ #acb0be |
+ rgb(172, 176, 190) |
+ hsl(227, 12%, 71%) |
+
+
+ |
+ Surface1 |
+ #bcc0cc |
+ rgb(188, 192, 204) |
+ hsl(225, 14%, 77%) |
+
+
+ |
+ Surface0 |
+ #ccd0da |
+ rgb(204, 208, 218) |
+ hsl(223, 16%, 83%) |
+
+
+ |
+ Base |
+ #eff1f5 |
+ rgb(239, 241, 245) |
+ hsl(220, 23%, 95%) |
+
+
+ |
+ Mantle |
+ #e6e9ef |
+ rgb(230, 233, 239) |
+ hsl(220, 22%, 92%) |
+
+
+ |
+ Crust |
+ #dce0e8 |
+ rgb(220, 224, 232) |
+ hsl(220, 21%, 89%) |
+
+
-
🦦 Frappé
-| | Labels | Hex | RGB | HSL |
-| ------------------------------------------------------------------------------- | --------- | --------- | -------------------- | -------------------- |
-| | Rosewater | `#f2d5cf` | `rgb(242, 213, 207)` | `hsl(10, 57%, 88%)` |
-| | Flamingo | `#eebebe` | `rgb(238, 190, 190)` | `hsl(0, 59%, 84%)` |
-| | Pink | `#f4b8e4` | `rgb(244, 184, 228)` | `hsl(316, 73%, 84%)` |
-| | Mauve | `#ca9ee6` | `rgb(202, 158, 230)` | `hsl(277, 59%, 76%)` |
-| | Red | `#e78284` | `rgb(231, 130, 132)` | `hsl(359, 68%, 71%)` |
-| | Maroon | `#ea999c` | `rgb(234, 153, 156)` | `hsl(358, 66%, 76%)` |
-| | Peach | `#ef9f76` | `rgb(239, 159, 118)` | `hsl(20, 79%, 70%)` |
-| | Yellow | `#e5c890` | `rgb(229, 200, 144)` | `hsl(40, 62%, 73%)` |
-| | Green | `#a6d189` | `rgb(166, 209, 137)` | `hsl(96, 44%, 68%)` |
-| | Teal | `#81c8be` | `rgb(129, 200, 190)` | `hsl(172, 39%, 65%)` |
-| | Sky | `#99d1db` | `rgb(153, 209, 219)` | `hsl(189, 48%, 73%)` |
-| | Sapphire | `#85c1dc` | `rgb(133, 193, 220)` | `hsl(199, 55%, 69%)` |
-| | Blue | `#8caaee` | `rgb(140, 170, 238)` | `hsl(222, 74%, 74%)` |
-| | Lavender | `#babbf1` | `rgb(186, 187, 241)` | `hsl(239, 66%, 84%)` |
-| | Text | `#c6ceef` | `rgb(198, 206, 239)` | `hsl(228, 56%, 86%)` |
-| | Subtext1 | `#b5bddc` | `rgb(181, 189, 220)` | `hsl(228, 36%, 79%)` |
-| | Subtext0 | `#a5acc9` | `rgb(165, 172, 201)` | `hsl(228, 25%, 72%)` |
-| | Overlay2 | `#949bb7` | `rgb(148, 155, 183)` | `hsl(228, 20%, 65%)` |
-| | Overlay1 | `#838aa4` | `rgb(131, 138, 164)` | `hsl(227, 15%, 58%)` |
-| | Overlay0 | `#737891` | `rgb(115, 120, 145)` | `hsl(230, 12%, 51%)` |
-| | Surface2 | `#62677e` | `rgb(98, 103, 126)` | `hsl(229, 13%, 44%)` |
-| | Surface1 | `#51566c` | `rgb(81, 86, 108)` | `hsl(229, 14%, 37%)` |
-| | Surface0 | `#414559` | `rgb(65, 69, 89)` | `hsl(230, 16%, 30%)` |
-| | Base | `#303446` | `rgb(48, 52, 70)` | `hsl(229, 19%, 23%)` |
-| | Mantle | `#292c3c` | `rgb(41, 44, 60)` | `hsl(231, 19%, 20%)` |
-| | Crust | `#232634` | `rgb(35, 38, 52)` | `hsl(229, 20%, 17%)` |
+
+
+ |
+ Labels |
+ Hex |
+ RGG |
+ HSL |
+
+
+ |
+ Rosewater |
+ #f2d5cf |
+ rgb(242, 213, 207) |
+ hsl(10, 57%, 88%) |
+
+
+ |
+ Flamingo |
+ #eebebe |
+ rgb(238, 190, 190) |
+ hsl(0, 59%, 84%) |
+
+
+ |
+ Pink |
+ #f4b8e4 |
+ rgb(244, 184, 228) |
+ hsl(316, 73%, 84%) |
+
+
+ |
+ Mauve |
+ #ca9ee6 |
+ rgb(202, 158, 230) |
+ hsl(277, 59%, 76%) |
+
+
+ |
+ Red |
+ #e78284 |
+ rgb(231, 130, 132) |
+ hsl(359, 68%, 71%) |
+
+
+ |
+ Maroon |
+ #ea999c |
+ rgb(234, 153, 156) |
+ hsl(358, 66%, 76%) |
+
+
+ |
+ Peach |
+ #ef9f76 |
+ rgb(239, 159, 118) |
+ hsl(20, 79%, 70%) |
+
+
+ |
+ Yellow |
+ #e5c890 |
+ rgb(229, 200, 144) |
+ hsl(40, 62%, 73%) |
+
+
+ |
+ Green |
+ #a6d189 |
+ rgb(166, 209, 137) |
+ hsl(96, 44%, 68%) |
+
+
+ |
+ Teal |
+ #81c8be |
+ rgb(129, 200, 190) |
+ hsl(172, 39%, 65%) |
+
+
+ |
+ Sky |
+ #99d1db |
+ rgb(153, 209, 219) |
+ hsl(189, 48%, 73%) |
+
+
+ |
+ Sapphire |
+ #85c1dc |
+ rgb(133, 193, 220) |
+ hsl(199, 55%, 69%) |
+
+
+ |
+ Blue |
+ #8caaee |
+ rgb(140, 170, 238) |
+ hsl(222, 74%, 74%) |
+
+
+ |
+ Lavender |
+ #babbf1 |
+ rgb(186, 187, 241) |
+ hsl(239, 66%, 84%) |
+
+
+ |
+ Text |
+ #c6ceef |
+ rgb(198, 206, 239) |
+ hsl(228, 56%, 86%) |
+
+
+ |
+ Subtext1 |
+ #b5bddc |
+ rgb(181, 189, 220) |
+ hsl(228, 36%, 79%) |
+
+
+ |
+ Subtext0 |
+ #a5acc9 |
+ rgb(165, 172, 201) |
+ hsl(228, 25%, 72%) |
+
+
+ |
+ Overlay2 |
+ #949bb7 |
+ rgb(148, 155, 183) |
+ hsl(228, 20%, 65%) |
+
+
+ |
+ Overlay1 |
+ #838aa4 |
+ rgb(131, 138, 164) |
+ hsl(227, 15%, 58%) |
+
+
+ |
+ Overlay0 |
+ #737891 |
+ rgb(115, 120, 145) |
+ hsl(230, 12%, 51%) |
+
+
+ |
+ Surface2 |
+ #62677e |
+ rgb(98, 103, 126) |
+ hsl(229, 13%, 44%) |
+
+
+ |
+ Surface1 |
+ #51566c |
+ rgb(81, 86, 108) |
+ hsl(229, 14%, 37%) |
+
+
+ |
+ Surface0 |
+ #414559 |
+ rgb(65, 69, 89) |
+ hsl(230, 16%, 30%) |
+
+
+ |
+ Base |
+ #303446 |
+ rgb(48, 52, 70) |
+ hsl(229, 19%, 23%) |
+
+
+ |
+ Mantle |
+ #292c3c |
+ rgb(41, 44, 60) |
+ hsl(231, 19%, 20%) |
+
+
+ |
+ Crust |
+ #232634 |
+ rgb(35, 38, 52) |
+ hsl(229, 20%, 17%) |
+
+
🌺 Macchiato
-| | Labels | Hex | RGB | HSL |
-| ---------------------------------------------------------------------------------- | --------- | --------- | -------------------- | -------------------- |
-| | Rosewater | `#f4dbd6` | `rgb(244, 219, 214)` | `hsl(10, 58%, 90%)` |
-| | Flamingo | `#f0c6c6` | `rgb(240, 198, 198)` | `hsl(0, 58%, 86%)` |
-| | Pink | `#f5bde6` | `rgb(245, 189, 230)` | `hsl(316, 74%, 85%)` |
-| | Mauve | `#c6a0f6` | `rgb(198, 160, 246)` | `hsl(267, 83%, 80%)` |
-| | Red | `#ed8796` | `rgb(237, 135, 150)` | `hsl(351, 74%, 73%)` |
-| | Maroon | `#ee99a0` | `rgb(238, 153, 160)` | `hsl(355, 71%, 77%)` |
-| | Peach | `#f5a97f` | `rgb(245, 169, 127)` | `hsl(21, 86%, 73%)` |
-| | Yellow | `#eed49f` | `rgb(238, 212, 159)` | `hsl(40, 70%, 78%)` |
-| | Green | `#a6da95` | `rgb(166, 218, 149)` | `hsl(105, 48%, 72%)` |
-| | Teal | `#8bd5ca` | `rgb(139, 213, 202)` | `hsl(171, 47%, 69%)` |
-| | Sky | `#91d7e3` | `rgb(145, 215, 227)` | `hsl(189, 59%, 73%)` |
-| | Sapphire | `#7dc4e4` | `rgb(125, 196, 228)` | `hsl(199, 66%, 69%)` |
-| | Blue | `#8aadf4` | `rgb(138, 173, 244)` | `hsl(220, 83%, 75%)` |
-| | Lavender | `#b7bdf8` | `rgb(183, 189, 248)` | `hsl(234, 82%, 85%)` |
-| | Text | `#c5cff5` | `rgb(197, 207, 245)` | `hsl(228, 71%, 87%)` |
-| | Subtext1 | `#b3bce0` | `rgb(179, 188, 224)` | `hsl(228, 42%, 79%)` |
-| | Subtext0 | `#a1aacb` | `rgb(161, 170, 203)` | `hsl(227, 29%, 71%)` |
-| | Overlay2 | `#8f97b7` | `rgb(143, 151, 183)` | `hsl(228, 22%, 64%)` |
-| | Overlay1 | `#7d84a2` | `rgb(125, 132, 162)` | `hsl(229, 17%, 56%)` |
-| | Overlay0 | `#6c728d` | `rgb(108, 114, 141)` | `hsl(229, 13%, 49%)` |
-| | Surface2 | `#5a5f78` | `rgb(90, 95, 120)` | `hsl(230, 14%, 41%)` |
-| | Surface1 | `#484c64` | `rgb(72, 76, 100)` | `hsl(231, 16%, 34%)` |
-| | Surface0 | `#363a4f` | `rgb(54, 58, 79)` | `hsl(230, 19%, 26%)` |
-| | Base | `#24273a` | `rgb(36, 39, 58)` | `hsl(232, 23%, 18%)` |
-| | Mantle | `#1e2030` | `rgb(30, 32, 48)` | `hsl(233, 23%, 15%)` |
-| | Crust | `#181926` | `rgb(24, 25, 38)` | `hsl(236, 23%, 12%)` |
+
+
+ |
+ Labels |
+ Hex |
+ RGG |
+ HSL |
+
+
+ |
+ Rosewater |
+ #f4dbd6 |
+ rgb(244, 219, 214) |
+ hsl(10, 58%, 90%) |
+
+
+ |
+ Flamingo |
+ #f0c6c6 |
+ rgb(240, 198, 198) |
+ hsl(0, 58%, 86%) |
+
+
+ |
+ Pink |
+ #f5bde6 |
+ rgb(245, 189, 230) |
+ hsl(316, 74%, 85%) |
+
+
+ |
+ Mauve |
+ #c6a0f6 |
+ rgb(198, 160, 246) |
+ hsl(267, 83%, 80%) |
+
+
+ |
+ Red |
+ #ed8796 |
+ rgb(237, 135, 150) |
+ hsl(351, 74%, 73%) |
+
+
+ |
+ Maroon |
+ #ee99a0 |
+ rgb(238, 153, 160) |
+ hsl(355, 71%, 77%) |
+
+
+ |
+ Peach |
+ #f5a97f |
+ rgb(245, 169, 127) |
+ hsl(21, 86%, 73%) |
+
+
+ |
+ Yellow |
+ #eed49f |
+ rgb(238, 212, 159) |
+ hsl(40, 70%, 78%) |
+
+
+ |
+ Green |
+ #a6da95 |
+ rgb(166, 218, 149) |
+ hsl(105, 48%, 72%) |
+
+
+ |
+ Teal |
+ #8bd5ca |
+ rgb(139, 213, 202) |
+ hsl(171, 47%, 69%) |
+
+
+ |
+ Sky |
+ #91d7e3 |
+ rgb(145, 215, 227) |
+ hsl(189, 59%, 73%) |
+
+
+ |
+ Sapphire |
+ #7dc4e4 |
+ rgb(125, 196, 228) |
+ hsl(199, 66%, 69%) |
+
+
+ |
+ Blue |
+ #8aadf4 |
+ rgb(138, 173, 244) |
+ hsl(220, 83%, 75%) |
+
+
+ |
+ Lavender |
+ #b7bdf8 |
+ rgb(183, 189, 248) |
+ hsl(234, 82%, 85%) |
+
+
+ |
+ Text |
+ #c5cff5 |
+ rgb(197, 207, 245) |
+ hsl(228, 71%, 87%) |
+
+
+ |
+ Subtext1 |
+ #b3bce0 |
+ rgb(179, 188, 224) |
+ hsl(228, 42%, 79%) |
+
+
+ |
+ Subtext0 |
+ #a1aacb |
+ rgb(161, 170, 203) |
+ hsl(227, 29%, 71%) |
+
+
+ |
+ Overlay2 |
+ #8f97b7 |
+ rgb(143, 151, 183) |
+ hsl(228, 22%, 64%) |
+
+
+ |
+ Overlay1 |
+ #7d84a2 |
+ rgb(125, 132, 162) |
+ hsl(229, 17%, 56%) |
+
+
+ |
+ Overlay0 |
+ #6c728d |
+ rgb(108, 114, 141) |
+ hsl(229, 13%, 49%) |
+
+
+ |
+ Surface2 |
+ #5a5f78 |
+ rgb(90, 95, 120) |
+ hsl(230, 14%, 41%) |
+
+
+ |
+ Surface1 |
+ #484c64 |
+ rgb(72, 76, 100) |
+ hsl(231, 16%, 34%) |
+
+
+ |
+ Surface0 |
+ #363a4f |
+ rgb(54, 58, 79) |
+ hsl(230, 19%, 26%) |
+
+
+ |
+ Base |
+ #24273a |
+ rgb(36, 39, 58) |
+ hsl(232, 23%, 18%) |
+
+
+ |
+ Mantle |
+ #1e2030 |
+ rgb(30, 32, 48) |
+ hsl(233, 23%, 15%) |
+
+
+ |
+ Crust |
+ #181926 |
+ rgb(24, 25, 38) |
+ hsl(236, 23%, 12%) |
+
+
🌿 Mocha
-| | Labels | Hex | RGB | HSL |
-| ------------------------------------------------------------------------------ | --------- | --------- | -------------------- | -------------------- |
-| | Rosewater | `#f5e0dc` | `rgb(245, 224, 220)` | `hsl(10, 56%, 91%)` |
-| | Flamingo | `#f2cdcd` | `rgb(242, 205, 205)` | `hsl(0, 59%, 88%)` |
-| | Pink | `#f5c2e7` | `rgb(245, 194, 231)` | `hsl(316, 72%, 86%)` |
-| | Mauve | `#cba6f7` | `rgb(203, 166, 247)` | `hsl(267, 84%, 81%)` |
-| | Red | `#f38ba8` | `rgb(243, 139, 168)` | `hsl(343, 81%, 75%)` |
-| | Maroon | `#eba0ac` | `rgb(235, 160, 172)` | `hsl(350, 65%, 77%)` |
-| | Peach | `#fab387` | `rgb(250, 179, 135)` | `hsl(23, 92%, 75%)` |
-| | Yellow | `#f9e2af` | `rgb(249, 226, 175)` | `hsl(41, 86%, 83%)` |
-| | Green | `#a6e3a1` | `rgb(166, 227, 161)` | `hsl(115, 54%, 76%)` |
-| | Teal | `#94e2d5` | `rgb(148, 226, 213)` | `hsl(170, 57%, 73%)` |
-| | Sky | `#89dceb` | `rgb(137, 220, 235)` | `hsl(189, 71%, 73%)` |
-| | Sapphire | `#74c7ec` | `rgb(116, 199, 236)` | `hsl(199, 76%, 69%)` |
-| | Blue | `#87b0f9` | `rgb(135, 176, 249)` | `hsl(218, 90%, 75%)` |
-| | Lavender | `#b4befe` | `rgb(180, 190, 254)` | `hsl(232, 97%, 85%)` |
-| | Text | `#c6d0f5` | `rgb(198, 208, 245)` | `hsl(227, 70%, 87%)` |
-| | Subtext1 | `#b3bcdf` | `rgb(179, 188, 223)` | `hsl(228, 41%, 79%)` |
-| | Subtext0 | `#a1a8c9` | `rgb(161, 168, 201)` | `hsl(229, 27%, 71%)` |
-| | Overlay2 | `#8e95b3` | `rgb(142, 149, 179)` | `hsl(229, 20%, 63%)` |
-| | Overlay1 | `#7b819d` | `rgb(123, 129, 157)` | `hsl(229, 15%, 55%)` |
-| | Overlay0 | `#696d86` | `rgb(105, 109, 134)` | `hsl(232, 12%, 47%)` |
-| | Surface2 | `#565970` | `rgb(86, 89, 112)` | `hsl(233, 13%, 39%)` |
-| | Surface1 | `#43465a` | `rgb(67, 70, 90)` | `hsl(232, 15%, 31%)` |
-| | Surface0 | `#313244` | `rgb(49, 50, 68)` | `hsl(237, 16%, 23%)` |
-| | Base | `#1e1e2e` | `rgb(30, 30, 46)` | `hsl(240, 21%, 15%)` |
-| | Mantle | `#181825` | `rgb(24, 24, 37)` | `hsl(240, 21%, 12%)` |
-| | Crust | `#11111b` | `rgb(17, 17, 27)` | `hsl(240, 23%, 9%)` |
+
+
+ |
+ Labels |
+ Hex |
+ RGG |
+ HSL |
+
+
+ |
+ Rosewater |
+ #f5e0dc |
+ rgb(245, 224, 220) |
+ hsl(10, 56%, 91%) |
+
+
+ |
+ Flamingo |
+ #f2cdcd |
+ rgb(242, 205, 205) |
+ hsl(0, 59%, 88%) |
+
+
+ |
+ Pink |
+ #f5c2e7 |
+ rgb(245, 194, 231) |
+ hsl(316, 72%, 86%) |
+
+
+ |
+ Mauve |
+ #cba6f7 |
+ rgb(203, 166, 247) |
+ hsl(267, 84%, 81%) |
+
+
+ |
+ Red |
+ #f38ba8 |
+ rgb(243, 139, 168) |
+ hsl(343, 81%, 75%) |
+
+
+ |
+ Maroon |
+ #eba0ac |
+ rgb(235, 160, 172) |
+ hsl(350, 65%, 77%) |
+
+
+ |
+ Peach |
+ #fab387 |
+ rgb(250, 179, 135) |
+ hsl(23, 92%, 75%) |
+
+
+ |
+ Yellow |
+ #f9e2af |
+ rgb(249, 226, 175) |
+ hsl(41, 86%, 83%) |
+
+
+ |
+ Green |
+ #a6e3a1 |
+ rgb(166, 227, 161) |
+ hsl(115, 54%, 76%) |
+
+
+ |
+ Teal |
+ #94e2d5 |
+ rgb(148, 226, 213) |
+ hsl(170, 57%, 73%) |
+
+
+ |
+ Sky |
+ #89dceb |
+ rgb(137, 220, 235) |
+ hsl(189, 71%, 73%) |
+
+
+ |
+ Sapphire |
+ #74c7ec |
+ rgb(116, 199, 236) |
+ hsl(199, 76%, 69%) |
+
+
+ |
+ Blue |
+ #87b0f9 |
+ rgb(135, 176, 249) |
+ hsl(218, 90%, 75%) |
+
+
+ |
+ Lavender |
+ #b4befe |
+ rgb(180, 190, 254) |
+ hsl(232, 97%, 85%) |
+
+
+ |
+ Text |
+ #c6d0f5 |
+ rgb(198, 208, 245) |
+ hsl(227, 70%, 87%) |
+
+
+ |
+ Subtext1 |
+ #b3bcdf |
+ rgb(179, 188, 223) |
+ hsl(228, 41%, 79%) |
+
+
+ |
+ Subtext0 |
+ #a1a8c9 |
+ rgb(161, 168, 201) |
+ hsl(229, 27%, 71%) |
+
+
+ |
+ Overlay2 |
+ #8e95b3 |
+ rgb(142, 149, 179) |
+ hsl(229, 20%, 63%) |
+
+
+ |
+ Overlay1 |
+ #7b819d |
+ rgb(123, 129, 157) |
+ hsl(229, 15%, 55%) |
+
+
+ |
+ Overlay0 |
+ #696d86 |
+ rgb(105, 109, 134) |
+ hsl(232, 12%, 47%) |
+
+
+ |
+ Surface2 |
+ #565970 |
+ rgb(86, 89, 112) |
+ hsl(233, 13%, 39%) |
+
+
+ |
+ Surface1 |
+ #43465a |
+ rgb(67, 70, 90) |
+ hsl(232, 15%, 31%) |
+
+
+ |
+ Surface0 |
+ #313244 |
+ rgb(49, 50, 68) |
+ hsl(237, 16%, 23%) |
+
+
+ |
+ Base |
+ #1e1e2e |
+ rgb(30, 30, 46) |
+ hsl(240, 21%, 15%) |
+
+
+ |
+ Mantle |
+ #181825 |
+ rgb(24, 24, 37) |
+ hsl(240, 21%, 12%) |
+
+
+ |
+ Crust |
+ #11111b |
+ rgb(17, 17, 27) |
+ hsl(240, 23%, 9%) |
+
+