Catppuccin

<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 <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/> </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"> <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 src="https://img.shields.io/github/stars/catppuccin/catppuccin?colorA=363a4f&colorB=b7bdf8&style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij4KPHBhdGggZD0iTTIzNS4yNCw4NC4zOGwtMjguMDYsMjMuNjgsOC41NiwzNS4zOWExMy4zNCwxMy4zNCwwLDAsMS01LjA5LDEzLjkxLDEzLjU0LDEzLjU0LDAsMCwxLTE1LC42OUwxNjQsMTM5bC0zMS42NSwxOS4wNmExMy41MSwxMy41MSwwLDAsMS0xNS0uNjksMTMuMzIsMTMuMzIsMCwwLDEtNS4xLTEzLjkxbDguNTYtMzUuMzlMOTIuNzYsODQuMzhhMTMuMzksMTMuMzksMCwwLDEsNy42Ni0yMy41OGwzNi45NC0yLjkyLDE0LjIxLTMzLjY2YTEzLjUxLDEzLjUxLDAsMCwxLDI0Ljg2LDBsMTQuMjEsMzMuNjYsMzYuOTQsMi45MmExMy4zOSwxMy4zOSwwLDAsMSw3LjY2LDIzLjU4Wk04OC4xMSwxMTEuODlhOCw4LDAsMCwwLTExLjMyLDBMMTguMzQsMTcwLjM0YTgsOCwwLDAsMCwxMS4zMiwxMS4zMmw1OC40NS01OC40NUE4LDgsMCwwLDAsODguMTEsMTExLjg5Wm0tLjUsNjEuMTlMMzQuMzQsMjI2LjM0YTgsOCwwLDAsMCwxMS4zMiwxMS4zMmw1My4yNi01My4yN2E4LDgsMCwwLDAtMTEuMzEtMTEuMzFabTczLTEtNTQuMjksNTQuMjhhOCw4LDAsMCwwLDExLjMyLDExLjMybDU0LjI4LTU0LjI4YTgsOCwwLDAsMC0xMS4zMS0xMS4zMloiIHN0eWxlPSJmaWxsOiAjQ0FEM0Y1OyIvPgo8L3N2Zz4="></a> <a href="https://github.com/catppuccin/catppuccin/releases/latest"><img src="https://img.shields.io/github/v/release/catppuccin/catppuccin?colorA=363a4f&colorB=a6da95&style=for-the-badge&logo=github&logoColor=cad3f5"></a> <a href="https://github.com/catppuccin/catppuccin/issues"><img src="https://img.shields.io/github/issues/catppuccin/catppuccin?colorA=363a4f&colorB=f5a97f&style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij4KPHBhdGggZD0iTTIxNiwzMlYxOTJhOCw4LDAsMCwxLTgsOEg3MmExNiwxNiwwLDAsMC0xNiwxNkgxOTJhOCw4LDAsMCwxLDAsMTZINDhhOCw4LDAsMCwxLTgtOFY1NkEzMiwzMiwwLDAsMSw3MiwyNEgyMDhBOCw4LDAsMCwxLDIxNiwzMloiIHN0eWxlPSJmaWxsOiAjQ0FEM0Y1OyIvPgo8L3N2Zz4="></a> <a href="https://discord.com/servers/907385605422448742"><img src="https://img.shields.io/discord/907385605422448742?style=for-the-badge&color=c6a0f6&labelColor=363a4f&logo=discord&logoColor=cad3f5"></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.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)"/> <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> 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! <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" 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" 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" 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" 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" 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" 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" 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" 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>