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

Pocco81 ab17bb4aca added style guide (WIP)		3 years ago
.github/ISSUE_TEMPLATE	fix: typo in issue template	3 years ago
assets	added macchiato showcase	3 years ago
docs	added style guide (WIP)	3 years ago
resources	fix: casing and some colors on dawn	3 years ago
samples	feat: added dynamically generated circles	3 years ago
.editorconfig	feat: fix and extend editorconfig	3 years ago
.gitignore	feat: added palettes generator script, some rust samples and wcag-compliace tests	3 years ago
.prettierrc.json	added sample and prettier conf	3 years ago
CONTRIBUTING.md	feat: contributing and updated readme	3 years ago
LICENSE	updated license	3 years ago
README.md	added contributing	3 years ago

README.md

Catppuccin Theme

Palette · Ports · Design Philosophy

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, 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 Styleguide.

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