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.
To make the best use of them, please refer to
the style guide.
🌻 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%)
🔧 Usage
If you're interested in using our palette for your own project, make sure to check
out catppuccin/palette where you can find integrations with popular frameworks
and tools.
Already have a project making use of our palette? Don't forget to add it to
our showcase section below!
👐 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
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