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!
🧠 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
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
I think the code cells are missing a color from the theme and use the default one. This looks a bit ugly, would be nice if that could be fixed. Thanks :)
PS: Just saw it is even more elements, plots are also not working correctly both in notebooks and in the IPython console.
I find italics a little hard to read and I mostly stay away from themes with italic styles. I liked this theme and I really want to use it but italics are making it hard for me. I'm pretty sure this is not just me and it would be nice if this theme had variants that didn't use italics.
In Android studio there's the ability to preview composable functions. The window the previews are displayed on appears to be missed by the catppuccin theme.
Currently when you click on a line and select a portion of text on the same line it is very hard to recognize what you have selected without looking precisely at it. VSC on the other hand has much lighter color when selecting text.
VSC
IntelliJ IDEA
Changing it to have the same color would benefit a lot when trying to see which part is selected. VSC seems to be using
After updating to the latest version, there is no color distinction in the comments when it's a reference to a, for example, structure /in Go) or when it's a comment to describe the structure below.
The following screenshot shows how it's in the default theme vs the updated Catppuccin theme:
Hello and first of all, thanks you so much for such amazing theme. Looks like I have found incorrect color on welcome screen which uses for a single project selection/highlighting/hovering. The investigation shows that IntelliJ uses lightSelectionBackground parameter from Table object instead of some in WelcomeScreen object. To fix this issue that parameter should be defined in main.ts file. Actually, I can create the fix on my end and then create a new pull request or it could be fixed by someone else. Currently, the question is more about which color should we use for selection/highlighting/hovering. I think there are few options: selectionBackground and secondaryBackground.
I recently installed catppuccin, but the color scheme does not appear to be working. The texts are not highlighted, as shown in the image below.
Update: Some areas of my file have the color scheme working, but others do not; I'm not sure what's causing this issue.
Hi !
I think there is a problem of contrast in the Terminal of PHP Storm (version 2022.3.2).
The contrast ratio between text and background is 1.38:1
Using the Latte Theme
When I use the new ui (here PHP Storm), the line separating the top "titlebar" from the rest of the application appears only above the sidebar. I think it should be over the entire width of the window in the same way as in the case of the status bar (screenshot below).
I think the line separating the numbering of the line from the code looks strange, but it seems to me that there should also be a line separating the side panel from the editor.
Using JetBrains Rider, any XAML file that gets opened is basically all orange and white, with no distinction between imports, element types, properties, strings, etc...
I just noticed, that invalid characters are nearly invisible because it's black text on the dark background.
In the attached screenshot I added an $ character in line 6. Yes, there is the error hint but it's still not opimal that the character is so hard to see which can cause confusion.
Unfortunately, there are two issues when using the JetBrains DataGrip plugin (to work with databases).
Regarding the first one:
I usually write SQL queries in the query console.
When you have nested queries (like a simple SELECT subquery) and you are trying to execute them using Ctrl+Enter, DataGrip visually highlights the query that is to be executed (either just the nested one or the entire query).
Using the Catppuccin theme (Macchiato in my case), this visual highlighting does not work anymore.
Regarding the second one:
I have all my connections color-coded in order to visually highlight the connection I am currently using.
Unfortunately, Catppuccin does not play well with the predefined (and unchangeable) colors that DataGrip offers to color-code connections. Text is not very readable (the contrast between the colors and the themed text color is pretty low).
It would be great if those two things would also work well when using Catppuccin since it is a really pleasent theme!
Please let me know if you need any further information regarding these issues.
Plugin 'Catppuccin Theme' (version '2.0.7') is not compatible with the current version of the IDE, because it requires build 223.* or older but the current build is PS-231.4840.331
Hi,
First of all, I wanted to thank you for this theme that I use daily 👍🏻
A little problem of visibility with the parenthesis and brackets though. The matching should be more visible (maybe add a border?)
It seems to work well with IntelliJ IDEs 2022.1 version like DataGrip, but every time restarts the IDE,
there will be a message that says this plugin does not support the newer version.
Seems like the recommendation of Copilot is always in pink color whereas it should be in gray color, see the difference between VSC and JetBrains, in this case IntelliJ IDEA.
sets the background color for code chunks in R markdown files to be the same as the text foreground color, which yields completely invisible text. Based on the style guide, I think this should maybe be crust?
I have the plugin installed, and when I have catppuccin-latte selected, it makes the builtin terminal standard output a very light shade of gray (BCC0CC):.stdout: BCC0CC ANSI black: 5C5F77
I think it should at least be using a shade as dark as the ANSI black shade (5C5F77):
I checked the styleguide, and it seems to say that text should be used, rather than subtext1, which is the ANSI black color.
Whatever the new color picked is, it should definitely be darker than the current color.
Just installed v2 via the released file on PhpStorm 2022.2.3.
Although they work well in Mocha and Macchiato, some file colors don't seem to have their corresponding match in Latte.
I could use custom colors, but then those wouldn't change when switching from light to dark theme.
The TODO and FIXME comments are very dark, I believe having a little more contrast, can be a great improvement, especially for those who find these sort of things quite useful!
Floating windows (e.g. Search Everywhere) don't have a clear border which makes them undistinguishable from the background.
This makes it hard and annoying to move/resize them.
The command window in VSCode for example has a shadowed border.
Hi there ;-)
I noticed that when a refactoring action is not possible, the error message is not visible enough (maybe you should change the font color ?)
exemple: trying the action "Convert parameter to underscore section" which is impossible on this scala function:
gives the following error message: