From 53ea9a713c867974657101c254fd370d11f38cab Mon Sep 17 00:00:00 2001 From: Pocco81 Date: Wed, 25 May 2022 09:59:59 -0500 Subject: [PATCH] fix: rewrote palettes in html --- README.md | 879 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 764 insertions(+), 115 deletions(-) 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%)` | - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LabelsHexRGGHSL
Rosewater#dc8a78rgb(220, 138, 120)hsl(11, 59%, 67%)
Flamingo#dd7878rgb(221, 120, 120)hsl(0, 60%, 67%)
Pink#ea76cbrgb(234, 118, 203)hsl(316, 73%, 69%)
Mauve#8839efrgb(136, 57, 239)hsl(266, 85%, 58%)
Red#d20f39rgb(210, 15, 57)hsl(347, 87%, 44%)
Maroon#e64553rgb(230, 69, 83)hsl(355, 76%, 59%)
Peach#fe640brgb(254, 100, 11) hsl(22, 99%, 52%)
Yellow#df8e1drgb(223, 142, 29)hsl(35, 77%, 49%)
Green#40a02brgb(64, 160, 43)hsl(109, 58%, 40%)
Teal#179299rgb(23, 146, 153)hsl(183, 74%, 35%)
Sky#04a5e5rgb(4, 165, 229)hsl(197, 97%, 46%)
Sapphire#209fb5rgb(32, 159, 181)hsl(189, 70%, 42%)
Blue#1e66f5rgb(30, 102, 245)hsl(220, 91%, 54%)
Lavender#7287fdrgb(114, 135, 253)hsl(231, 97%, 72%)
Text#4c4f69rgb(76, 79, 105)hsl(234, 16%, 35%)
Subtext1#5c5f77rgb(92, 95, 119)hsl(233, 13%, 41%)
Subtext0#6c6f85rgb(108, 111, 133)hsl(233, 10%, 47%)
Overlay2#7c7f93rgb(124, 127, 147)hsl(232, 10%, 53%)
Overlay1#8c8fa1rgb(140, 143, 161)hsl(231, 10%, 59%)
Overlay0#9ca0b0rgb(156, 160, 176)hsl(228, 11%, 65%)
Surface2#acb0bergb(172, 176, 190)hsl(227, 12%, 71%)
Surface1#bcc0ccrgb(188, 192, 204)hsl(225, 14%, 77%)
Surface0#ccd0dargb(204, 208, 218)hsl(223, 16%, 83%)
Base#eff1f5rgb(239, 241, 245)hsl(220, 23%, 95%)
Mantle#e6e9efrgb(230, 233, 239)hsl(220, 22%, 92%)
Crust#dce0e8rgb(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%)` | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LabelsHexRGGHSL
Rosewater#f2d5cfrgb(242, 213, 207)hsl(10, 57%, 88%)
Flamingo#eebebergb(238, 190, 190)hsl(0, 59%, 84%)
Pink#f4b8e4rgb(244, 184, 228)hsl(316, 73%, 84%)
Mauve#ca9ee6rgb(202, 158, 230)hsl(277, 59%, 76%)
Red#e78284rgb(231, 130, 132)hsl(359, 68%, 71%)
Maroon#ea999crgb(234, 153, 156)hsl(358, 66%, 76%)
Peach#ef9f76rgb(239, 159, 118)hsl(20, 79%, 70%)
Yellow#e5c890rgb(229, 200, 144)hsl(40, 62%, 73%)
Green#a6d189rgb(166, 209, 137)hsl(96, 44%, 68%)
Teal#81c8bergb(129, 200, 190)hsl(172, 39%, 65%)
Sky#99d1dbrgb(153, 209, 219)hsl(189, 48%, 73%)
Sapphire#85c1dcrgb(133, 193, 220)hsl(199, 55%, 69%)
Blue#8caaeergb(140, 170, 238)hsl(222, 74%, 74%)
Lavender#babbf1rgb(186, 187, 241)hsl(239, 66%, 84%)
Text#c6ceefrgb(198, 206, 239)hsl(228, 56%, 86%)
Subtext1#b5bddcrgb(181, 189, 220)hsl(228, 36%, 79%)
Subtext0#a5acc9rgb(165, 172, 201)hsl(228, 25%, 72%)
Overlay2#949bb7rgb(148, 155, 183)hsl(228, 20%, 65%)
Overlay1#838aa4rgb(131, 138, 164)hsl(227, 15%, 58%)
Overlay0#737891rgb(115, 120, 145)hsl(230, 12%, 51%)
Surface2#62677ergb(98, 103, 126)hsl(229, 13%, 44%)
Surface1#51566crgb(81, 86, 108)hsl(229, 14%, 37%)
Surface0#414559rgb(65, 69, 89)hsl(230, 16%, 30%)
Base#303446rgb(48, 52, 70)hsl(229, 19%, 23%)
Mantle#292c3crgb(41, 44, 60)hsl(231, 19%, 20%)
Crust#232634rgb(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%)` | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LabelsHexRGGHSL
Rosewater#f4dbd6rgb(244, 219, 214)hsl(10, 58%, 90%)
Flamingo#f0c6c6rgb(240, 198, 198)hsl(0, 58%, 86%)
Pink#f5bde6rgb(245, 189, 230)hsl(316, 74%, 85%)
Mauve#c6a0f6rgb(198, 160, 246)hsl(267, 83%, 80%)
Red#ed8796rgb(237, 135, 150)hsl(351, 74%, 73%)
Maroon#ee99a0rgb(238, 153, 160)hsl(355, 71%, 77%)
Peach#f5a97frgb(245, 169, 127)hsl(21, 86%, 73%)
Yellow#eed49frgb(238, 212, 159)hsl(40, 70%, 78%)
Green#a6da95rgb(166, 218, 149)hsl(105, 48%, 72%)
Teal#8bd5cargb(139, 213, 202)hsl(171, 47%, 69%)
Sky#91d7e3rgb(145, 215, 227)hsl(189, 59%, 73%)
Sapphire#7dc4e4rgb(125, 196, 228)hsl(199, 66%, 69%)
Blue#8aadf4rgb(138, 173, 244)hsl(220, 83%, 75%)
Lavender#b7bdf8rgb(183, 189, 248)hsl(234, 82%, 85%)
Text#c5cff5rgb(197, 207, 245)hsl(228, 71%, 87%)
Subtext1#b3bce0rgb(179, 188, 224)hsl(228, 42%, 79%)
Subtext0#a1aacbrgb(161, 170, 203)hsl(227, 29%, 71%)
Overlay2#8f97b7rgb(143, 151, 183)hsl(228, 22%, 64%)
Overlay1#7d84a2rgb(125, 132, 162)hsl(229, 17%, 56%)
Overlay0#6c728drgb(108, 114, 141)hsl(229, 13%, 49%)
Surface2#5a5f78rgb(90, 95, 120)hsl(230, 14%, 41%)
Surface1#484c64rgb(72, 76, 100)hsl(231, 16%, 34%)
Surface0#363a4frgb(54, 58, 79)hsl(230, 19%, 26%)
Base#24273argb(36, 39, 58)hsl(232, 23%, 18%)
Mantle#1e2030rgb(30, 32, 48)hsl(233, 23%, 15%)
Crust#181926rgb(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%)` | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LabelsHexRGGHSL
Rosewater#f5e0dcrgb(245, 224, 220)hsl(10, 56%, 91%)
Flamingo#f2cdcdrgb(242, 205, 205)hsl(0, 59%, 88%)
Pink#f5c2e7rgb(245, 194, 231)hsl(316, 72%, 86%)
Mauve#cba6f7rgb(203, 166, 247)hsl(267, 84%, 81%)
Red#f38ba8rgb(243, 139, 168)hsl(343, 81%, 75%)
Maroon#eba0acrgb(235, 160, 172)hsl(350, 65%, 77%)
Peach#fab387rgb(250, 179, 135)hsl(23, 92%, 75%)
Yellow#f9e2afrgb(249, 226, 175)hsl(41, 86%, 83%)
Green#a6e3a1rgb(166, 227, 161)hsl(115, 54%, 76%)
Teal#94e2d5rgb(148, 226, 213)hsl(170, 57%, 73%)
Sky#89dcebrgb(137, 220, 235)hsl(189, 71%, 73%)
Sapphire#74c7ecrgb(116, 199, 236)hsl(199, 76%, 69%)
Blue#87b0f9rgb(135, 176, 249)hsl(218, 90%, 75%)
Lavender#b4befergb(180, 190, 254)hsl(232, 97%, 85%)
Text#c6d0f5rgb(198, 208, 245)hsl(227, 70%, 87%)
Subtext1#b3bcdfrgb(179, 188, 223)hsl(228, 41%, 79%)
Subtext0#a1a8c9rgb(161, 168, 201)hsl(229, 27%, 71%)
Overlay2#8e95b3rgb(142, 149, 179)hsl(229, 20%, 63%)
Overlay1#7b819drgb(123, 129, 157)hsl(229, 15%, 55%)
Overlay0#696d86rgb(105, 109, 134)hsl(232, 12%, 47%)
Surface2#565970rgb(86, 89, 112)hsl(233, 13%, 39%)
Surface1#43465argb(67, 70, 90)hsl(232, 15%, 31%)
Surface0#313244rgb(49, 50, 68)hsl(237, 16%, 23%)
Base#1e1e2ergb(30, 30, 46)hsl(240, 21%, 15%)
Mantle#181825rgb(24, 24, 37)hsl(240, 21%, 12%)
Crust#11111brgb(17, 17, 27)hsl(240, 23%, 9%)