catppuccin/README.md

55 KiB
Raw Blame History

Logo
Catppuccin

/ˌkætpʊˈtʃiːn/
Palette · Ports · Showcase · Docs

Stargazers Releases Issues Discord W3C

 

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, the project's documentation, organization-wide assets, resources and code samples for maintainers/developers.

Github Logo NPM Logo Discord Logo Twitter Logo Mastodon Logo Reddit Logo

Join our community!

 

🧠 Design Philosophy

  • Colorful is better than colorless: the colorfulness of something contributes to the distinction amongst the parts of that something, making it marginally easier to understand how things are structured.
  • There should be balance: not too dull, not too bright. Suitability under various light conditions is a 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!

🌻 Latte
Labels Hex RGB HSL
Rosewater #dc8a78 rgb(220, 138, 120) hsl(11, 59%, 67%)
Flamingo #dd7878 rgb(221, 120, 120) hsl(0, 60%, 67%)
Pink #ea76cb rgb(234, 118, 203) hsl(316, 73%, 69%)
Mauve #8839ef rgb(136, 57, 239) hsl(266, 85%, 58%)
Red #d20f39 rgb(210, 15, 57) hsl(347, 87%, 44%)
Maroon #e64553 rgb(230, 69, 83) hsl(355, 76%, 59%)
Peach #fe640b rgb(254, 100, 11) hsl(22, 99%, 52%)
Yellow #df8e1d rgb(223, 142, 29) hsl(35, 77%, 49%)
Green #40a02b rgb(64, 160, 43) hsl(109, 58%, 40%)
Teal #179299 rgb(23, 146, 153) hsl(183, 74%, 35%)
Sky #04a5e5 rgb(4, 165, 229) hsl(197, 97%, 46%)
Sapphire #209fb5 rgb(32, 159, 181) hsl(189, 70%, 42%)
Blue #1e66f5 rgb(30, 102, 245) hsl(220, 91%, 54%)
Lavender #7287fd rgb(114, 135, 253) hsl(231, 97%, 72%)
Text #4c4f69 rgb(76, 79, 105) hsl(234, 16%, 35%)
Subtext1 #5c5f77 rgb(92, 95, 119) hsl(233, 13%, 41%)
Subtext0 #6c6f85 rgb(108, 111, 133) hsl(233, 10%, 47%)
Overlay2 #7c7f93 rgb(124, 127, 147) hsl(232, 10%, 53%)
Overlay1 #8c8fa1 rgb(140, 143, 161) hsl(231, 10%, 59%)
Overlay0 #9ca0b0 rgb(156, 160, 176) hsl(228, 11%, 65%)
Surface2 #acb0be rgb(172, 176, 190) hsl(227, 12%, 71%)
Surface1 #bcc0cc rgb(188, 192, 204) hsl(225, 14%, 77%)
Surface0 #ccd0da rgb(204, 208, 218) hsl(223, 16%, 83%)
Base #eff1f5 rgb(239, 241, 245) hsl(220, 23%, 95%)
Mantle #e6e9ef rgb(230, 233, 239) hsl(220, 22%, 92%)
Crust #dce0e8 rgb(220, 224, 232) hsl(220, 21%, 89%)
🪴 Frappé
Labels Hex RGB HSL
Rosewater #f2d5cf rgb(242, 213, 207) hsl(10, 57%, 88%)
Flamingo #eebebe rgb(238, 190, 190) hsl(0, 59%, 84%)
Pink #f4b8e4 rgb(244, 184, 228) hsl(316, 73%, 84%)
Mauve #ca9ee6 rgb(202, 158, 230) hsl(277, 59%, 76%)
Red #e78284 rgb(231, 130, 132) hsl(359, 68%, 71%)
Maroon #ea999c rgb(234, 153, 156) hsl(358, 66%, 76%)
Peach #ef9f76 rgb(239, 159, 118) hsl(20, 79%, 70%)
Yellow #e5c890 rgb(229, 200, 144) hsl(40, 62%, 73%)
Green #a6d189 rgb(166, 209, 137) hsl(96, 44%, 68%)
Teal #81c8be rgb(129, 200, 190) hsl(172, 39%, 65%)
Sky #99d1db rgb(153, 209, 219) hsl(189, 48%, 73%)
Sapphire #85c1dc rgb(133, 193, 220) hsl(199, 55%, 69%)
Blue #8caaee rgb(140, 170, 238) hsl(222, 74%, 74%)
Lavender #babbf1 rgb(186, 187, 241) hsl(239, 66%, 84%)
Text #c6d0f5 rgb(198, 208, 245) hsl(227, 70%, 87%)
Subtext1 #b5bfe2 rgb(181, 191, 226) hsl(227, 44%, 80%)
Subtext0 #a5adce rgb(165, 173, 206) hsl(228, 29%, 73%)
Overlay2 #949cbb rgb(148, 156, 187) hsl(228, 22%, 66%)
Overlay1 #838ba7 rgb(131, 139, 167) hsl(227, 17%, 58%)
Overlay0 #737994 rgb(115, 121, 148) hsl(229, 13%, 52%)
Surface2 #626880 rgb(98, 104, 128) hsl(228, 13%, 44%)
Surface1 #51576d rgb(81, 87, 109) hsl(227, 15%, 37%)
Surface0 #414559 rgb(65, 69, 89) hsl(230, 16%, 30%)
Base #303446 rgb(48, 52, 70) hsl(229, 19%, 23%)
Mantle #292c3c rgb(41, 44, 60) hsl(231, 19%, 20%)
Crust #232634 rgb(35, 38, 52) hsl(229, 20%, 17%)
🌺 Macchiato
Labels Hex RGB HSL
Rosewater #f4dbd6 rgb(244, 219, 214) hsl(10, 58%, 90%)
Flamingo #f0c6c6 rgb(240, 198, 198) hsl(0, 58%, 86%)
Pink #f5bde6 rgb(245, 189, 230) hsl(316, 74%, 85%)
Mauve #c6a0f6 rgb(198, 160, 246) hsl(267, 83%, 80%)
Red #ed8796 rgb(237, 135, 150) hsl(351, 74%, 73%)
Maroon #ee99a0 rgb(238, 153, 160) hsl(355, 71%, 77%)
Peach #f5a97f rgb(245, 169, 127) hsl(21, 86%, 73%)
Yellow #eed49f rgb(238, 212, 159) hsl(40, 70%, 78%)
Green #a6da95 rgb(166, 218, 149) hsl(105, 48%, 72%)
Teal #8bd5ca rgb(139, 213, 202) hsl(171, 47%, 69%)
Sky #91d7e3 rgb(145, 215, 227) hsl(189, 59%, 73%)
Sapphire #7dc4e4 rgb(125, 196, 228) hsl(199, 66%, 69%)
Blue #8aadf4 rgb(138, 173, 244) hsl(220, 83%, 75%)
Lavender #b7bdf8 rgb(183, 189, 248) hsl(234, 82%, 85%)
Text #cad3f5 rgb(202, 211, 245) hsl(227, 68%, 88%)
Subtext1 #b8c0e0 rgb(184, 192, 224) hsl(228, 39%, 80%)
Subtext0 #a5adcb rgb(165, 173, 203) hsl(227, 27%, 72%)
Overlay2 #939ab7 rgb(147, 154, 183) hsl(228, 20%, 65%)
Overlay1 #8087a2 rgb(128, 135, 162) hsl(228, 15%, 57%)
Overlay0 #6e738d rgb(110, 115, 141) hsl(230, 12%, 49%)
Surface2 #5b6078 rgb(91, 96, 120) hsl(230, 14%, 41%)
Surface1 #494d64 rgb(73, 77, 100) hsl(231, 16%, 34%)
Surface0 #363a4f rgb(54, 58, 79) hsl(230, 19%, 26%)
Base #24273a rgb(36, 39, 58) hsl(232, 23%, 18%)
Mantle #1e2030 rgb(30, 32, 48) hsl(233, 23%, 15%)
Crust #181926 rgb(24, 25, 38) hsl(236, 23%, 12%)
🌿 Mocha
Labels Hex RGB HSL
Rosewater #f5e0dc rgb(245, 224, 220) hsl(10, 56%, 91%)
Flamingo #f2cdcd rgb(242, 205, 205) hsl(0, 59%, 88%)
Pink #f5c2e7 rgb(245, 194, 231) hsl(316, 72%, 86%)
Mauve #cba6f7 rgb(203, 166, 247) hsl(267, 84%, 81%)
Red #f38ba8 rgb(243, 139, 168) hsl(343, 81%, 75%)
Maroon #eba0ac rgb(235, 160, 172) hsl(350, 65%, 77%)
Peach #fab387 rgb(250, 179, 135) hsl(23, 92%, 75%)
Yellow #f9e2af rgb(249, 226, 175) hsl(41, 86%, 83%)
Green #a6e3a1 rgb(166, 227, 161) hsl(115, 54%, 76%)
Teal #94e2d5 rgb(148, 226, 213) hsl(170, 57%, 73%)
Sky #89dceb rgb(137, 220, 235) hsl(189, 71%, 73%)
Sapphire #74c7ec rgb(116, 199, 236) hsl(199, 76%, 69%)
Blue #89b4fa rgb(137, 180, 250) hsl(217, 92%, 76%)
Lavender #b4befe rgb(180, 190, 254) hsl(232, 97%, 85%)
Text #cdd6f4 rgb(205, 214, 244) hsl(226, 64%, 88%)
Subtext1 #bac2de rgb(186, 194, 222) hsl(227, 35%, 80%)
Subtext0 #a6adc8 rgb(166, 173, 200) hsl(228, 24%, 72%)
Overlay2 #9399b2 rgb(147, 153, 178) hsl(228, 17%, 64%)
Overlay1 #7f849c rgb(127, 132, 156) hsl(230, 13%, 55%)
Overlay0 #6c7086 rgb(108, 112, 134) hsl(231, 11%, 47%)
Surface2 #585b70 rgb(88, 91, 112) hsl(233, 12%, 39%)
Surface1 #45475a rgb(69, 71, 90) hsl(234, 13%, 31%)
Surface0 #313244 rgb(49, 50, 68) hsl(237, 16%, 23%)
Base #1e1e2e rgb(30, 30, 46) hsl(240, 21%, 15%)
Mantle #181825 rgb(24, 24, 37) hsl(240, 21%, 12%)
Crust #11111b rgb(17, 17, 27) hsl(240, 23%, 9%)

 

👐 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:

👾 Code Editors & IDEs
💭 Development Tools
📚 Libraries
🐚 CLI Tools
🌱 Terminals
🔧 System
👢 Boot Loaders
😈 Notification Daemons
🖥 Desktop Environments
🪟 Window Managers
🗂️ File Managers
🗃 Application Launchers
🏄 Browsers
🧩 Browser Extensions
🔎 Search Engines
🗺️ Translation Tools
🧠 Wikis
📸 Photo & Video
🎵 Music
📖 Productivity
💌 Email Clients
🕹 Game Development
🖼️ 3D Modelling
📝 Note Taking
🎓 Education
📃 Document Viewers
Social Networking
🗣️ Discussion Forums
🌈 Entertainment
🎮 Games
📊 Analytics
🤖 Artificial Intelligence
🏃 Health & Fitness

 

🌟 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!

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

 

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

 

Copyright © 2021-present Catppuccin Org