发现 Catppuccin Palette：4 种口味 × 27 色粉彩色板体系完全指南

发现 Catppuccin Palette4 种口味 × 27 色粉彩色板体系完全指南【免费下载链接】palette Soothing pastel theme to use within your projects!项目地址: https://gitcode.com/gh_mirrors/pal/paletteCatppuccin Palette 是一个为开发者打造的舒缓粉彩配色体系pastel theme palette4 种咖啡口味配色方案 × 每种 27 个精调颜色覆盖网页、终端、设计软件等多种场景让项目配色一步到位。什么是 Catppuccin Palette一套即开即用的粉彩色板简单来说它是 Catppuccin 社区的颜色仓库npm 包catppuccin/paletteTypeScript / JavaScript 项目中直接导入全部颜色数据CSS / Sass 文件前端项目一行引入四种口味️设计软件格式PS、GIMP、Procreate、Apple Color 等格式的开箱即用色板项目当前版本为1.8.0见 deno.json 根目录配置核心颜色数据集中在palette.json单文件中结构清晰、便于二次开发。4 种口味 × 27 色配色体系如何组织Catppuccin 用咖啡命名了 4 种口味flavor每种口味都包含完整的27 个颜色口味定位适用场景 Latte唯一浅色主题日间模式、浅色 UI Frappé低饱和、低对比深色长时间护眼、柔和界面 Macchiato中等饱和、中等对比通用深色主题 Mocha高饱和、高对比深色深色主题、高辨识度界面每种口味的 27 色分为两组14 个强调色accentrosewater、flamingo、pink、mauve、red、maroon、peach、yellow、green、teal、sky、sapphire、blue、lavender—— 用于按钮、链接、标签等视觉重点12 个中性色monochrome从text到crust按明度精细分级覆盖正文、次要文本、覆盖层、卡片背景、页面底色等所有 UI 层次。 提示palette.json中每个颜色都带有accent: true/false标记和order序号程序化遍历颜色顺序时非常省心。Node.js 项目快速接入 Catppuccin 调色板一条命令安装即可在 JS/TS 项目中拿到全部颜色数据npm install catppuccin/palette库导出的核心 API类型定义见 mod.tsflavors包含全部 4 种口味的对象flavorEntries带类型的口味名 → 口味迭代器配合类型推导使用version色板版本号方便在 UI 中展示遍历颜色时每个条目都提供hex、rgb、hsl和oklch四种格式以及终端 ANSI 映射ansiColorEntries区分 normal / bright 两档做终端主题、CLI 高亮都能直接取用。颜色数据速查hex、RGB、HSL、OKLCH 全都有每个颜色都是四格式齐全的完整数据。以 Mocha 的 mauve 为例你能同时拿到hex#ca9ee6风格的字符串rgb/hsl便于计算与插值oklchv1.8.0 新增感知均匀色空间适合做高级颜色渐变另外每种口味还附带ANSI 终端色映射8 组 normal 8 组 bright可以直接用于终端主题。想要修改颜色源数据编辑scripts/gen_palette.ts后运行deno task generate任务配置见 deno.json即可重新生成palette.json。CSS 与 Sass前端项目最快的 Catppuccin 配色方案引入方式前端开发者不需要手写颜色直接引入编译好的样式文件即可CSS详见docs/css.md安装 npm 包后import catppuccin/palette/style然后就能使用类似var(--ctp-mocha-text)、rgba(var(--ctp-macchiato-base-rgb) / 0.9)这样的变量hex / rgb / hsl 三种变量格式都内置好了。Sass详见docs/sass.md支持两种方式——单独引入一种口味use mocha直接用$base、$text等变量引入_catppuccin.scss单文件一次拿到四种口味的完整颜色映射循环生成四类主题。对应的编译源码位于scripts/builders/npm/css.ts、less.ts、scss.tsLess 用户同样可用。设计师友好6 种图形软件格式一键生成不做代码、只想用色板项目内置了scripts/build_palettes.ts构建脚本可为 4 种口味批量生成 6 种格式生成器源码在scripts/builders/palettes/目录格式目录适用软件ase/Adobe 全家桶、Affinity、Sipgimp/GIMP、Inkscape、Krita、Asepriteprocreate/Procreate 平板绘画png/通用色卡图sip/Apple 色彩系统clr/Apple Color List.clr运行deno task build:palettes即可重新产出全部色板文件文件命名统一为Catppuccin 口味名.扩展名方便识别归档。源码结构速览项目是怎么组织颜色的文件 / 目录作用mod.ts库入口类型定义 flavors导出palette.json全部颜色的唯一数据源3600 行含四格式数值scripts/gen_palette.ts颜色源定义 → 重新生成palette.jsonscripts/build_npm.ts构建 npm 包dnt 编译 CSS/Less/Scssscripts/build_palettes.ts批量生成图形软件色板docs/css.md/docs/sass.md前端接入文档总结为什么值得收藏这套粉彩色板✅27 色语义化命名从文本到背景每层都有专属颜色UI 不再临时取色✅4 种口味统一规范浅色 三档深色日夜间主题一次配齐✅多端全覆盖Node.js、CSS、Sass、终端 ANSI、PS/GIMP/Procreate 通用✅数据完备hex / rgb / hsl / oklch 四格式方便任意场景取用无论你想给网站换一套舒服的粉彩配色还是为终端、画板做主题Catppuccin Palette 都能让你开箱即用。【免费下载链接】palette Soothing pastel theme to use within your projects!项目地址: https://gitcode.com/gh_mirrors/pal/palette创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考