小小东整理维护

中国传统配色

742 张高清色卡,按原始色彩清单完整整理。给设计、内容创作、课件、网页主题和传统文化研究一个可以直接取用的中国色素材库

作者:小小东 MIT 开源 742 色完整覆盖 Release ZIP 附件
742
当前色卡
998 MB
图片资产
742
原始清单
项目定位

把传统色从零散灵感整理成可复用的公共资料

每张色卡保留色名、HEX、RGB、CMYK、配色推荐和气质关键词。你可以直接浏览、下载、引用,也可以基于这个仓库继续做色彩工具、教学资料和视觉实验

覆盖情况

清单完整覆盖

色卡文件与原始 742 色清单一一对应,统一使用 NNN-颜色名.png 命名,方便引用、校对和二次开发

742 / 742 已入库

清单、图片、色值已完成对应

每张色卡都按 NNN-颜色名.png 命名,方便检索、引用、复制、下载和后续校对。

色名 742 与完整清单对应
图片 998 MB 保留高清原图
复制 4 HEX / RGB / HSL / CMYK
下载 ZIP 整包直接下载
拿走就能用

少找素材,少试错,少解释色差

742 张中国传统色色卡已经整理成图片、色值、配色建议和下载包。你可以直接选、复制、下载、交付。

这个项目帮你省下

找色、配色、交付素材的来回切换

这里不是配色课,而是一套可以直接进入作品流程的素材库。每张色卡都带原图、常用色值和可复制的搭配建议。

742 张可浏览色卡 4 HEX / RGB / HSL / CMYK ZIP 一次下载原图
浏览色卡 下载 ZIP
01

给页面、PPT、封面先定一个主色

去图库按色相筛选,看到合适的色卡就复制 HEX 或 RGB。适合网页、课件、文章封面和海报起稿。

02

需要一组配色时,直接点开色卡

弹窗里已经按背景、辅助、强调给出搭配色。你可以切换 HEX/RGB/HSL/CMYK,再复制想要的色值。

03

要协作或交付时,带走图片包和清单

下载 ZIP 可以一次拿走全部原图;完整清单适合给同事、开发或印刷方对照,减少来回解释。

10 个实战 Skills

把 742 个传统色变成可执行的设计工作流

不要求你懂配色理论。每个条目都对应一个工作现场:你遇到的问题、该补充的信息、能拿到的产出,以及一条可以直接改写的触发示例。

先判断你卡在哪里 /xxd-*

输入对应命令,再补充项目场景、目标人群、已有色值、截图或生产限制。每个 skill 目录都自带完整 Markdown 清单和配色关系 CSV,推荐色可追溯到当前 742 色库。

01

方向说不清,先把形容词翻译成颜色约束。

02

颜色选好了,再决定它们分别放在哪些界面和版面位置。

03

要交付给团队时,再变成 token、品牌规范、图表色或印刷规则。

01
定方向

xxd-color-brief

把模糊审美词变成可执行约束。

痛点:客户只说感觉 产出:配色简报 亮点:先对齐判断标准

利他价值:先帮团队把“感觉”变成共识,减少凭审美偏好反复改色。

GitHub 目录
利他价值

让客户、设计师和执行者先拥有同一套判断语言,再进入选色。它服务的是协作效率,而不是展示术语。

解决的痛点

需求只有“高级、东方、年轻、克制、不要俗”,每个人理解都不一样,讨论容易停在感觉上。

适合情境

项目刚开始、客户反馈很虚、只有参考图或 moodboard,还不适合直接选具体色板。

输入什么

`/xxd-color-brief` 加上载体、受众、参考图、想避开的气质和必须保留的品牌印象。

得到什么

冷暖、明度、饱和度、对比、风险边界、3 到 5 个起始色,以及下一步该用哪个 skill。

示例触发 /xxd-color-brief 为新中式茶饮品牌做年轻但不俗的配色方向
02
组色板

xxd-palette-builder

从太多选择里筛出能用的色板。

痛点:色板好看但难选 产出:主辅点缀方案 亮点:每个色都有角色

利他价值:把选择困难变成少量可比较方案,让下一步设计不用从零试错。

GitHub 目录
利他价值

帮使用者从 742 色和复杂配色关系里快速收敛到可执行色板,让主色、辅色和点缀色各有责任。

解决的痛点

颜色很多、关系也很多,但最后不知道该选哪一组,选完也不知道谁做主色、辅色和点缀。

适合情境

你已经有锚点色、HEX、情绪词、品牌方向、海报或 UI 场景,需要一组可直接开始设计的色板。

输入什么

`/xxd-palette-builder` 加上锚点色、项目用途、希望稳妥还是更有记忆点。

得到什么

可靠、识别、对比等策略下的主色、辅色、背景色、强调色、使用比例和风险提示。

示例触发 /xxd-palette-builder 以月白为锚点,生成网站首页的主辅点缀色板
03
放版面

xxd-palette-applier

把漂亮色板真正落到版面里。

痛点:不知道放哪里 产出:版面用色地图 亮点:主次和面积更清楚

利他价值:让读者先看到该看的内容,而不是被所有颜色同时争夺注意力。

GitHub 目录
利他价值

它把色彩从“好看”推进到“好用”:服务信息层级、阅读路径和行动重点,帮助最终用户更快理解版面。

解决的痛点

色板单独看很好,一放到页面里就抢主次:标题、按钮、背景、装饰都想出风头。

适合情境

海报、网页、PPT、包装、卡片、封面或 UI 已经有一组颜色,但缺少具体落位规则。

输入什么

`/xxd-palette-applier` 加上色板、载体、主要信息层级和你最想让用户先看到的内容。

得到什么

阅读路径、背景/内容/行动/结构/细节五类角色、面积比例,以及哪些用法会破坏层级。

示例触发 /xxd-palette-applier 把这组传统色用到课程封面和详情页首屏
04
交 token

xxd-ui-token

把传统色变成开发能接的 UI token。

痛点:HEX 难交付 产出:UI token 亮点:浅深色模式可接入

利他价值:让设计、开发和后续维护共享同一套命名规则,少靠猜和硬编码。

GitHub 目录
利他价值

把个人审美选择转成团队可维护资产,让浅色、暗色、状态、组件和代码实现能长期一致。

解决的痛点

只交 HEX 会让开发硬编码,深色模式、按钮状态、边框和焦点样式后面都难维护。

适合情境

网站、App、后台、工具、设计系统、Figma variables 或 Tailwind 主题要接入中国传统色。

输入什么

`/xxd-ui-token` 加上产品类型、浅色/深色要求、输出格式和已有品牌色或色板。

得到什么

primitive、semantic、component、mode 四层 token,默认给 CSS variables,也能改成 Tailwind 或 Figma 结构。

示例触发 /xxd-ui-token 把这组传统色转成官网浅色和暗色模式 CSS variables
05
查可读

xxd-accessible-color

让好看的传统色也能读得清。

痛点:漂亮但不清楚 产出:可读性修复 亮点:给出通过和替代色

利他价值:优先照顾真实阅读者,让传统色的美感不牺牲清晰度和可访问性。

GitHub 目录
利他价值

帮页面对更多人可读、可辨、可操作。它不是削弱审美,而是避免把理解成本转嫁给用户。

解决的痛点

传统色看起来雅致,但做正文、按钮、状态提示或图表时可能读不清,也可能只靠颜色传递信息。

适合情境

正文/背景、按钮文字、焦点环、状态色、图表系列、浅色和深色模式都需要确认可读性。

输入什么

`/xxd-accessible-color` 加上前景色、背景色、用途和是否属于正文、按钮、状态或图表。

得到什么

WCAG contrast ratio、通过/条件可用/失败判断、同库替代色,以及文字、图标、线条或标签等非颜色线索。

示例触发 /xxd-accessible-color 检查这些按钮文字和背景色是否适合正文与 CTA
06
定品牌

xxd-brand-system

把一次配色沉淀成长期品牌规则。

痛点:品牌色会漂移 产出:品牌用色规范 亮点:明确禁用组合

利他价值:给团队长期决策依据,减少每次做物料都重新争论颜色。

GitHub 目录
利他价值

把一次配色变成可传承的品牌资产,让不同设计师、不同渠道和不同周期仍能保持同一种识别感。

解决的痛点

每次活动、海报、PPT 都重新配色,品牌识别会变弱,团队也不知道哪些组合不能用。

适合情境

品牌升级、官网改版、社媒矩阵、包装系列、产品 UI 或长期内容都要共用一套色彩语言。

输入什么

`/xxd-brand-system` 加上行业、价格带、竞品差异、品牌气质和主要使用渠道。

得到什么

品牌锚点色、支撑色、强调色、默认比例、渠道规则、禁用组合和后续交付到 token 的建议。

示例触发 /xxd-brand-system 为文创香氛品牌建立可用于官网、包装和社媒的传统色规范
07
做图表

xxd-data-viz

按数据含义生成传统色图表方案。

痛点:图表颜色难分 产出:图表色数组 亮点:分类顺序发散分开处理

利他价值:让读者先看懂数据含义,再感受到中国传统色气质。

GitHub 目录
利他价值

把色彩服务于数据理解:分类要分得开,顺序要看得出轻重,发散要能识别两端和中点。

解决的痛点

海报配色直接放进图表,经常分类分不清、连续数值没顺序、正负发散没有清晰中点。

适合情境

柱状图、折线图、地图、热力图、仪表盘、数据故事和需要中国传统色气质的数据可视化。

输入什么

`/xxd-data-viz` 加上图表类型、系列数量、背景、数据是分类/顺序/发散/高亮中的哪一种。

得到什么

分类色、顺序色带、发散色带、高亮色或语义状态色,可按需输出 ECharts、D3、Chart.js 数组。

示例触发 /xxd-data-viz 为 7 个分类和一个高亮系列生成 ECharts 中国传统色数组
08
修旧稿

xxd-existing-design-audit

把旧稿和散乱 HEX 修成传统色系统。

痛点:旧稿颜色混乱 产出:保留替换清单 亮点:不盲目推翻旧设计

利他价值:尊重旧项目里已经有效的识别资产,只清理真正造成混乱的颜色。

GitHub 目录
利他价值

帮助团队用更低成本迁移到传统色体系:保留有价值的历史积累,同时给出可执行的替换边界。

解决的痛点

旧稿里有很多相近色、重复色、临时色,没人知道哪些是品牌色、哪些只是历史遗留。

适合情境

已有截图、CSS variables、Figma styles、品牌色、海报或 UI 主题,想迁移到中国传统色体系。

输入什么

`/xxd-existing-design-audit` 加上 HEX 清单、截图描述、当前角色和哪些颜色不能轻易动。

得到什么

颜色盘点、相近传统色映射、根因诊断,以及保留、合并、替换、移除或仅作点缀的建议。

示例触发 /xxd-existing-design-audit 审计这组 CSS 颜色,映射到最接近的中国传统色
09
做系列

xxd-content-series

让系列内容既统一又不疲劳。

痛点:系列不成体系 产出:轮换规则 亮点:固定层和变化层分开

利他价值:帮内容团队长期稳定生产,既保持识别度,也降低每期重新设计的压力。

GitHub 目录
利他价值

把系列内容从“每次灵感发挥”变成可持续系统,让团队成员换人后也能继续产出一致的视觉语言。

解决的痛点

每期都重新配色会失去识别度,完全固定又容易看腻,内容团队很难长期稳定执行。

适合情境

小红书封面、公众号头图、视频封面、课程课件、栏目海报、newsletter 或长期内容矩阵。

输入什么

`/xxd-content-series` 加上平台、栏目数量、更新节奏、模板类型和哪些元素必须长期固定。

得到什么

固定层、变量层、模板层、栏目色、特殊期色和轮换规则,让系列既统一又有变化。

示例触发 /xxd-content-series 为小红书 5 个栏目做统一但不重复的封面色彩系统
10
进生产

xxd-print-packaging

把屏幕色推进到包装和印刷生产。

痛点:屏幕色不等于印刷 产出:打样检查清单 亮点:把材质和工艺纳入判断

利他价值:提前照顾印刷、供应商和最终实物效果,减少交付后才发现色差的成本。

GitHub 目录
利他价值

把屏幕方案提前翻译给真实生产环境,帮助设计师、客户和印刷方在打样前就看见风险。

解决的痛点

屏幕 HEX 不能保证印刷效果,材质、油墨、CMYK、专色、覆膜和光线都会改变颜色感受。

适合情境

茶、香、书籍、礼盒、文创、标签、包装系列、实体材料和需要给印刷方沟通的项目。

输入什么

`/xxd-print-packaging` 加上品类、材质、工艺、价格带、系列数量和使用场景。

得到什么

正背侧面板用色、系列变体规则、小字和条码风险、材质提示,以及交付前的打样检查清单。

示例触发 /xxd-print-packaging 为茶叶礼盒规划传统色、系列变体和印刷打样清单
下载素材

直接下载完整 ZIP

完整图片包已经打包好,推荐从夸克网盘下载。如果网络允许,也欢迎前往原作 GitHub 下载并点个星标

742 张色卡 998 MB 原始图片
夸克网盘下载(国内)
Release 附件不可用时再使用

推荐直接下载已打包好的 zhongguo-traditional-colors-images.zip。备用打包会在本机重新读取全部图片

备用下载: 如果跨网盘不方便,还可以从原作者的 GitHub Release 直接下载或使用下方的“浏览器备用打包”

网络允许的话,推荐前往 作者 GitHub 仓库 给小小东点个星标 ⭐,支持开源项目持续更新。

作者 Maintainer / 2026

小小东

中国传统配色整理维护者

这个项目会长期保持免费开源。希望它能帮你少花一点时间找图、抄色值、整理素材,把更多精力放回设计、教学、写作和创作本身

X
@xiaoxiaodong01
项目
742 色开放资料库
开放资料

让中国色真正被用起来

从找色到交付,把最常用的动作放在同一个工作流里:查、取、带走、引用、校对

实验功能 / 正在打磨

配色应用实验区

这里用来验证“先选一个中国色,再观察不同配色关系如何落到版面”的思路。当前更适合作为灵感草稿和功能预览,不作为最终设计稿交付依据。

当前定位

色值来自当前 742 色库和本地配色关系表;版式模板、用途判断和场景表达还在继续校准。正式取色、下载和协作交付,请优先使用上方色卡弹窗、完整清单和 ZIP 素材。

胶片色卡

HEX
属性
文件
大小
配色建议

这组颜色可以这样用

怎么选出来

只从当前 742 个传统色里挑选;先找对应的配色方向,再按视觉接近度、明暗和饱和度排序。它适合作为起稿参考,不是唯一答案。

换一个搭配目的 想更统一、更突出或更轻一点,就在这里切换。
下载原图
原始清单

742 色预览

按编号、色名或 HEX 检索。点击任意颜色复制单行,或一次复制完整清单。

742 个颜色