catppuccin README

The project's README from github.com/catppuccin/catppuccin. As one markdown file: README.md.

Logo
Catppuccin

/ˌkætpʊˈtʃiːn/
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.

Github Logo NPM Logo Discord Logo Twitter Logo Mastodon Logo Reddit Logo

Join our community!

 

🧠 Design Philosophy

 

🎨 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)

catppuccin (catppuccin/catppuccin)

Searching Database…

这是什么?Catppuccin 是一个由社区驱动的柔和粉彩色主题,目标是介于低对比度和高对比度主题之间的中间地带:4 种舒缓的暖色口味(flavor),每种包含 26 种赏心悦目的颜色,适用于编程、设计等多种场景。
这是需要安装的东西,还是更像一份参考资料?既不是应用,也不是主题文件——这个仓库是项目的中心枢纽:它维护调色板本身,以及面向维护者和开发者的组织级资源、素材和代码示例。
那我要怎么把 Catppuccin 装到电脑上?这个仓库本身不需要安装:在 showcase 区块里为你的应用挑选现成的移植版本,或者使用 catppuccin/palette 里针对主流框架和工具发布的集成。
四种口味都是深色主题吗?不是——Latte 是浅色口味,底色为 #eff1f5;Frappé、Macchiato 和 Mocha 则是深色口味(Frappé 的底色是 #303446),它们都以各自的方式重新配色同一套 26 色。
我能在自己的项目里用这个调色板吗?可以。风格指南涵盖了一般使用场景和规范,维护者还请已经在使用该调色板的项目把自己添加到 README 的 showcase 区块中。
这个仓库里有代码吗,还是只有颜色表?有 TypeScript 工具链:一个 generate 脚本(npm run generate)用于重新构建资源文件,还有针对移植和分类的 JSON schema,以及保持它们同步的 CI 工作流。它要求 Node 22 或更高版本。
除了浅色和深色,这些口味之间还有什么区别?每种口味都把同一套 26 色结构调成自己独有的暖度和亮度,因此强调色和底层配色在 Latte、Frappé、Macchiato 和 Mocha 中保持相同的角色——你切换的是氛围,而不是层级。
Creator
catppuccin
Size
11.8 MB
Stars
19.9K
Age
4y
Commits · 90 Days