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
The README currently suggests copying the contents of the theme file in order to make edits, but Helix now allows for themes to inherit other themes, so the better option to recommend to users would be to create a blank theme file in their config themes directory, and put an inherits = … line at the top, then put whatever overrides they want to in that file.
which sets foreground color of text which has diagnostics messages to the color of that message, for example:
I would argue that shouldn't be tha case, because it looks bad, that's not how it is in other Helix themes, and I don't think catppuccin does that for other editors (here is vscode for examle)
(Also I just noticed function color is different and I think vscode's is better)
The fix is very simple, just remove the fg = "..." from the code above
i don't know if i need to activate a specific config on helix or if it is my terminal emulator, but catppuccin seems less colorful than the neovim version and this repo screenshots.
So it's now possible for themes to set primary and non-primary cursor colours for each mode.
I've done some quick local theme overrides to Catppuccin Mocha in order to demo this functionality in the clip below:
cursor-colours.mov
This makes for a really nice editing experience and it would be great to have this functionality as part of this official Catppuccin theme for Helix. 🙂
In case it's helpful, below is the theme override configuration I used for the clip above.
From my NixOS config:
{programs.helix.themes={custom={"inherits"="catppuccin_mocha";"ui.statusline.normal"={fg="base";bg="lavender";};"ui.statusline.insert"={fg="base";bg="green";};"ui.statusline.select"={fg="base";bg="yellow";};"ui.cursor.primary.normal"={fg="base";bg="lavender";};"ui.cursor.primary.insert"={fg="base";bg="green";};"ui.cursor.primary.select"={fg="base";bg="yellow";};# The non-primary cursor colours need to be a dimmed version of the above"ui.cursor.normal"={fg="base";bg="#A6ADC8";};"ui.cursor.insert"={fg="base";bg="#AACCC6";};"ui.cursor.select"={fg="base";bg="#B6A98B";};};};}
Please note that the colours and combinations were quickly thrown together and are not perfect.
It should be possible to derive something nicer when blending existing palette colours like done here.
The current bufferline design causes inconsistency in the appearance of the editor. Since the inactive bufferline background is a different color than the statusline background, this creates and additional visual element that may not be necessary.
Currently theme has three different background for bufferline:
mantle for inactive buffers
base for active buffer
surface0 for background
Also, in latte version it's difficult to read name of inactive buffer:
Possible Solutions
1. Make bufferline background same as inactive buffers background
The fix is very simple, we just need change bg to mantle for ui.bufferline.background.
2. Make inactive buffers background same as active background and use statusline background for bufferline background