Join our community!
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!
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%) |
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%) |
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%) |
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:
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!
Catppuccin is released under the MIT license, which grants the following permissions:
For more convoluted language, see the LICENSE.
Thanks to the following tools developing this project is possible:
Copyright © 2021-present Catppuccin Org