README

<h3 align="center"> </h3> <h6 align="center"> <a href="https://catppuccin.com/pronunciation.mp3">/ˌkætpʊˈtʃiːn/</a> </h6> <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"> </p> <p align="center"> <a href="https://github.com/catppuccin/catppuccin/stargazers"></a> <a href="https://github.com/catppuccin/catppuccin/releases/latest"></a> <a href="https://github.com/catppuccin/catppuccin/issues"></a> <a href="https://discord.com/servers/907385605422448742"></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)"/> </a> <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)"/> </a> <a href="https://discord.com/servers/907385605422448742"> <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)"/> </a> <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)"/> </a> <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)"/> </a> <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)"/> </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.

If you want to use them for your own project, refer to our style guide for general use cases and guidelines. Additionally, you can find integrations with popular frameworks and tools in catppuccin/palette.

Already have a project making use of our palette? Don't forget to add it to our showcase section below!

<details> <summary>🌻 Latte</summary> <table> <tr> <th></th> <th>Labels</th> <th>Hex</th> <th>RGB</th> <th>HSL</th> </tr> <tr> <td></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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></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>

 

👐 Contributing

[!NOTE]

If you would like to submit a port or learn how to port Catppuccin to a program, please refer to the port-creation.md

See CONTRIBUTING.md

 

🪵 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 open> <summary>👾 Code Editors & IDEs</summary>

• Binary Ninja
• CodeMirror
• CotEditor
• Cutter
• DrRacket
• Emacs
• Geany
• Gedit
• Ghidra
• GNOME Text Editor
• Helix
• IDA (Interactive Disassembler)
• JetBrains
• JetBrains Fleet
• JetBrains Icons
• Kakoune
• Lapce
• micro
• Neovim
• Notepad++
• Nova
• Qt Creator
• Replit
• RStudio
• Spyder
• SQL Server Management Studio
• Sublime Text
• Vim
• Visual Studio
• Visual Studio Code
• Visual Studio Code Icons
• Xcode
• Xed
• Zed
• Zed Icons

</details> <details open> <summary>💭 Development Tools</summary>

• boringproxy
• Codeberg
• daisyUI
• DevDocs
• docs.deno.com
• docs.rs
• egui
• freedesktop.org
• Fyne
• GitHub
• gleam.run
• go.dev
• Grabify
• Graphite
• Home Manager Options Search
• Hoogle
• Hoppscotch
• ImHex
• Insomnia
• iSH
• Jenkins
• JupyterLab
• Keyoxide
• KiCad
• Learn X in Y Minutes
• Matplotlib
• MDN
• neovim.io
• Next.js
• NixOS Manual
• Nixpkgs Manual
• Pantone
• paste.rs
• Posting
• PowerShell
• PythonAnywhere
• React.dev
• regex101
• Scalar
• Searchix
• shadcn/ui
• Tailwind CSS
• Trinket
• UnoCSS
• Vercel
• VSCord
• web.dev

</details> <details open> <summary>📜 Documentation Generators</summary>

• Docsify
• mdBook
• mdBook
• Starlight
• VitePress

</details> <details open> <summary>🖍️ Syntax Highlighting</summary>

• Chroma
• Glamour
• highlight.js
• KSyntaxHighlighting
• Prism.js
• Pygments
• Shiki
• ZSH Fast Syntax Highlighting
• zsh-syntax-highlighting

</details> <details open> <summary>📚 Libraries</summary>

• Elixir
• Flutter
• Gleam
• Go
• Java
• LaTeX
• Lua
• Nim
• Python
• Ruby
• Rust
• Typst
• UI
• V

</details> <details open> <summary>🐚 CLI Tools</summary>

• Asciinema
• atuin
• bat
• bottom
• btop++
• delta
• fish shell
• fzf
• GitUI
• k9s
• lazygit
• LSD
• Newsboat
• Nushell
• OhMyREPL
• Process Compose
• sc-im
• skim
• Starship
• television
• tmux
• vtop
• Zellij

</details> <details open> <summary>🌱 Terminals</summary>

• Alacritty
• alacritty.org
• Black Box
• Blink
• Contour
• cool-retro-term
• Fluent Terminal
• foot
• Ghostty
• Ghostty.org
• GNOME Terminal
• Hyper
• iTerm2
• kitty
• Konsole
• LXTerminal
• MobaXterm
• QTerminal
• Rio
• st
• Tabby
• Terminal.app
• Terminator
• Termux
• Tilix
• tty
• tym
• Urxvt
• Warp
• WezTerm
• Windows Terminal
• Xfce4 Terminal
• Yakuake
• Zutty

</details> <details open> <summary>🔧 System</summary>

• Base16
• Conky
• Cursors
• fcitx5
• FlorisBoard
• Hyprlock
• Kvaesitso
• Kvantum
• Nilesoft Shell
• Nix
• Papirus Folders
• Polybar
• qt5ct
• Rboard
• SDDM
• SerenityOS
• swaylock
• waybar
• Where is my SDDM theme?
• Windows 9x
• wleave
• wlogout
• Xresources

</details> <details open> <summary>👢 Boot Loaders</summary>

• GRUB
• Limine
• Plymouth
• rEFInd

</details> <details open> <summary>😈 Notification Daemons</summary>

• Dunst
• Fnott
• mako
• swaync

</details> <details open> <summary>🖥️ Desktop Environments</summary>

• COSMIC Desktop
• KDE
• LXQt
• Regolith

</details> <details open> <summary>🪟 Window Managers</summary>

• GlazeWM
• Hyprland
• i3/sway
• Openbox

</details> <details open> <summary>🗂️ File Managers</summary>

• Broot
• eza
• File Pilot
• Forklift 4
• Midnight Commander
• MiXplorer
• openmediavault
• Superfile
• Syncthing
• Windows Files
• Yazi

</details> <details open> <summary>🗃️ Application Launchers</summary>

• Alfred
• bemenu
• dmenu
• Flow Launcher
• fr33zmenu
• Fuzzel
• Plank
• Raycast
• Rofi
• Tofi
• Ueli
• Ulauncher

</details> <details open> <summary>🏄 Browsers</summary>

• Firefox
• Google Chrome
• Opera GX
• qutebrowser
• Vivaldi
• Zen Browser

</details> <details open> <summary>🧩 Browser Extensions</summary>

• Dark Reader
• Indie Wiki Buddy
• nightTab
• Noir
• Shinigami Eyes
• Stylus
• Tumblr
• Vimium
• Web File Explorer Icons
• Yomitan

</details> <details open> <summary>🔎 Search Engines</summary>

• Brave Search
• DuckDuckGo
• Ecosia
• Google
• Mullvad Leta
• NixOS Search
• SearXNG
• Startpage
• Whoogle

</details> <details open> <summary>📦 Package Registries</summary>

• crates.io
• Hackage
• npm
• PyPI

</details> <details open> <summary>🗺️ Translation Tools</summary>

• Crowdin
• DeepL
• ichi.moe
• Jisho
• Lingva

</details> <details open> <summary>🧠 Wikis</summary>

• Arch Wiki
• NixOS Wiki
• Wikipedia
• Wikiwand

</details> <details open> <summary>📸 Photo & Video</summary>

• Canva
• Figma
• Google Photos
• imv
• mpv
• Pinterest
• ShareX

</details> <details open> <summary>🎵 Music</summary>

• Cava
• Cider
• Dopamine
• Hyperpipe
• Last.fm
• ListenBrainz
• MusicBee
• ncspot
• PyRadio
• Spicetify
• Spotify TUI
• Spotify Web
• spotify-player
• Symfonium
• Tangara
• YouTube Music

</details> <details open> <summary>📖 Productivity</summary>

• AlternativeTo
• Apple Keynote Slides
• Aseprite
• Bento
• cobalt
• CopyQ
• DioHub
• FreshRSS
• gh-dash
• Gitea
• GitKraken
• Google Drive
• Have I Been Pwned
• Home Assistant
• homepage
• inoreader
• keybr.com
• keybr.com
• Linear
• Microsoft PowerPoint Slides
• Microsoft Word
• Miniflux
• OBS Studio
• Pomotroid
• Porkbun
• Proton
• qBittorrent
• Raindrop
• Renoise
• Rentry.co
• Scrivener
• SpeedCrunch
• Squirrel (Rime for macOS)
• tldraw
• Vikunja
• Zen Browser Docs

</details> <details open> <summary>💌 Email Clients</summary>

• aerc
• Gmail
• Mailspring
• Migadu Webmail
• NeoMutt
• Thunderbird
• Tuta

</details> <details open> <summary>🕹️ Game Development</summary>

• Godot
• NameMC
• Unreal Engine

</details> <details open> <summary>🖼️ 3D Modelling</summary>

• Blockbench
• SolveSpace

</details> <details open> <summary>📝 Note Taking</summary>

• Amplenote
• ghostwriter
• Joplin
• Logseq
• Obsidian
• RemNote
• The Archive
• Trilium Notes

</details> <details open> <summary>🎓 Education</summary>

• Anki
• Canvas LMS
• Desmos
• Formative
• Quizlet

</details> <details open> <summary>📰 News & Journalism</summary>

• Substack

</details> <details open> <summary>📃 Document Viewers</summary>

• calibre
• Foliate
• Libre Office
• sent
• Sioyek
• SumatraPDF
• Zathura

</details> <details open> <summary>✨ Social Networking</summary>

• Aliucord
• Bluesky Social
• Bunny
• Chatterino 2
• Cinny
• Discord
• Element
• Elk
• Enmity
• Halloy
• HexChat
• Instagram
• LinkedIn
• Mastodon
• Mattermost
• mIRC
• Misskey
• Nitter
• Phanpy
• pronouns.cc
• Pronouns.page
• Revenge
• Revolt
• SimpleX
• Slack
• Snapchat Web
• status.cafe
• Telegram
• The Lounge
• Twitter
• Vendetta
• WhatsApp Web

</details> <details open> <summary>🗣️ Discussion Forums</summary>

• Anonymous Overflow
• DEV Community
• Giscus
• Hacker News
• Infinity For Reddit
• Lemmy
• Libreddit
• Lobsters
• Reddit
• Redlib
• Stack Overflow
• TabNews

</details> <details open> <summary>🌈 Entertainment</summary>

• 7TV
• Amfora
• AniChart
• AniList
• ChatReplay
• Holodex
• Invidious
• Jellyfin
• Monkeytype
• Picrew
• Supersonic
• theme.park
• Twitch
• YouTube

</details> <details open> <summary>🎮 Games</summary>

• Advent Of Code
• Aurora Dashboard
• Bitburner
• Chess.com
• Dwarf Fortress
• Heroic
• Lichess
• Minecraft
• Minesweeper Online
• ModOrganizer 2
• Modrinth
• Moon Animator 2
• Planet Minecraft
• Prism Launcher
• Steam Deck
• ULTRAKILL

</details> <details open> <summary>📊 Analytics</summary>

• bStats
• GitHub Readme Stats
• GitHub Readme Streak Stats
• GitHub Readme Tech Stack
• MangoHud

</details> <details open> <summary>🤖 Artificial Intelligence</summary>

• ChatGPT
• Claude
• DeepSeek
• Gemini CLI
• Google Gemini
• InvokeAI
• Ollama
• Perplexity
• Poe
• Stable Diffusion WebUI

</details> <details open> <summary>🏃 Health & Fitness</summary>

• Fitbit

</details> <!-- AUTOGEN:PORTLIST END -->

 

🌟 Showcase

[!NOTE]

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. 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 - A free note-taking app enhanced with flashcard features.
• AnuPpuccin - Highly customizable theme for Obsidian.
• faerber - Website for applying custom color schemes to any wallpaper.
• Simple MP - A simple music player based on Material You design.
• Comfy - A theme for Spicetify with a basic catppuccin color scheme!
• Catppuccin Noctis - An alternative to the official VSCode theme, with Noctis syntax highlighting.
• Catppuccin Noctis Icons - A companion icons theme for Catppuccin Noctis color theme. Forked from Symbols Icon Theme.
• Mind Elixir - A framework agnostic JavaScript mind map core.
• Career Vault - A remote job board that shows hundreds of new opportunities every day.
• Loungy - An open-source application launcher in the vein of Raycast and Alfred.
• Reciper - A simple, open-source recipe management app.
• Catbbrew - Easily create your own Catppuccin flavors.
• Tomatillo Timer - A modern pomodoro timer that syncs to your music
• Catppuccin Startpage - Aesthetic and clean startpage in Catppuccin style, hosted on GitHub Pages
• Gith - A simple TUI git helper
• n-recipe - Recipe book for Android with Catppuccin & Material You themes
• Bookbank - A self-hosted audiobook and podcast media server.

<!-- AUTOGEN:SHOWCASE END -->

 

📜 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.

 

❤️ Gratitude

Thanks to the following tools developing this project is possible:

• coolors.co: A tool for creating and collecting color palettes.
• InkScape: Free and open-source vector graphics editor.
• colors_converter.asp: Color format converter.
• mdigi.tools: Web based digital tools.

 

<p align="center"> </p> <p align="center"> Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a> </p> <p align="center"> <a href="https://github.com/catppuccin/catppuccin/blob/main/LICENSE"></a> </p>