hammy/catppuccin

😸 Soothing pastel theme for the high-spirited!

You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Go to file

brvn0 767dc6901a fix: use main branch for assets the assets also work without this change but in future this change will eventually be required, when some assets are changed while the features (or colors or whatever) are still in the dev branch only: this would result in assets from the dev branch conflicting with the content of the main branch Signed-off-by: brvn0 <me@brvn0.de>		2 years ago
.github/ISSUE_TEMPLATE	fix: typo in issue template	3 years ago
assets	doc: added demo	2 years ago
docs	fix: use main branch for assets	2 years ago
resources	fix: casing and some colors on dawn	2 years ago
samples	feat: added dynamically generated circles	2 years ago
.editorconfig	feat: fix and extend editorconfig	3 years ago
.gitignore	feat: added palettes generator script, some rust samples and wcag-compliace tests	2 years ago
.prettierrc.json	added sample and prettier conf	3 years ago
CONTRIBUTING.md	updated contributing	2 years ago
LICENSE	updated license	3 years ago
README.md	fix: use main branch for assets	2 years ago

README.md

Catppuccin Theme

Palettes · Ports · Docs

Catppuccin is a community-driven pastel theme that aims to be the middle ground between low and high contrast themes. It consists of 4 soothing warms palette with 26 eye-candy colors each, perfect for coding, designing, and much more! In addition, this repository tracks the development of the actual color palette, the project's documentation, organization-wide assets, resources and code samples for maintainers/developers.

Join our community!

🧠 Design Philosophy

Colorful is better than colorless: the colorfulness of something contributes to the distinction amongst the parts of that something, making it marginally easier to understand how things are structured.
There should be balance: not too dull, not too bright. Suitability under various light conditions is a most.
Harmony is superior to dissonance: vivacious colors must complement each other.

🎨 Palettes

Catppuccin constist of 4 beautiful pastel color palettes. All the details can be found below.
To make the best use them please refer to the style guide.

🐑 Latte

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	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	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	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%)`