ย
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.
Join our community!
ย
- 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.
ย
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%) |
ย
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
ย
Catppuccin is available for various apps and in different formats. Here is a list of them:
๐พ Code Editors & IDEs
- Azure Data Studio
- Binary Ninja
- CodeMirror
- Cutter
- DrRacket
- Emacs
- Geany
- Gedit
- Helix
- IDA (Interactive Disassembler)
- JetBrains
- JetBrains Fleet
- JetBrains Icons
- Kakoune
- KSyntaxHighlighting (Kate, Kwrite, etc)
- Lapce
- Micro
- Neovim
- Notepad++
- Nova
- Qt Creator
- Replit
- RStudio
- spyder
- Sublime Text
- Vim
- Visual Studio
- Visual Studio Code
- Visual Studio Code Icons
- Xcode
- Xed
- Zed
๐ญ Development Tools
๐ CLI Tools
๐ฑ Terminals
๐ง System
๐ฅ Desktop Environments
๐๏ธ File Managers
๐ Application Launchers
๐ Browsers
๐งฉ Browser Extensions
๐ Search Engines
๐ง Wikis
๐ธ Photo & Video
๐ต Music
๐ Productivity
๐ Email Clients
๐น Game Development
๐ผ๏ธ 3D Modelling
๐ Note Taking
๐ Education
๐ Document Viewers
โจ Social Networking
๐ฃ๏ธ Discussion Forums
๐ Entertainment
๐ฎ Games
๐ค Artificial Intelligence
๐ Health & Fitness
ย
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.
- Reciper - A simple, open-source recipe management app.
ย
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.
ย
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.
ย
Copyright ยฉ 2021-present Catppuccin Org
