b9bbd77c7f
* docs: restructure & improve contrib docs * chore: rework samples code * docs: fix capitalization & brand names * docs: PR comments & try to standardise palette vs flavor * docs: add sample-programs * docs: update submission guidelines (refs: #1821) * refactor: tidy up docs Co-authored-by: winston <hey@winston.sh> |
2 years ago | |
---|---|---|
.github | 2 years ago | |
assets | 2 years ago | |
docs | 2 years ago | |
resources | 2 years ago | |
samples | 2 years ago | |
.editorconfig | 2 years ago | |
.gitignore | 3 years ago | |
.prettierrc.json | 3 years ago | |
CONTRIBUTING.md | 2 years ago | |
LICENSE | 3 years ago | |
README.md | 2 years ago |
README.md
Catppuccin Theme
Palette Β· Ports Β· Showcase Β· Docs
Β
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%) |
Β
πͺ΅ Ports and more!
Catppuccin is available for various apps and in different formats. Here is a list of them:
πΎ Code Editors
π Development
π§ System
π Shells
π€ Productivity
π Leisure
π₯οΈ Browsers
π Search engines
𧩠Extensions
π¬ Messaging
π± Terminals
β¨ Social
Β
π Showcase
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 customisable theme for Obsidian
Β
π 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.
See CONTRIBUTING.md.
Β
π§ 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.
If you already have a project using our palette, don't forget to add it to our showcase section above!
Β
π License
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.
Β
β€οΈ Gratitude
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