< h3 align = "center" >
< img src = "https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width = "100" alt = "Logo" / > < br / >
< img src = "https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height = "30" width = "0px" / >
Catppuccin Theme
< img src = "https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height = "30" width = "0px" / >
< / h3 >
< h6 align = "center" >
< a href = "https://github.com/catppuccin/catppuccin#-palette" > Palette< / a >
·
< a href = "https://github.com/catppuccin/catppuccin#-ports-and-more" > Ports< / a >
·
< a href = "https://github.com/catppuccin/catppuccin#-showcase" > Showcase< / a >
·
< a href = "https://github.com/catppuccin/catppuccin/tree/main/docs" > Docs< / a >
< / h6 >
< p align = "center" >
< img src = "https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/palette/macchiato.png" width = "400" / >
< / p >
< p align = "center" >
< a href = "https://github.com/catppuccin/catppuccin/stargazers" >
< img alt = "Stargazers" src = "https://img.shields.io/github/stars/catppuccin/catppuccin?style=for-the-badge&logo=starship&color=C9CBFF&logoColor=D9E0EE&labelColor=302D41" > < / a >
< a href = "https://github.com/catppuccin/catppuccin/releases/latest" >
< img alt = "Releases" src = "https://img.shields.io/github/release/catppuccin/catppuccin.svg?style=for-the-badge&logo=github&color=F2CDCD&logoColor=D9E0EE&labelColor=302D41" / > < / a >
< a href = "https://github.com/catppuccin/catppuccin/issues" >
< img alt = "Issues" src = "https://img.shields.io/github/issues/catppuccin/catppuccin?style=for-the-badge&logo=gitbook&color=B5E8E0&logoColor=D9E0EE&labelColor=302D41" > < / a >
< a href = "https://discord.gg/r6Mdz5dpFc" >
< img alt = "Discord" src = "https://img.shields.io/discord/907385605422448742?style=for-the-badge&logo=discord&color=DDB6F2&logoColor=D9E0EE&labelColor=302D41" > < / a >
< / p >
< p align = "center" >
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 warm flavors 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, < a href = "https://github.com/catppuccin/catppuccin/tree/main/docs" > < b > the project's documentation< / b > < / a > , organization-wide assets, resources and code samples for maintainers/developers.
< / p >
< p align = "center" >
< a href = "https://github.com/catppuccin" >
< picture >
< source srcset = "assets/social/macchiato_github.svg" width = "64" height = "64" alt = "Github Logo" media = "(prefers-color-scheme: dark)" / >
< source srcset = "assets/social/latte_github.svg" width = "64" height = "64" alt = "Github Logo" media = "(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" / >
< img src = "assets/social/latte_github.svg" width = "64" height = "64" alt = "Github Logo" / >
< / picture >
< / a >
< img src = "assets/misc/transparent.png" height = "1" width = "5" / >
< a href = "https://www.npmjs.com/org/catppuccin" >
< picture >
< source srcset = "assets/social/macchiato_npm.svg" width = "64" height = "64" alt = "NPM Logo" media = "(prefers-color-scheme: dark)" / >
< source srcset = "assets/social/latte_npm.svg" width = "64" height = "64" alt = "NPM Logo" media = "(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" / >
< img src = "assets/social/latte_npm.svg" width = "64" height = "64" alt = "NPM Logo" / >
< / picture >
< / a >
< img src = "assets/misc/transparent.png" height = "1" width = "5" / >
< a href = "https://discord.gg/r6Mdz5dpFc" >
< picture >
< source srcset = "assets/social/macchiato_discord.svg" width = "64" height = "64" alt = "Discord Logo" media = "(prefers-color-scheme: dark)" / >
< source srcset = "assets/social/latte_discord.svg" width = "64" height = "64" alt = "Discord Logo" media = "(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" / >
< img src = "assets/social/latte_discord.svg" width = "64" height = "64" alt = "Discord Logo" / >
< / picture >
< / a >
< img src = "assets/misc/transparent.png" height = "1" width = "5" / >
< a href = "https://twitter.com/catppuccintheme" >
< picture >
< source srcset = "assets/social/macchiato_twitter.svg" width = "64" height = "64" alt = "Twitter Logo" media = "(prefers-color-scheme: dark)" / >
< source srcset = "assets/social/latte_twitter.svg" width = "64" height = "64" alt = "Twitter Logo" media = "(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" / >
< img src = "assets/social/latte_twitter.svg" width = "64" height = "64" alt = "Twitter Logo" / >
< / picture >
< / a >
< img src = "assets/misc/transparent.png" height = "1" width = "5" / >
< a href = "https://fosstodon.org/@catppuccin" >
< picture >
< source srcset = "assets/social/macchiato_mastodon.svg" width = "64" height = "64" alt = "Mastodon Logo" media = "(prefers-color-scheme: dark)" / >
< source srcset = "assets/social/latte_mastodon.svg" width = "64" height = "64" alt = "Mastodon Logo" media = "(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" / >
< img src = "assets/social/latte_mastodon.svg" width = "64" height = "64" alt = "Mastodon Logo" / >
< / picture >
< / a >
< img src = "assets/misc/transparent.png" height = "1" width = "5" / >
< a href = "https://reddit.com/r/catppuccin" >
< picture >
< source srcset = "assets/social/macchiato_reddit.svg" width = "64" height = "64" alt = "Reddit Logo" media = "(prefers-color-scheme: dark)" / >
< source srcset = "assets/social/latte_reddit.svg" width = "64" height = "64" alt = "Reddit Logo" media = "(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" / >
< img src = "assets/social/latte_reddit.svg" width = "64" height = "64" alt = "Reddit Logo" / >
< / picture >
< / a >
< / p >
< p align = "center" >
Join our community!
< / p >
### 🧠 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 must.
- **Harmony is superior to dissonance**: vivacious colors must complement each other.
### 🎨 Palette
**Catppuccin** consists of 4 beautiful pastel color palettes, named **flavors** . All the details can be found below.< br >
To make the best use of them, please refer to
the [style guide ](https://github.com/catppuccin/catppuccin/blob/main/docs/style-guide.md ).
< br > < img src = "assets/misc/transparent.png" height = "10" width = "0" / >
< details >
< summary > 🌻 Latte< / summary >
< table >
< tr >
< th > < / th >
< th > Labels< / th >
< th > Hex< / th >
< th > RGB< / th >
< th > HSL< / th >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_rosewater.png" height = "23" width = "23" / > < / td >
< td > Rosewater< / td >
< td > < code > #dc8a78< / code > < / td >
< td > < code > rgb(220, 138, 120)< / code > < / td >
< td > < code > hsl(11, 59%, 67%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_flamingo.png" height = "23" width = "23" / > < / td >
< td > Flamingo< / td >
< td > < code > #dd7878< / code > < / td >
< td > < code > rgb(221, 120, 120)< / code > < / td >
< td > < code > hsl(0, 60%, 67%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_pink.png" height = "23" width = "23" / > < / td >
< td > Pink< / td >
< td > < code > #ea76cb< / code > < / td >
< td > < code > rgb(234, 118, 203)< / code > < / td >
< td > < code > hsl(316, 73%, 69%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_mauve.png" height = "23" width = "23" / > < / td >
< td > Mauve< / td >
< td > < code > #8839ef< / code > < / td >
< td > < code > rgb(136, 57, 239)< / code > < / td >
< td > < code > hsl(266, 85%, 58%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_red.png" height = "23" width = "23" / > < / td >
< td > Red< / td >
< td > < code > #d20f39< / code > < / td >
< td > < code > rgb(210, 15, 57)< / code > < / td >
< td > < code > hsl(347, 87%, 44%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_maroon.png" height = "23" width = "23" / > < / td >
< td > Maroon< / td >
< td > < code > #e64553< / code > < / td >
< td > < code > rgb(230, 69, 83)< / code > < / td >
< td > < code > hsl(355, 76%, 59%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_peach.png" height = "23" width = "23" / > < / td >
< td > Peach< / td >
< td > < code > #fe640b< / code > < / td >
< td > < code > rgb(254, 100, 11)< / code > < / td >
< td > < code > hsl(22, 99%, 52%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_yellow.png" height = "23" width = "23" / > < / td >
< td > Yellow< / td >
< td > < code > #df8e1d< / code > < / td >
< td > < code > rgb(223, 142, 29)< / code > < / td >
< td > < code > hsl(35, 77%, 49%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_green.png" height = "23" width = "23" / > < / td >
< td > Green< / td >
< td > < code > #40a02b< / code > < / td >
< td > < code > rgb(64, 160, 43)< / code > < / td >
< td > < code > hsl(109, 58%, 40%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_teal.png" height = "23" width = "23" / > < / td >
< td > Teal< / td >
< td > < code > #179299< / code > < / td >
< td > < code > rgb(23, 146, 153)< / code > < / td >
< td > < code > hsl(183, 74%, 35%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_sky.png" height = "23" width = "23" / > < / td >
< td > Sky< / td >
< td > < code > #04a5e5< / code > < / td >
< td > < code > rgb(4, 165, 229)< / code > < / td >
< td > < code > hsl(197, 97%, 46%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_sapphire.png" height = "23" width = "23" / > < / td >
< td > Sapphire< / td >
< td > < code > #209fb5< / code > < / td >
< td > < code > rgb(32, 159, 181)< / code > < / td >
< td > < code > hsl(189, 70%, 42%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_blue.png" height = "23" width = "23" / > < / td >
< td > Blue< / td >
< td > < code > #1e66f5< / code > < / td >
< td > < code > rgb(30, 102, 245)< / code > < / td >
< td > < code > hsl(220, 91%, 54%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_lavender.png" height = "23" width = "23" / > < / td >
< td > Lavender< / td >
< td > < code > #7287fd< / code > < / td >
< td > < code > rgb(114, 135, 253)< / code > < / td >
< td > < code > hsl(231, 97%, 72%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_text.png" height = "23" width = "23" / > < / td >
< td > Text< / td >
< td > < code > #4c4f69< / code > < / td >
< td > < code > rgb(76, 79, 105)< / code > < / td >
< td > < code > hsl(234, 16%, 35%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_subtext1.png" height = "23" width = "23" / > < / td >
< td > Subtext1< / td >
< td > < code > #5c5f77< / code > < / td >
< td > < code > rgb(92, 95, 119)< / code > < / td >
< td > < code > hsl(233, 13%, 41%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_subtext0.png" height = "23" width = "23" / > < / td >
< td > Subtext0< / td >
< td > < code > #6c6f85< / code > < / td >
< td > < code > rgb(108, 111, 133)< / code > < / td >
< td > < code > hsl(233, 10%, 47%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_overlay2.png" height = "23" width = "23" / > < / td >
< td > Overlay2< / td >
< td > < code > #7c7f93< / code > < / td >
< td > < code > rgb(124, 127, 147)< / code > < / td >
< td > < code > hsl(232, 10%, 53%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_overlay1.png" height = "23" width = "23" / > < / td >
< td > Overlay1< / td >
< td > < code > #8c8fa1< / code > < / td >
< td > < code > rgb(140, 143, 161)< / code > < / td >
< td > < code > hsl(231, 10%, 59%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_overlay0.png" height = "23" width = "23" / > < / td >
< td > Overlay0< / td >
< td > < code > #9ca0b0< / code > < / td >
< td > < code > rgb(156, 160, 176)< / code > < / td >
< td > < code > hsl(228, 11%, 65%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_surface2.png" height = "23" width = "23" / > < / td >
< td > Surface2< / td >
< td > < code > #acb0be< / code > < / td >
< td > < code > rgb(172, 176, 190)< / code > < / td >
< td > < code > hsl(227, 12%, 71%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_surface1.png" height = "23" width = "23" / > < / td >
< td > Surface1< / td >
< td > < code > #bcc0cc< / code > < / td >
< td > < code > rgb(188, 192, 204)< / code > < / td >
< td > < code > hsl(225, 14%, 77%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_surface0.png" height = "23" width = "23" / > < / td >
< td > Surface0< / td >
< td > < code > #ccd0da< / code > < / td >
< td > < code > rgb(204, 208, 218)< / code > < / td >
< td > < code > hsl(223, 16%, 83%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_base.png" height = "23" width = "23" / > < / td >
< td > Base< / td >
< td > < code > #eff1f5< / code > < / td >
< td > < code > rgb(239, 241, 245)< / code > < / td >
< td > < code > hsl(220, 23%, 95%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_mantle.png" height = "23" width = "23" / > < / td >
< td > Mantle< / td >
< td > < code > #e6e9ef< / code > < / td >
< td > < code > rgb(230, 233, 239)< / code > < / td >
< td > < code > hsl(220, 22%, 92%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/latte_crust.png" height = "23" width = "23" / > < / td >
< td > Crust< / td >
< td > < code > #dce0e8< / code > < / td >
< td > < code > rgb(220, 224, 232)< / code > < / td >
< td > < code > hsl(220, 21%, 89%)< / code > < / td >
< / tr >
< / table >
< / details >
< details >
< summary > 🪴 Frappé< / summary >
< table >
< tr >
< th > < / th >
< th > Labels< / th >
< th > Hex< / th >
< th > RGB< / th >
< th > HSL< / th >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_rosewater.png" height = "23" width = "23" / > < / td >
< td > Rosewater< / td >
< td > < code > #f2d5cf< / code > < / td >
< td > < code > rgb(242, 213, 207)< / code > < / td >
< td > < code > hsl(10, 57%, 88%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_flamingo.png" height = "23" width = "23" / > < / td >
< td > Flamingo< / td >
< td > < code > #eebebe< / code > < / td >
< td > < code > rgb(238, 190, 190)< / code > < / td >
< td > < code > hsl(0, 59%, 84%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_pink.png" height = "23" width = "23" / > < / td >
< td > Pink< / td >
< td > < code > #f4b8e4< / code > < / td >
< td > < code > rgb(244, 184, 228)< / code > < / td >
< td > < code > hsl(316, 73%, 84%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_mauve.png" height = "23" width = "23" / > < / td >
< td > Mauve< / td >
< td > < code > #ca9ee6< / code > < / td >
< td > < code > rgb(202, 158, 230)< / code > < / td >
< td > < code > hsl(277, 59%, 76%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_red.png" height = "23" width = "23" / > < / td >
< td > Red< / td >
< td > < code > #e78284< / code > < / td >
< td > < code > rgb(231, 130, 132)< / code > < / td >
< td > < code > hsl(359, 68%, 71%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_maroon.png" height = "23" width = "23" / > < / td >
< td > Maroon< / td >
< td > < code > #ea999c< / code > < / td >
< td > < code > rgb(234, 153, 156)< / code > < / td >
< td > < code > hsl(358, 66%, 76%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_peach.png" height = "23" width = "23" / > < / td >
< td > Peach< / td >
< td > < code > #ef9f76< / code > < / td >
< td > < code > rgb(239, 159, 118)< / code > < / td >
< td > < code > hsl(20, 79%, 70%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_yellow.png" height = "23" width = "23" / > < / td >
< td > Yellow< / td >
< td > < code > #e5c890< / code > < / td >
< td > < code > rgb(229, 200, 144)< / code > < / td >
< td > < code > hsl(40, 62%, 73%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_green.png" height = "23" width = "23" / > < / td >
< td > Green< / td >
< td > < code > #a6d189< / code > < / td >
< td > < code > rgb(166, 209, 137)< / code > < / td >
< td > < code > hsl(96, 44%, 68%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_teal.png" height = "23" width = "23" / > < / td >
< td > Teal< / td >
< td > < code > #81c8be< / code > < / td >
< td > < code > rgb(129, 200, 190)< / code > < / td >
< td > < code > hsl(172, 39%, 65%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_sky.png" height = "23" width = "23" / > < / td >
< td > Sky< / td >
< td > < code > #99d1db< / code > < / td >
< td > < code > rgb(153, 209, 219)< / code > < / td >
< td > < code > hsl(189, 48%, 73%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_sapphire.png" height = "23" width = "23" / > < / td >
< td > Sapphire< / td >
< td > < code > #85c1dc< / code > < / td >
< td > < code > rgb(133, 193, 220)< / code > < / td >
< td > < code > hsl(199, 55%, 69%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_blue.png" height = "23" width = "23" / > < / td >
< td > Blue< / td >
< td > < code > #8caaee< / code > < / td >
< td > < code > rgb(140, 170, 238)< / code > < / td >
< td > < code > hsl(222, 74%, 74%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_lavender.png" height = "23" width = "23" / > < / td >
< td > Lavender< / td >
< td > < code > #babbf1< / code > < / td >
< td > < code > rgb(186, 187, 241)< / code > < / td >
< td > < code > hsl(239, 66%, 84%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_text.png" height = "23" width = "23" / > < / td >
< td > Text< / td >
< td > < code > #c6d0f5< / code > < / td >
< td > < code > rgb(198, 208, 245)< / code > < / td >
< td > < code > hsl(227, 70%, 87%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_subtext1.png" height = "23" width = "23" / > < / td >
< td > Subtext1< / td >
< td > < code > #b5bfe2< / code > < / td >
< td > < code > rgb(181, 191, 226)< / code > < / td >
< td > < code > hsl(227, 44%, 80%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_subtext0.png" height = "23" width = "23" / > < / td >
< td > Subtext0< / td >
< td > < code > #a5adce< / code > < / td >
< td > < code > rgb(165, 173, 206)< / code > < / td >
< td > < code > hsl(228, 29%, 73%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_overlay2.png" height = "23" width = "23" / > < / td >
< td > Overlay2< / td >
< td > < code > #949cbb< / code > < / td >
< td > < code > rgb(148, 156, 187)< / code > < / td >
< td > < code > hsl(228, 22%, 66%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_overlay1.png" height = "23" width = "23" / > < / td >
< td > Overlay1< / td >
< td > < code > #838ba7< / code > < / td >
< td > < code > rgb(131, 139, 167)< / code > < / td >
< td > < code > hsl(227, 17%, 58%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_overlay0.png" height = "23" width = "23" / > < / td >
< td > Overlay0< / td >
< td > < code > #737994< / code > < / td >
< td > < code > rgb(115, 121, 148)< / code > < / td >
< td > < code > hsl(229, 13%, 52%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_surface2.png" height = "23" width = "23" / > < / td >
< td > Surface2< / td >
< td > < code > #626880< / code > < / td >
< td > < code > rgb(98, 104, 128)< / code > < / td >
< td > < code > hsl(228, 13%, 44%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_surface1.png" height = "23" width = "23" / > < / td >
< td > Surface1< / td >
< td > < code > #51576d< / code > < / td >
< td > < code > rgb(81, 87, 109)< / code > < / td >
< td > < code > hsl(227, 15%, 37%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_surface0.png" height = "23" width = "23" / > < / td >
< td > Surface0< / td >
< td > < code > #414559< / code > < / td >
< td > < code > rgb(65, 69, 89)< / code > < / td >
< td > < code > hsl(230, 16%, 30%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_base.png" height = "23" width = "23" / > < / td >
< td > Base< / td >
< td > < code > #303446< / code > < / td >
< td > < code > rgb(48, 52, 70)< / code > < / td >
< td > < code > hsl(229, 19%, 23%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_mantle.png" height = "23" width = "23" / > < / td >
< td > Mantle< / td >
< td > < code > #292c3c< / code > < / td >
< td > < code > rgb(41, 44, 60)< / code > < / td >
< td > < code > hsl(231, 19%, 20%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/frappe_crust.png" height = "23" width = "23" / > < / td >
< td > Crust< / td >
< td > < code > #232634< / code > < / td >
< td > < code > rgb(35, 38, 52)< / code > < / td >
< td > < code > hsl(229, 20%, 17%)< / code > < / td >
< / tr >
< / table >
< / details >
< details >
< summary > 🌺 Macchiato< / summary >
< table >
< tr >
< th > < / th >
< th > Labels< / th >
< th > Hex< / th >
< th > RGB< / th >
< th > HSL< / th >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_rosewater.png" height = "23" width = "23" / > < / td >
< td > Rosewater< / td >
< td > < code > #f4dbd6< / code > < / td >
< td > < code > rgb(244, 219, 214)< / code > < / td >
< td > < code > hsl(10, 58%, 90%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_flamingo.png" height = "23" width = "23" / > < / td >
< td > Flamingo< / td >
< td > < code > #f0c6c6< / code > < / td >
< td > < code > rgb(240, 198, 198)< / code > < / td >
< td > < code > hsl(0, 58%, 86%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_pink.png" height = "23" width = "23" / > < / td >
< td > Pink< / td >
< td > < code > #f5bde6< / code > < / td >
< td > < code > rgb(245, 189, 230)< / code > < / td >
< td > < code > hsl(316, 74%, 85%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_mauve.png" height = "23" width = "23" / > < / td >
< td > Mauve< / td >
< td > < code > #c6a0f6< / code > < / td >
< td > < code > rgb(198, 160, 246)< / code > < / td >
< td > < code > hsl(267, 83%, 80%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_red.png" height = "23" width = "23" / > < / td >
< td > Red< / td >
< td > < code > #ed8796< / code > < / td >
< td > < code > rgb(237, 135, 150)< / code > < / td >
< td > < code > hsl(351, 74%, 73%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_maroon.png" height = "23" width = "23" / > < / td >
< td > Maroon< / td >
< td > < code > #ee99a0< / code > < / td >
< td > < code > rgb(238, 153, 160)< / code > < / td >
< td > < code > hsl(355, 71%, 77%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_peach.png" height = "23" width = "23" / > < / td >
< td > Peach< / td >
< td > < code > #f5a97f< / code > < / td >
< td > < code > rgb(245, 169, 127)< / code > < / td >
< td > < code > hsl(21, 86%, 73%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_yellow.png" height = "23" width = "23" / > < / td >
< td > Yellow< / td >
< td > < code > #eed49f< / code > < / td >
< td > < code > rgb(238, 212, 159)< / code > < / td >
< td > < code > hsl(40, 70%, 78%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_green.png" height = "23" width = "23" / > < / td >
< td > Green< / td >
< td > < code > #a6da95< / code > < / td >
< td > < code > rgb(166, 218, 149)< / code > < / td >
< td > < code > hsl(105, 48%, 72%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_teal.png" height = "23" width = "23" / > < / td >
< td > Teal< / td >
< td > < code > #8bd5ca< / code > < / td >
< td > < code > rgb(139, 213, 202)< / code > < / td >
< td > < code > hsl(171, 47%, 69%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_sky.png" height = "23" width = "23" / > < / td >
< td > Sky< / td >
< td > < code > #91d7e3< / code > < / td >
< td > < code > rgb(145, 215, 227)< / code > < / td >
< td > < code > hsl(189, 59%, 73%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_sapphire.png" height = "23" width = "23" / > < / td >
< td > Sapphire< / td >
< td > < code > #7dc4e4< / code > < / td >
< td > < code > rgb(125, 196, 228)< / code > < / td >
< td > < code > hsl(199, 66%, 69%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_blue.png" height = "23" width = "23" / > < / td >
< td > Blue< / td >
< td > < code > #8aadf4< / code > < / td >
< td > < code > rgb(138, 173, 244)< / code > < / td >
< td > < code > hsl(220, 83%, 75%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_lavender.png" height = "23" width = "23" / > < / td >
< td > Lavender< / td >
< td > < code > #b7bdf8< / code > < / td >
< td > < code > rgb(183, 189, 248)< / code > < / td >
< td > < code > hsl(234, 82%, 85%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_text.png" height = "23" width = "23" / > < / td >
< td > Text< / td >
< td > < code > #cad3f5< / code > < / td >
< td > < code > rgb(202, 211, 245)< / code > < / td >
< td > < code > hsl(227, 68%, 88%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_subtext1.png" height = "23" width = "23" / > < / td >
< td > Subtext1< / td >
< td > < code > #b8c0e0< / code > < / td >
< td > < code > rgb(184, 192, 224)< / code > < / td >
< td > < code > hsl(228, 39%, 80%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_subtext0.png" height = "23" width = "23" / > < / td >
< td > Subtext0< / td >
< td > < code > #a5adcb< / code > < / td >
< td > < code > rgb(165, 173, 203)< / code > < / td >
< td > < code > hsl(227, 27%, 72%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_overlay2.png" height = "23" width = "23" / > < / td >
< td > Overlay2< / td >
< td > < code > #939ab7< / code > < / td >
< td > < code > rgb(147, 154, 183)< / code > < / td >
< td > < code > hsl(228, 20%, 65%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_overlay1.png" height = "23" width = "23" / > < / td >
< td > Overlay1< / td >
< td > < code > #8087a2< / code > < / td >
< td > < code > rgb(128, 135, 162)< / code > < / td >
< td > < code > hsl(228, 15%, 57%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_overlay0.png" height = "23" width = "23" / > < / td >
< td > Overlay0< / td >
< td > < code > #6e738d< / code > < / td >
< td > < code > rgb(110, 115, 141)< / code > < / td >
< td > < code > hsl(230, 12%, 49%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_surface2.png" height = "23" width = "23" / > < / td >
< td > Surface2< / td >
< td > < code > #5b6078< / code > < / td >
< td > < code > rgb(91, 96, 120)< / code > < / td >
< td > < code > hsl(230, 14%, 41%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_surface1.png" height = "23" width = "23" / > < / td >
< td > Surface1< / td >
< td > < code > #494d64< / code > < / td >
< td > < code > rgb(73, 77, 100)< / code > < / td >
< td > < code > hsl(231, 16%, 34%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_surface0.png" height = "23" width = "23" / > < / td >
< td > Surface0< / td >
< td > < code > #363a4f< / code > < / td >
< td > < code > rgb(54, 58, 79)< / code > < / td >
< td > < code > hsl(230, 19%, 26%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_base.png" height = "23" width = "23" / > < / td >
< td > Base< / td >
< td > < code > #24273a< / code > < / td >
< td > < code > rgb(36, 39, 58)< / code > < / td >
< td > < code > hsl(232, 23%, 18%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_mantle.png" height = "23" width = "23" / > < / td >
< td > Mantle< / td >
< td > < code > #1e2030< / code > < / td >
< td > < code > rgb(30, 32, 48)< / code > < / td >
< td > < code > hsl(233, 23%, 15%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/macchiato_crust.png" height = "23" width = "23" / > < / td >
< td > Crust< / td >
< td > < code > #181926< / code > < / td >
< td > < code > rgb(24, 25, 38)< / code > < / td >
< td > < code > hsl(236, 23%, 12%)< / code > < / td >
< / tr >
< / table >
< / details >
< details >
< summary > 🌿 Mocha< / summary >
< table >
< tr >
< th > < / th >
< th > Labels< / th >
< th > Hex< / th >
< th > RGB< / th >
< th > HSL< / th >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_rosewater.png" height = "23" width = "23" / > < / td >
< td > Rosewater< / td >
< td > < code > #f5e0dc< / code > < / td >
< td > < code > rgb(245, 224, 220)< / code > < / td >
< td > < code > hsl(10, 56%, 91%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_flamingo.png" height = "23" width = "23" / > < / td >
< td > Flamingo< / td >
< td > < code > #f2cdcd< / code > < / td >
< td > < code > rgb(242, 205, 205)< / code > < / td >
< td > < code > hsl(0, 59%, 88%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_pink.png" height = "23" width = "23" / > < / td >
< td > Pink< / td >
< td > < code > #f5c2e7< / code > < / td >
< td > < code > rgb(245, 194, 231)< / code > < / td >
< td > < code > hsl(316, 72%, 86%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_mauve.png" height = "23" width = "23" / > < / td >
< td > Mauve< / td >
< td > < code > #cba6f7< / code > < / td >
< td > < code > rgb(203, 166, 247)< / code > < / td >
< td > < code > hsl(267, 84%, 81%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_red.png" height = "23" width = "23" / > < / td >
< td > Red< / td >
< td > < code > #f38ba8< / code > < / td >
< td > < code > rgb(243, 139, 168)< / code > < / td >
< td > < code > hsl(343, 81%, 75%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_maroon.png" height = "23" width = "23" / > < / td >
< td > Maroon< / td >
< td > < code > #eba0ac< / code > < / td >
< td > < code > rgb(235, 160, 172)< / code > < / td >
< td > < code > hsl(350, 65%, 77%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_peach.png" height = "23" width = "23" / > < / td >
< td > Peach< / td >
< td > < code > #fab387< / code > < / td >
< td > < code > rgb(250, 179, 135)< / code > < / td >
< td > < code > hsl(23, 92%, 75%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_yellow.png" height = "23" width = "23" / > < / td >
< td > Yellow< / td >
< td > < code > #f9e2af< / code > < / td >
< td > < code > rgb(249, 226, 175)< / code > < / td >
< td > < code > hsl(41, 86%, 83%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_green.png" height = "23" width = "23" / > < / td >
< td > Green< / td >
< td > < code > #a6e3a1< / code > < / td >
< td > < code > rgb(166, 227, 161)< / code > < / td >
< td > < code > hsl(115, 54%, 76%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_teal.png" height = "23" width = "23" / > < / td >
< td > Teal< / td >
< td > < code > #94e2d5< / code > < / td >
< td > < code > rgb(148, 226, 213)< / code > < / td >
< td > < code > hsl(170, 57%, 73%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_sky.png" height = "23" width = "23" / > < / td >
< td > Sky< / td >
< td > < code > #89dceb< / code > < / td >
< td > < code > rgb(137, 220, 235)< / code > < / td >
< td > < code > hsl(189, 71%, 73%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_sapphire.png" height = "23" width = "23" / > < / td >
< td > Sapphire< / td >
< td > < code > #74c7ec< / code > < / td >
< td > < code > rgb(116, 199, 236)< / code > < / td >
< td > < code > hsl(199, 76%, 69%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_blue.png" height = "23" width = "23" / > < / td >
< td > Blue< / td >
< td > < code > #89b4fa< / code > < / td >
< td > < code > rgb(137, 180, 250)< / code > < / td >
< td > < code > hsl(217, 92%, 76%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_lavender.png" height = "23" width = "23" / > < / td >
< td > Lavender< / td >
< td > < code > #b4befe< / code > < / td >
< td > < code > rgb(180, 190, 254)< / code > < / td >
< td > < code > hsl(232, 97%, 85%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_text.png" height = "23" width = "23" / > < / td >
< td > Text< / td >
< td > < code > #cdd6f4< / code > < / td >
< td > < code > rgb(205, 214, 244)< / code > < / td >
< td > < code > hsl(226, 64%, 88%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_subtext1.png" height = "23" width = "23" / > < / td >
< td > Subtext1< / td >
< td > < code > #bac2de< / code > < / td >
< td > < code > rgb(186, 194, 222)< / code > < / td >
< td > < code > hsl(227, 35%, 80%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_subtext0.png" height = "23" width = "23" / > < / td >
< td > Subtext0< / td >
< td > < code > #a6adc8< / code > < / td >
< td > < code > rgb(166, 173, 200)< / code > < / td >
< td > < code > hsl(228, 24%, 72%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_overlay2.png" height = "23" width = "23" / > < / td >
< td > Overlay2< / td >
< td > < code > #9399b2< / code > < / td >
< td > < code > rgb(147, 153, 178)< / code > < / td >
< td > < code > hsl(228, 17%, 64%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_overlay1.png" height = "23" width = "23" / > < / td >
< td > Overlay1< / td >
< td > < code > #7f849c< / code > < / td >
< td > < code > rgb(127, 132, 156)< / code > < / td >
< td > < code > hsl(230, 13%, 55%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_overlay0.png" height = "23" width = "23" / > < / td >
< td > Overlay0< / td >
< td > < code > #6c7086< / code > < / td >
< td > < code > rgb(108, 112, 134)< / code > < / td >
< td > < code > hsl(231, 11%, 47%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_surface2.png" height = "23" width = "23" / > < / td >
< td > Surface2< / td >
< td > < code > #585b70< / code > < / td >
< td > < code > rgb(88, 91, 112)< / code > < / td >
< td > < code > hsl(233, 12%, 39%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_surface1.png" height = "23" width = "23" / > < / td >
< td > Surface1< / td >
< td > < code > #45475a< / code > < / td >
< td > < code > rgb(69, 71, 90)< / code > < / td >
< td > < code > hsl(234, 13%, 31%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_surface0.png" height = "23" width = "23" / > < / td >
< td > Surface0< / td >
< td > < code > #313244< / code > < / td >
< td > < code > rgb(49, 50, 68)< / code > < / td >
< td > < code > hsl(237, 16%, 23%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_base.png" height = "23" width = "23" / > < / td >
< td > Base< / td >
< td > < code > #1e1e2e< / code > < / td >
< td > < code > rgb(30, 30, 46)< / code > < / td >
< td > < code > hsl(240, 21%, 15%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_mantle.png" height = "23" width = "23" / > < / td >
< td > Mantle< / td >
< td > < code > #181825< / code > < / td >
< td > < code > rgb(24, 24, 37)< / code > < / td >
< td > < code > hsl(240, 21%, 12%)< / code > < / td >
< / tr >
< tr >
< td > < img src = "assets/palette/circles/mocha_crust.png" height = "23" width = "23" / > < / td >
< td > Crust< / td >
< td > < code > #11111b< / code > < / td >
< td > < code > rgb(17, 17, 27)< / code > < / td >
< td > < code > hsl(240, 23%, 9%)< / code > < / td >
< / tr >
< / table >
< / details >
### 🪵 Ports and more!
Catppuccin is available for various apps and in different formats. Here is a list of them:
<!-- AUTOGEN:PORTLIST START -->
<!-- the following section is auto - generated, do not edit -->
< details >
< summary > 👾 Code Editors & IDEs< / summary >
- [Binary Ninja ](https://github.com/catppuccin/binary-ninja )
- [Cutter ](https://github.com/catppuccin/cutter )
- [Emacs ](https://github.com/catppuccin/emacs )
- [Geany ](https://github.com/catppuccin/geany )
- [Gedit ](https://github.com/catppuccin/gedit )
- [Helix ](https://github.com/catppuccin/helix )
- [JetBrains ](https://github.com/catppuccin/jetbrains )
- [Kakoune ](https://github.com/catppuccin/kakoune )
- [Lapce ](https://github.com/catppuccin/lapce )
- [Micro ](https://github.com/catppuccin/micro )
- [Neovim ](https://github.com/catppuccin/nvim )
- [Notepad++ ](https://github.com/catppuccin/notepad-plus-plus )
- [Nova ](https://github.com/catppuccin/nova )
- [Replit ](https://github.com/catppuccin/replit )
- [spyder ](https://github.com/catppuccin/spyder )
- [Sublime Text ](https://github.com/catppuccin/sublime-text )
- [Vim ](https://github.com/catppuccin/vim )
- [Visual Studio ](https://github.com/catppuccin/visual-studio )
- [Visual Studio Code ](https://github.com/catppuccin/vscode )
- [Xcode ](https://github.com/catppuccin/xcode )
- [Xed ](https://github.com/catppuccin/xed )
< / details >
< details >
< summary > 💭 Development tools< / summary >
- [CodeMirror ](https://github.com/catppuccin/codemirror )
- [egui ](https://github.com/catppuccin/egui )
- [Highlight.js ](https://github.com/catppuccin/highlightjs )
- [Insomnia ](https://github.com/catppuccin/insomnia )
- [Matplotlib ](https://github.com/catppuccin/matplotlib )
- [mdBook ](https://github.com/catppuccin/mdBook )
- [Tailwind CSS ](https://github.com/catppuccin/tailwindcss )
- [Unreal Engine ](https://github.com/catppuccin/unreal-engine )
- [Vercel ](https://github.com/catppuccin/vercel )
< / details >
< details >
< summary > 📚 Libraries< / summary >
- [Go ](https://github.com/catppuccin/go )
- [Pantone ](https://github.com/catppuccin/pantone )
- [Python ](https://github.com/catppuccin/python )
- [Rust ](https://github.com/catppuccin/rust )
- [UI ](https://github.com/catppuccin/ui )
< / details >
< details >
< summary > 🐚 CLI tools< / summary >
- [bat ](https://github.com/catppuccin/bat )
- [bottom ](https://github.com/catppuccin/bottom )
- [Btop++ ](https://github.com/catppuccin/btop )
- [C.A.V.A. ](https://github.com/catppuccin/cava )
- [Fish ](https://github.com/catppuccin/fish )
- [fzf ](https://github.com/catppuccin/fzf )
- [GitUI ](https://github.com/catppuccin/gitui )
- [Glamour ](https://github.com/catppuccin/glamour )
- [k9s ](https://github.com/catppuccin/k9s )
- [Lazygit ](https://github.com/catppuccin/lazygit )
- [Midning Commander ](https://github.com/catppuccin/mc )
- [NeoMutt ](https://github.com/catppuccin/neomutt )
- [Newsboat ](https://github.com/catppuccin/newsboat )
- [sc-im ](https://github.com/catppuccin/sc-im )
- [tmux ](https://github.com/catppuccin/tmux )
- [Zellij ](https://github.com/catppuccin/zellij )
- [zsh-syntax-highlighting ](https://github.com/catppuccin/zsh-syntax-highlighting )
< / details >
< details >
< summary > 🌱 Terminals< / summary >
- [Alacritty ](https://github.com/catppuccin/alacritty )
- [Black Box ](https://github.com/catppuccin/blackbox )
- [Blink ](https://github.com/catppuccin/blink )
- [Contour ](https://github.com/catppuccin/contour )
- [CRT: cool-retro-term ](https://github.com/catppuccin/crt )
- [foot ](https://github.com/catppuccin/foot )
- [GNOME Terminal ](https://github.com/catppuccin/gnome-terminal )
- [Hyper ](https://github.com/catppuccin/hyper )
- [iTerm2 ](https://github.com/catppuccin/iterm )
- [Kitty ](https://github.com/catppuccin/kitty )
- [Konsole ](https://github.com/catppuccin/konsole )
- [QTerminal ](https://github.com/catppuccin/qterminal )
- [st ](https://github.com/catppuccin/st )
- [Tabby ](https://github.com/catppuccin/tabby )
- [Terminal.app ](https://github.com/catppuccin/Terminal.app )
- [Terminator ](https://github.com/catppuccin/terminator )
- [Termux ](https://github.com/catppuccin/termux )
- [Tilix ](https://github.com/catppuccin/tilix )
- [tym ](https://github.com/catppuccin/tym )
- [Urxvt ](https://github.com/catppuccin/urxvt )
- [Warp ](https://github.com/catppuccin/warp )
- [WezTerm ](https://github.com/catppuccin/wezterm )
- [Windows Terminal ](https://github.com/catppuccin/windows-terminal )
- [Xfce4 Terminal ](https://github.com/catppuccin/xfce4-terminal )
- [Zutty ](https://github.com/catppuccin/zutty )
< / details >
< details >
< summary > 🔧 System< / summary >
- [Base16 ](https://github.com/catppuccin/base16 )
- [Conky ](https://github.com/catppuccin/conky )
- [Cursors ](https://github.com/catppuccin/cursors )
- [dmenu ](https://github.com/catppuccin/dmenu )
- [Dunst ](https://github.com/catppuccin/dunst )
- [fcitx5 ](https://github.com/catppuccin/fcitx5 )
- [FlorisBoard ](https://github.com/catppuccin/floris-board )
- [GRUB ](https://github.com/catppuccin/grub )
- [GTK ](https://github.com/catppuccin/gtk )
- [Hyprland ](https://github.com/catppuccin/hyprland )
- [i3/sway ](https://github.com/catppuccin/i3 )
- [KDE ](https://github.com/catppuccin/kde )
- [Kvantum ](https://github.com/catppuccin/Kvantum )
- [LxQT ](https://github.com/catppuccin/lxqt )
- [Mako ](https://github.com/catppuccin/mako )
- [Openbox ](https://github.com/catppuccin/openbox )
- [Papirus Folders ](https://github.com/catppuccin/papirus-folders )
- [Plank ](https://github.com/catppuccin/plank )
- [Plymouth ](https://github.com/catppuccin/plymouth )
- [Polybar ](https://github.com/catppuccin/polybar )
- [qt5ct ](https://github.com/catppuccin/qt5ct )
- [Rboard ](https://github.com/catppuccin/rboard )
- [Regolith Desktop ](https://github.com/catppuccin/regolith )
- [Rofi ](https://github.com/catppuccin/rofi )
- [SDDM ](https://github.com/catppuccin/sddm )
- [tty ](https://github.com/catppuccin/tty )
- [Ulauncher ](https://github.com/catppuccin/ulauncher )
- [waybar ](https://github.com/catppuccin/waybar )
- [Windows Files ](https://github.com/catppuccin/windows-files )
- [Xresources ](https://github.com/catppuccin/xresources )
< / details >
< details >
< summary > 🏄 Browsers< / summary >
- [Firefox ](https://github.com/catppuccin/firefox )
- [Google Chrome ](https://github.com/catppuccin/chrome )
- [qutebrowser ](https://github.com/catppuccin/qutebrowser )
- [Vivaldi ](https://github.com/catppuccin/vivaldi )
< / details >
< details >
< summary > 🧩 Browser Extensions< / summary >
- [Dark Reader ](https://github.com/catppuccin/dark-reader )
- [Nighttab ](https://github.com/catppuccin/nighttab )
- [Noir ](https://github.com/catppuccin/noir )
- [Sidebery ](https://github.com/catppuccin/sidebery )
- [Vimium ](https://github.com/catppuccin/vimium )
< / details >
< details >
< summary > 🔎 Search Engines< / summary >
- [NixOS Search ](https://github.com/catppuccin/nixos-search )
- [SearXNG ](https://github.com/catppuccin/SearXNG )
- [Startpage ](https://github.com/catppuccin/startpage )
- [Whoogle ](https://github.com/catppuccin/whoogle )
< / details >
< details >
< summary > 💬 Messaging< / summary >
- [Aliucord ](https://github.com/catppuccin/aliucord )
- [Cinny ](https://github.com/catppuccin/cinny )
- [Discord ](https://github.com/catppuccin/discord )
- [Element ](https://github.com/catppuccin/element )
- [Enmity ](https://github.com/catppuccin/enmity )
- [HexChat ](https://github.com/catppuccin/hexchat )
- [Mattermost ](https://github.com/catppuccin/mattermost )
- [Revolt ](https://github.com/catppuccin/revolt )
- [Slack ](https://github.com/catppuccin/slack )
- [Telegram ](https://github.com/catppuccin/telegram )
- [The Lounge ](https://github.com/catppuccin/thelounge )
< / details >
< details >
< summary > 📝 Note taking< / summary >
- [Joplin ](https://github.com/catppuccin/joplin )
- [Logseq ](https://github.com/catppuccin/logseq )
- [Obsidian ](https://github.com/catppuccin/obsidian )
- [Remnote ](https://github.com/catppuccin/remnote )
< / details >
< details >
< summary > 🗂️ Productivity< / summary >
- [Alfred ](https://github.com/catppuccin/alfred )
- [Anki ](https://github.com/catppuccin/anki )
- [Bento ](https://github.com/catppuccin/bento )
- [Brave Search ](https://github.com/catppuccin/brave-search )
- [Codeberg ](https://github.com/catppuccin/codeberg )
- [DeepL ](https://github.com/catppuccin/deepl )
- [DuckDuckGo ](https://github.com/catppuccin/duckduckgo )
- [Foliate ](https://github.com/catppuccin/foliate )
- [GitHub ](https://github.com/catppuccin/github )
- [ichi.moe ](https://github.com/catppuccin/ichi.moe )
- [Mailspring ](https://github.com/catppuccin/mailspring )
- [OBS Studio ](https://github.com/catppuccin/obs )
- [Proton ](https://github.com/catppuccin/proton )
- [qBittorrent ](https://github.com/catppuccin/qbittorrent )
- [ShareX ](https://github.com/catppuccin/sharex )
- [SolveSpace ](https://github.com/catppuccin/solvespace )
- [SumatraPDF ](https://github.com/catppuccin/sumatra-pdf )
- [Thunderbird ](https://github.com/catppuccin/thunderbird )
- [Tutanota ](https://github.com/catppuccin/tutanota )
- [WikiWand ](https://github.com/catppuccin/wikiwand )
- [Zathura ](https://github.com/catppuccin/zathura )
< / details >
< details >
< summary > ✨ Social< / summary >
- [Elk ](https://github.com/catppuccin/elk )
- [GitHub Readme Stats ](https://github.com/catppuccin/github-readme-stats )
- [GitHub Readme Tech Stack ](https://github.com/catppuccin/github-readme-tech-stack )
- [Hacker News ](https://github.com/catppuccin/hacker-news )
- [Infinity for Reddit ](https://github.com/catppuccin/infinity )
- [Invidious ](https://github.com/catppuccin/invidious )
- [Libreddit ](https://github.com/catppuccin/libreddit )
- [Mastodon ](https://github.com/catppuccin/mastodon )
- [Nitter ](https://github.com/catppuccin/nitter )
- [Reddit ](https://github.com/catppuccin/reddit )
- [Twitch ](https://github.com/catppuccin/twitch )
- [YouTube ](https://github.com/catppuccin/youtube )
< / details >
< details >
< summary > 🌈 Leisure< / summary >
- [Amfora ](https://github.com/catppuccin/amfora )
- [AniList ](https://github.com/catppuccin/anilist )
- [Home Assistant ](https://github.com/catppuccin/home-assistant )
- [Last.fm ](https://github.com/catppuccin/lastfm )
- [monkeytype ](https://github.com/catppuccin/monkeytype )
- [PyRadio ](https://github.com/catppuccin/pyradio )
- [Spicetify ](https://github.com/catppuccin/spicetify )
- [spotify-player ](https://github.com/catppuccin/spotify-player )
- [spotify-tui ](https://github.com/catppuccin/spotify-tui )
- [Stable Diffusion WebUI ](https://github.com/catppuccin/stable-diffusion-web-ui )
- [Steam ](https://github.com/catppuccin/steam )
- [theme.park ](https://github.com/catppuccin/theme.park )
- [YouTube Music ](https://github.com/catppuccin/youtubemusic )
< / details >
< details >
< summary > 🎮 Games< / summary >
- [BitBurner ](https://github.com/catppuccin/bitburner )
- [Blockbench ](https://github.com/catppuccin/blockbench )
- [Dwarf Fortress ](https://github.com/catppuccin/dwarf-fortress )
- [Minecraft ](https://github.com/catppuccin/minecraft )
- [Modrinth ](https://github.com/catppuccin/modrinth )
- [Moon Animator 2 ](https://github.com/catppuccin/moon-animator-2 )
- [Prism Launcher ](https://github.com/catppuccin/prismlauncher )
- [ULTRAKILL ](https://github.com/catppuccin/ultrakill )
< / details >
<!-- AUTOGEN:PORTLIST END -->
### 🌟 Showcase
> **Note** <br>
> Catppuccin staff reserve the right to remove and reject showcase additions if we determine the addition to be in
> violation of our [CODE OF CONDUCT](https://github.com/catppuccin/.github/blob/main/CODE_OF_CONDUCT.md). Extremely
> personal configurations and websites will **not** be added.
If you're making an application or tool using our palette, please let us know by adding it below!
<!-- AUTOGEN:SHOWCASE START -->
<!-- the following section is auto - generated, do not edit -->
- [flotes.app ](https://flotes.app/ ) - A free note-taking app enhanced with flashcard features
- [AnuPpuccin ](https://github.com/AnubisNekhet/AnuPpuccin ) - Highly customizable theme for [Obsidian ](https://obsidian.md )
- [faerber ](https://farbenfroh.io/faerber ) - Website for applying custom color schemes to any wallpaper
<!-- AUTOGEN:SHOWCASE END -->
### 👐 Contributing
> **Note** <br>
> if you would like to submit a port or learn how to port Catppuccin to a program, please refer to
> the [port-creation.md](https://github.com/catppuccin/catppuccin/blob/main/docs/port-creation.md).
See [CONTRIBUTING.md ](https://github.com/catppuccin/catppuccin/blob/main/CONTRIBUTING.md ).
### 🔧 Usage
If you're interested in using our palette for your own project, make sure to check
out [catppuccin/palette ](https://github.com/catppuccin/palette ) where you can find integrations with popular frameworks
and tools.
If you already have a project using our palette, don't forget to add it to
our [showcase ](#-showcase ) section above!
### 📜 License
Catppuccin is released under the MIT license, which grants the following permissions:
- Commercial use
- Distribution
- Modification
- Private use
For more convoluted language, see the [LICENSE ](https://github.com/catppuccin/catppuccin/blob/main/LICENSE ).
### ❤️ Gratitude
Thanks to the following tools developing this project is possible:
- [coolors.co ](https://coolors.co/ ): A tool for creating and collecting color palettes.
- [InkScape ](https://inkscape.org/ ): Free and open-source vector graphics editor.
- [colors_converter.asp ](https://www.w3schools.com/colors/colors_converter.asp ): Color format converter.
- [mdigi.tools ](https://mdigi.tools/ ): Web based digital tools.
< p align = "center" > < img src = "https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" / > < / p >
< p align = "center" > Copyright © 2021-present < a href = "https://github.com/catppuccin" target = "_blank" > Catppuccin Org< / a >
< p align = "center" > < a href = "https://github.com/catppuccin/catppuccin/blob/main/LICENSE" > < img src = "https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=MIT&logoColor=d9e0ee&colorA=302d41&colorB=b7bdf8" / > < / a > < / p >
