小小东整理维护
中国传统配色
742 张高清色卡,按原始色彩清单完整整理。给设计、内容创作、课件、网页主题和传统文化研究一个可以直接取用的中国色素材库
- 742
- 当前色卡
- 998 MB
- 图片资产
- 742
- 原始清单
把传统色从零散灵感整理成可复用的公共资料
每张色卡保留色名、HEX、RGB、CMYK、配色推荐和气质关键词。你可以直接浏览、下载、引用,也可以基于这个仓库继续做色彩工具、教学资料和视觉实验
色卡资料库
全部使用真实高清 PNG。可以按编号、色名、色值或色相筛选,单张预览、单张下载,也可以直接下载已经打包好的完整 ZIP
清单完整覆盖
色卡文件与原始 742 色清单一一对应,统一使用 NNN-颜色名.png 命名,方便引用、校对和二次开发
清单、图片、色值已完成对应
每张色卡都按 NNN-颜色名.png 命名,方便检索、引用、复制、下载和后续校对。
少找素材,少试错,少解释色差
742 张中国传统色色卡已经整理成图片、色值、配色建议和下载包。你可以直接选、复制、下载、交付。
找色、配色、交付素材的来回切换
这里不是配色课,而是一套可以直接进入作品流程的素材库。每张色卡都带原图、常用色值和可复制的搭配建议。
给页面、PPT、封面先定一个主色
去图库按色相筛选,看到合适的色卡就复制 HEX 或 RGB。适合网页、课件、文章封面和海报起稿。
需要一组配色时,直接点开色卡
弹窗里已经按背景、辅助、强调给出搭配色。你可以切换 HEX/RGB/HSL/CMYK,再复制想要的色值。
要协作或交付时,带走图片包和清单
下载 ZIP 可以一次拿走全部原图;完整清单适合给同事、开发或印刷方对照,减少来回解释。
把 742 个传统色变成可执行的设计工作流
不要求你懂配色理论。每个条目都对应一个工作现场:你遇到的问题、该补充的信息、能拿到的产出,以及一条可以直接改写的触发示例。
输入对应命令,再补充项目场景、目标人群、已有色值、截图或生产限制。每个 skill 目录都自带完整 Markdown 清单和配色关系 CSV,推荐色可追溯到当前 742 色库。
方向说不清,先把形容词翻译成颜色约束。
颜色选好了,再决定它们分别放在哪些界面和版面位置。
要交付给团队时,再变成 token、品牌规范、图表色或印刷规则。
xxd-color-brief
把模糊审美词变成可执行约束。
利他价值:先帮团队把“感觉”变成共识,减少凭审美偏好反复改色。
让客户、设计师和执行者先拥有同一套判断语言,再进入选色。它服务的是协作效率,而不是展示术语。
需求只有“高级、东方、年轻、克制、不要俗”,每个人理解都不一样,讨论容易停在感觉上。
项目刚开始、客户反馈很虚、只有参考图或 moodboard,还不适合直接选具体色板。
`/xxd-color-brief` 加上载体、受众、参考图、想避开的气质和必须保留的品牌印象。
冷暖、明度、饱和度、对比、风险边界、3 到 5 个起始色,以及下一步该用哪个 skill。
/xxd-color-brief 为新中式茶饮品牌做年轻但不俗的配色方向
xxd-palette-builder
从太多选择里筛出能用的色板。
利他价值:把选择困难变成少量可比较方案,让下一步设计不用从零试错。
帮使用者从 742 色和复杂配色关系里快速收敛到可执行色板,让主色、辅色和点缀色各有责任。
颜色很多、关系也很多,但最后不知道该选哪一组,选完也不知道谁做主色、辅色和点缀。
你已经有锚点色、HEX、情绪词、品牌方向、海报或 UI 场景,需要一组可直接开始设计的色板。
`/xxd-palette-builder` 加上锚点色、项目用途、希望稳妥还是更有记忆点。
可靠、识别、对比等策略下的主色、辅色、背景色、强调色、使用比例和风险提示。
/xxd-palette-builder 以月白为锚点,生成网站首页的主辅点缀色板
xxd-palette-applier
把漂亮色板真正落到版面里。
利他价值:让读者先看到该看的内容,而不是被所有颜色同时争夺注意力。
它把色彩从“好看”推进到“好用”:服务信息层级、阅读路径和行动重点,帮助最终用户更快理解版面。
色板单独看很好,一放到页面里就抢主次:标题、按钮、背景、装饰都想出风头。
海报、网页、PPT、包装、卡片、封面或 UI 已经有一组颜色,但缺少具体落位规则。
`/xxd-palette-applier` 加上色板、载体、主要信息层级和你最想让用户先看到的内容。
阅读路径、背景/内容/行动/结构/细节五类角色、面积比例,以及哪些用法会破坏层级。
/xxd-palette-applier 把这组传统色用到课程封面和详情页首屏
xxd-ui-token
把传统色变成开发能接的 UI token。
利他价值:让设计、开发和后续维护共享同一套命名规则,少靠猜和硬编码。
把个人审美选择转成团队可维护资产,让浅色、暗色、状态、组件和代码实现能长期一致。
只交 HEX 会让开发硬编码,深色模式、按钮状态、边框和焦点样式后面都难维护。
网站、App、后台、工具、设计系统、Figma variables 或 Tailwind 主题要接入中国传统色。
`/xxd-ui-token` 加上产品类型、浅色/深色要求、输出格式和已有品牌色或色板。
primitive、semantic、component、mode 四层 token,默认给 CSS variables,也能改成 Tailwind 或 Figma 结构。
/xxd-ui-token 把这组传统色转成官网浅色和暗色模式 CSS variables
xxd-accessible-color
让好看的传统色也能读得清。
利他价值:优先照顾真实阅读者,让传统色的美感不牺牲清晰度和可访问性。
帮页面对更多人可读、可辨、可操作。它不是削弱审美,而是避免把理解成本转嫁给用户。
传统色看起来雅致,但做正文、按钮、状态提示或图表时可能读不清,也可能只靠颜色传递信息。
正文/背景、按钮文字、焦点环、状态色、图表系列、浅色和深色模式都需要确认可读性。
`/xxd-accessible-color` 加上前景色、背景色、用途和是否属于正文、按钮、状态或图表。
WCAG contrast ratio、通过/条件可用/失败判断、同库替代色,以及文字、图标、线条或标签等非颜色线索。
/xxd-accessible-color 检查这些按钮文字和背景色是否适合正文与 CTA
xxd-brand-system
把一次配色沉淀成长期品牌规则。
利他价值:给团队长期决策依据,减少每次做物料都重新争论颜色。
把一次配色变成可传承的品牌资产,让不同设计师、不同渠道和不同周期仍能保持同一种识别感。
每次活动、海报、PPT 都重新配色,品牌识别会变弱,团队也不知道哪些组合不能用。
品牌升级、官网改版、社媒矩阵、包装系列、产品 UI 或长期内容都要共用一套色彩语言。
`/xxd-brand-system` 加上行业、价格带、竞品差异、品牌气质和主要使用渠道。
品牌锚点色、支撑色、强调色、默认比例、渠道规则、禁用组合和后续交付到 token 的建议。
/xxd-brand-system 为文创香氛品牌建立可用于官网、包装和社媒的传统色规范
xxd-data-viz
按数据含义生成传统色图表方案。
利他价值:让读者先看懂数据含义,再感受到中国传统色气质。
把色彩服务于数据理解:分类要分得开,顺序要看得出轻重,发散要能识别两端和中点。
海报配色直接放进图表,经常分类分不清、连续数值没顺序、正负发散没有清晰中点。
柱状图、折线图、地图、热力图、仪表盘、数据故事和需要中国传统色气质的数据可视化。
`/xxd-data-viz` 加上图表类型、系列数量、背景、数据是分类/顺序/发散/高亮中的哪一种。
分类色、顺序色带、发散色带、高亮色或语义状态色,可按需输出 ECharts、D3、Chart.js 数组。
/xxd-data-viz 为 7 个分类和一个高亮系列生成 ECharts 中国传统色数组
xxd-existing-design-audit
把旧稿和散乱 HEX 修成传统色系统。
利他价值:尊重旧项目里已经有效的识别资产,只清理真正造成混乱的颜色。
帮助团队用更低成本迁移到传统色体系:保留有价值的历史积累,同时给出可执行的替换边界。
旧稿里有很多相近色、重复色、临时色,没人知道哪些是品牌色、哪些只是历史遗留。
已有截图、CSS variables、Figma styles、品牌色、海报或 UI 主题,想迁移到中国传统色体系。
`/xxd-existing-design-audit` 加上 HEX 清单、截图描述、当前角色和哪些颜色不能轻易动。
颜色盘点、相近传统色映射、根因诊断,以及保留、合并、替换、移除或仅作点缀的建议。
/xxd-existing-design-audit 审计这组 CSS 颜色,映射到最接近的中国传统色
xxd-content-series
让系列内容既统一又不疲劳。
利他价值:帮内容团队长期稳定生产,既保持识别度,也降低每期重新设计的压力。
把系列内容从“每次灵感发挥”变成可持续系统,让团队成员换人后也能继续产出一致的视觉语言。
每期都重新配色会失去识别度,完全固定又容易看腻,内容团队很难长期稳定执行。
小红书封面、公众号头图、视频封面、课程课件、栏目海报、newsletter 或长期内容矩阵。
`/xxd-content-series` 加上平台、栏目数量、更新节奏、模板类型和哪些元素必须长期固定。
固定层、变量层、模板层、栏目色、特殊期色和轮换规则,让系列既统一又有变化。
/xxd-content-series 为小红书 5 个栏目做统一但不重复的封面色彩系统
xxd-print-packaging
把屏幕色推进到包装和印刷生产。
利他价值:提前照顾印刷、供应商和最终实物效果,减少交付后才发现色差的成本。
把屏幕方案提前翻译给真实生产环境,帮助设计师、客户和印刷方在打样前就看见风险。
屏幕 HEX 不能保证印刷效果,材质、油墨、CMYK、专色、覆膜和光线都会改变颜色感受。
茶、香、书籍、礼盒、文创、标签、包装系列、实体材料和需要给印刷方沟通的项目。
`/xxd-print-packaging` 加上品类、材质、工艺、价格带、系列数量和使用场景。
正背侧面板用色、系列变体规则、小字和条码风险、材质提示,以及交付前的打样检查清单。
/xxd-print-packaging 为茶叶礼盒规划传统色、系列变体和印刷打样清单
直接下载完整 ZIP
完整图片包已经打包好,推荐从夸克网盘下载。如果网络允许,也欢迎前往原作 GitHub 下载并点个星标
让中国色真正被用起来
从找色到交付,把最常用的动作放在同一个工作流里:查、取、带走、引用、校对
配色应用实验区
这里用来验证“先选一个中国色,再观察不同配色关系如何落到版面”的思路。当前更适合作为灵感草稿和功能预览,不作为最终设计稿交付依据。
色值来自当前 742 色库和本地配色关系表;版式模板、用途判断和场景表达还在继续校准。正式取色、下载和协作交付,请优先使用上方色卡弹窗、完整清单和 ZIP 素材。