Catppuccin 调色板规格解析四大 Flavor、子调色板结构与基础设施架构【免费下载链接】catppuccin Soothing pastel theme for the high-spirited!项目地址: https://gitcode.com/gh_mirrors/ca/catppuccinCatppuccin 是一个社区驱动的柔和粉彩pastel主题项目其核心规格文档 docs/specs.md 定义了整个调色板体系的属性与组织结构。本文将基于该规格文档结合仓库中 README.md 的完整色值数据、docs/style-guide.md 的使用规范以及 assets/palette 下的资源系统解析 Catppuccin 的 flavor 体系、双子调色板设计原则与基础设施分层架构帮助你从知道几个颜色进阶到真正理解这套调色板为何这样设计、以及如何正确引用它。一、Palette四大 Flavor 体系根据 docs/specs.md 的 Palette 章节Catppuccin 由四个命名的flavor组成Latte、Frappé、Macchiato和Mocha。每个 flavor 都有各自的使用场景use-cases和存在的理由它们分别覆盖从明亮到深沉的四种环境亮度让同一套设计语言可以在白天、夜间、低光等不同条件下保持一致的观感。规格文档明确指出每个 flavor 都包含若干labels即颜色名这些标签为不同的语法语义syntactic meanings和明暗氛围设计dark bright ambiance designs提供对应的色彩效果。每一个 flavor 的诞生都遵循统一的设计目标——清晰clear、整洁uncluttered、优雅elegant并采用极简与扁平minimal and flat的风格模式。这也是 Catppuccin 区别于高对比度主题与低对比度主题的关键它刻意处于两者之间的中间地带既不过于暗淡也不过于刺眼从而在多种光照条件下都能保证可读性。1.1 四个 flavor 的定位与选择Latte唯一的亮色 flavor适合日光环境、户外使用以及喜欢亮色界面的用户Frappé浅暗色过渡比 Macchiato 更明亮适合对暗色疲劳但又希望保持低亮度的场景Macchiato标准暗色是 Frappé 与 Mocha 之间的平衡点Mocha最深沉的暗色 flavor适合 OLED 屏幕与夜间环境。仓库的 assets/palette 目录中存放了每种 flavor 的色带预览图如 assets/palette/latte.png、assets/palette/macchiato.png以及在 assets/palette/circles 下按flavor_label.png规则命名的 26 色圆形色块可直接作为设计参考素材。1.2 每个 flavor 的完整色值表规格文档定义了每个 flavor 拥有 26 个标签色。以下四张表格完整列出四个 flavor 的全部标签、Hex、RGB 与 HSL 值数据来自 README.md 的 Palette 章节是该规格的权威实证。其中前 14 个标签是彩虹色系Rosewater 至 Lavender后 12 个标签Text 至 Crust是紫灰/淡紫的单色阶。 Latte亮色标签HexRGBHSLRosewater#dc8a78rgb(220, 138, 120)hsl(11, 59%, 67%)Flamingo#dd7878rgb(221, 120, 120)hsl(0, 60%, 67%)Pink#ea76cbrgb(234, 118, 203)hsl(316, 73%, 69%)Mauve#8839efrgb(136, 57, 239)hsl(266, 85%, 58%)Red#d20f39rgb(210, 15, 57)hsl(347, 87%, 44%)Maroon#e64553rgb(230, 69, 83)hsl(355, 76%, 59%)Peach#fe640brgb(254, 100, 11)hsl(22, 99%, 52%)Yellow#df8e1drgb(223, 142, 29)hsl(35, 77%, 49%)Green#40a02brgb(64, 160, 43)hsl(109, 58%, 40%)Teal#179299rgb(23, 146, 153)hsl(183, 74%, 35%)Sky#04a5e5rgb(4, 165, 229)hsl(197, 97%, 46%)Sapphire#209fb5rgb(32, 159, 181)hsl(189, 70%, 42%)Blue#1e66f5rgb(30, 102, 245)hsl(220, 91%, 54%)Lavender#7287fdrgb(114, 135, 253)hsl(231, 97%, 72%)Text#4c4f69rgb(76, 79, 105)hsl(234, 16%, 35%)Subtext1#5c5f77rgb(92, 95, 119)hsl(233, 13%, 41%)Subtext0#6c6f85rgb(108, 111, 133)hsl(233, 10%, 47%)Overlay2#7c7f93rgb(124, 127, 147)hsl(232, 10%, 53%)Overlay1#8c8fa1rgb(140, 143, 161)hsl(231, 10%, 59%)Overlay0#9ca0b0rgb(156, 160, 176)hsl(228, 11%, 65%)Surface2#acb0bergb(172, 176, 190)hsl(227, 12%, 71%)Surface1#bcc0ccrgb(188, 192, 204)hsl(225, 14%, 77%)Surface0#ccd0dargb(204, 208, 218)hsl(223, 16%, 83%)Base#eff1f5rgb(239, 241, 245)hsl(220, 23%, 95%)Mantle#e6e9efrgb(230, 233, 239)hsl(220, 22%, 92%)Crust#dce0e8rgb(220, 224, 232)hsl(220, 21%, 89%) Frappé浅暗色标签HexRGBHSLRosewater#f2d5cfrgb(242, 213, 207)hsl(10, 57%, 88%)Flamingo#eebebergb(238, 190, 190)hsl(0, 59%, 84%)Pink#f4b8e4rgb(244, 184, 228)hsl(316, 73%, 84%)Mauve#ca9ee6rgb(202, 158, 230)hsl(277, 59%, 76%)Red#e78284rgb(231, 130, 132)hsl(359, 68%, 71%)Maroon#ea999crgb(234, 153, 156)hsl(358, 66%, 76%)Peach#ef9f76rgb(239, 159, 118)hsl(20, 79%, 70%)Yellow#e5c890rgb(229, 200, 144)hsl(40, 62%, 73%)Green#a6d189rgb(166, 209, 137)hsl(96, 44%, 68%)Teal#81c8bergb(129, 200, 190)hsl(172, 39%, 65%)Sky#99d1dbrgb(153, 209, 219)hsl(189, 48%, 73%)Sapphire#85c1dcrgb(133, 193, 220)hsl(199, 55%, 69%)Blue#8caaeergb(140, 170, 238)hsl(222, 74%, 74%)Lavender#babbf1rgb(186, 187, 241)hsl(239, 66%, 84%)Text#c6d0f5rgb(198, 208, 245)hsl(227, 70%, 87%)Subtext1#b5bfe2rgb(181, 191, 226)hsl(227, 44%, 80%)Subtext0#a5adcergb(165, 173, 206)hsl(228, 29%, 73%)Overlay2#949cbbrgb(148, 156, 187)hsl(228, 22%, 66%)Overlay1#838ba7rgb(131, 139, 167)hsl(227, 17%, 58%)Overlay0#737994rgb(115, 121, 148)hsl(229, 13%, 52%)Surface2#626880rgb(98, 104, 128)hsl(228, 13%, 44%)Surface1#51576drgb(81, 87, 109)hsl(227, 15%, 37%)Surface0#414559rgb(65, 69, 89)hsl(230, 16%, 30%)Base#303446rgb(48, 52, 70)hsl(229, 19%, 23%)Mantle#292c3crgb(41, 44, 60)hsl(231, 19%, 20%)Crust#232634rgb(35, 38, 52)hsl(229, 20%, 17%) Macchiato暗色标签HexRGBHSLRosewater#f4dbd6rgb(244, 219, 214)hsl(10, 58%, 90%)Flamingo#f0c6c6rgb(240, 198, 198)hsl(0, 58%, 86%)Pink#f5bde6rgb(245, 189, 230)hsl(316, 74%, 85%)Mauve#c6a0f6rgb(198, 160, 246)hsl(267, 83%, 80%)Red#ed8796rgb(237, 135, 150)hsl(351, 74%, 73%)Maroon#ee99a0rgb(238, 153, 160)hsl(355, 71%, 77%)Peach#f5a97frgb(245, 169, 127)hsl(21, 86%, 73%)Yellow#eed49frgb(238, 212, 159)hsl(40, 70%, 78%)Green#a6da95rgb(166, 218, 149)hsl(105, 48%, 72%)Teal#8bd5cargb(139, 213, 202)hsl(171, 47%, 69%)Sky#91d7e3rgb(145, 215, 227)hsl(189, 59%, 73%)Sapphire#7dc4e4rgb(125, 196, 228)hsl(199, 66%, 69%)Blue#8aadf4rgb(138, 173, 244)hsl(220, 83%, 75%)Lavender#b7bdf8rgb(183, 189, 248)hsl(234, 82%, 85%)Text#cad3f5rgb(202, 211, 245)hsl(227, 68%, 88%)Subtext1#b8c0e0rgb(184, 192, 224)hsl(228, 39%, 80%)Subtext0#a5adcbrgb(165, 173, 203)hsl(227, 27%, 72%)Overlay2#939ab7rgb(147, 154, 183)hsl(228, 20%, 65%)Overlay1#8087a2rgb(128, 135, 162)hsl(228, 15%, 57%)Overlay0#6e738drgb(110, 115, 141)hsl(230, 12%, 49%)Surface2#5b6078rgb(91, 96, 120)hsl(230, 14%, 41%)Surface1#494d64rgb(73, 77, 100)hsl(231, 16%, 34%)Surface0#363a4frgb(54, 58, 79)hsl(230, 19%, 26%)Base#24273argb(36, 39, 58)hsl(232, 23%, 18%)Mantle#1e2030rgb(30, 32, 48)hsl(233, 23%, 15%)Crust#181926rgb(24, 25, 38)hsl(236, 23%, 12%) Mocha最深暗色标签HexRGBHSLRosewater#f5e0dcrgb(245, 224, 220)hsl(10, 56%, 91%)Flamingo#f2cdcdrgb(242, 205, 205)hsl(0, 59%, 88%)Pink#f5c2e7rgb(245, 194, 231)hsl(316, 72%, 86%)Mauve#cba6f7rgb(203, 166, 247)hsl(267, 84%, 81%)Red#f38ba8rgb(243, 139, 168)hsl(343, 81%, 75%)Maroon#eba0acrgb(235, 160, 172)hsl(350, 65%, 77%)Peach#fab387rgb(250, 179, 135)hsl(23, 92%, 75%)Yellow#f9e2afrgb(249, 226, 175)hsl(41, 86%, 83%)Green#a6e3a1rgb(166, 227, 161)hsl(115, 54%, 76%)Teal#94e2d5rgb(148, 226, 213)hsl(170, 57%, 73%)Sky#89dcebrgb(137, 220, 235)hsl(189, 71%, 73%)Sapphire#74c7ecrgb(116, 199, 236)hsl(199, 76%, 69%)Blue#89b4fargb(137, 180, 250)hsl(217, 92%, 76%)Lavender#b4befergb(180, 190, 254)hsl(232, 97%, 85%)Text#cdd6f4rgb(205, 214, 244)hsl(226, 64%, 88%)Subtext1#bac2dergb(186, 194, 222)hsl(227, 35%, 80%)Subtext0#a6adc8rgb(166, 173, 200)hsl(228, 24%, 72%)Overlay2#9399b2rgb(147, 153, 178)hsl(228, 17%, 64%)Overlay1#7f849crgb(127, 132, 156)hsl(230, 13%, 55%)Overlay0#6c7086rgb(108, 112, 134)hsl(231, 11%, 47%)Surface2#585b70rgb(88, 91, 112)hsl(233, 12%, 39%)Surface1#45475argb(69, 71, 90)hsl(234, 13%, 31%)Surface0#313244rgb(49, 50, 68)hsl(237, 16%, 23%)Base#1e1e2ergb(30, 30, 46)hsl(240, 21%, 15%)Mantle#181825rgb(24, 24, 37)hsl(240, 21%, 12%)Crust#11111brgb(17, 17, 27)hsl(240, 23%, 9%)从横向对比中可以观察到规格的核心规律四个 flavor 共享同一套 26 个标签名与近似色相hue差异主要落在**明度lightness与饱和度chroma**上。例如 Mocha 的 Bluehsl(217, 92%, 76%)与 Latte 的 Bluehsl(220, 91%, 54%)色相几乎一致但明度与饱和度按明暗环境各自调校从而保证同一标签在不同 flavor 下都能维持稳定的语义色这正是 specs 中labels 提供不同语法含义的底层实现方式。二、Sub-palettes单色系与类似色系的双层结构规格文档的 Sub-palettes 章节指出每个 flavor 都由两个子调色板构成单色系monochromatic与类似色系analogous这是理解 Catppuccin 标签体系的关键框架单色子调色板由一种紫灰色purple-gray和一种非常淡的薰衣草色very pale lavender的不同明度层级组成即上表中的Text、Subtext1、Subtext0、Overlay0/1/2、Surface0/1/2、Base、Mantle、Crust这 12 个标签。它们主要用于UI 组件——背景、面板、表面、覆盖层、正文文字等界面结构元素。类似色子调色板包含彩虹上的所有颜色即Rosewater、Flamingo、Pink、Mauve、Red、Maroon、Peach、Yellow、Green、Teal、Sky、Sapphire、Blue、Lavender这 14 个标签。它们主要用于语法元素syntactic elements——代码高亮、状态标识、链接、强调色等语义表达。这种灰阶承载结构、彩阶承载语义的职责分离使得 UI 层保持极简、整洁而语法/语义层拥有足够丰富的色彩区分度。仓库在 assets/palette/circles/semantic 目录中提供了六种语义混合色blue/green/mauve/red/teal/yellow对应 docs/style-guide.md 中60% Text 与主题色混合的彩虹参数与局部变量配色方案是子调色板理念在编辑器场景下的落地例证。2.1 从规格到使用标签的语义映射规格中labels 提供不同语法含义的抽象描述在 docs/style-guide.md 中被固化为一套可直接照抄的映射表可作为子调色板的实战注解背景体系主背景 Pane 使用Base次级面板使用Crust/Mantle表面元素使用Surface0/1/2浮层使用Overlay0/1/2文字体系正文与主标题使用Text副标题与标签使用Subtext0/1弱化文字使用Overlay1状态与语义链接、URL 与标签Tags/Pills用Blue成功用Green警告用Yellow错误用Red光标用Rosewater选中背景用Overlay2且叠加 20%–30% 不透明度代码语义Language Defaults关键字用Mauve字符串用Green符号/原子用Red正则与转义序列用Pink注释用Overlay2常量与数字用Peach运算符用Sky方法与函数用Blue参数用Maroon内置对象用Red类/接口/注解/枚举/类型用Yellow枚举变体用Teal宏用Rosewater。style-guide 同时强调文字颜色是指导性原则而非铁律例如彩色背景上的text需要偏差处理可读性legibility永远优先这与此前minimal and flat的设计哲学一脉相承。三、Catppuccin Infrastructure基础设施分层规格文档的最后一个章节展示了 Catppuccin 的基础设施结构。仓库中的 assets/palette/infrastructure.png 以同心圆隐喻描述这套调色板的层级关系从内到外依次是Base基底最内层作为整个配色系统的基础背景层Mantle地幔中间过渡层用于次级面板等需要与 Base 区分的结构Crust地壳最外层承载最上层的界面表面元素。这个地壳–地幔–基底的命名与分层对应三个 flavor 色表中 Base、Mantle、Crust 三个标签的逐级明度变化例如 Mocha 的 Crust#11111b→ Mantle#181825→ Base#1e1e2e直观地体现了单色子调色板在 UI 结构中的层级用途。理解这一分层后在为应用编写主题时可以按照背景 Base、次级面板 Mantle/Crust、表面元素 Surface、浮层 Overlay的顺序组织配色快速保证视觉层次的一致性。四、在仓库中实践与验证规格文档所描述的结构在实际仓库中有多处可验证的落地点完整色值权威来源README.md 的 Palette 章节提供了上表全部数据的原始出处且四个 flavor 的色块以flavor_label.png形式存放于 assets/palette/circles含 ANSI 十六色ansi/与语义混合色semantic/两个子目录多语言高亮演示samples 目录提供了 40 余种语言/格式的代码样例如 samples/python.py、samples/typescript.ts、samples/rust.rs可用于对照上文语言默认色映射验证语法高亮效果使用规范docs/style-guide.md 是规格文档的配套指南覆盖通用用法、终端窗口与 ANSI 颜色、代码编辑器语法高亮、Diff/Merge、调试断点等场景的逐项配色生态扩展docs/port-creation.md 说明了如何基于 catppuccin/template 索引中指向的 palette 集成库。五、总结Catppuccin 的规格虽然精炼却勾勒出了一套完整的设计系统四个明度递进的 flavor保证任何光照环境下的适配单色 类似色双子调色板实现结构用灰阶、语义用彩虹的职责分离Base/Mantle/Crust 分层为 UI 组件提供了清晰的层级语法。无论是直接复用 docs/specs.md 与 README.md 中的色值表还是依照 docs/style-guide.md 的映射规范开发自己的主题理解这套规格都能让你在保持 Catppuccin 视觉一致性的前提下自由地将其应用到编辑器、终端、网站与桌面环境中。【免费下载链接】catppuccin Soothing pastel theme for the high-spirited!项目地址: https://gitcode.com/gh_mirrors/ca/catppuccin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考