catppuccin

mirror of https://github.com/catppuccin/catppuccin synced 2024-11-22 11:33:07 +00:00

No description

Find a file

sgoudham 1d153f5afa docs: add nilesoft-shell closes #2015		2023-05-05 11:41:58 +01:00
.github	docs: update discord url	2023-05-03 00:09:11 +02:00
assets	docs(style-guide): code editors (#1997 )	2023-04-19 00:15:01 +01:00
docs	docs: update discord url	2023-05-03 00:09:11 +02:00
resources	docs: add nilesoft-shell	2023-05-05 11:41:58 +01:00
samples	docs: restructure & improve contrib docs (#1876 )	2023-01-26 19:53:05 +01:00
.editorconfig	chore: update .editorconfig	2022-09-27 02:41:54 +02:00
.gitignore	feat: autogenerate port & showcase list in README (#1894 )	2023-01-29 21:54:12 +01:00
.prettierrc.json	added sample and prettier conf	2021-12-18 18:53:58 -05:00
CONTRIBUTING.md	docs: update discord url	2023-05-03 00:09:11 +02:00
LICENSE	updated license	2022-01-22 16:12:49 -05:00
README.md	docs: update discord url	2023-05-03 00:06:29 +02:00

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.
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

See CONTRIBUTING.md

🪵 Ports and more!

Catppuccin is available for various apps and in different formats. Here is a list of them:

👾 Code Editors & IDEs

💭 Development tools

📚 Libraries

🐚 CLI tools

🌱 Terminals

🔧 System

🏄 Browsers

🧩 Browser Extensions

🔎 Search Engines

💬 Messaging

📝 Note taking

🗂️ Productivity

✨ Social

🌈 Leisure

🎮 Games

🌟 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 customizable theme for Obsidian
faerber - Website for applying custom color schemes to any wallpaper
Simple MP - A simple music player based on Material You design
Comfy - A theme for Spicetify with a basic catppuccin color scheme!

📜 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.