中国传统色能直接用于 UI 和品牌设计吗
可以，但需要先过三道关：对比度可读性、暗色模式适配、品牌面积纪律。 中国传统色不是只能用于诗词海报的"文化色"，而是一套现成的低饱和色板。本文从这三件最实际的事讲起，并给出六组带明文 HEX 色值、可直接取用的搭配。
为什么传统色在界面上容易"好看但读不清"
界面里最常被低估的是对比度。传统色普遍饱和度低，用在浅色背景上当正文，很容易掉到 WCAG AA 要求的 4.5:1 以下，看起来"高级"却读不清。
一个稳妥的做法：把深而偏冷的传统色留给文字与主操作色。例如骐驎 HEX #12264F，一种带蓝调的深藏青，放在霜地 HEX #C7C6B6 这类暖浅灰底上，对比度轻松超过 4.5:1 的 AA 线，用作正文或主按钮都稳。反过来，缊韨 HEX #984F31 这种赭褐色更适合做强调色，而不是大段文字——它的明度不足以撑起长篇阅读。WCAG 对比度标准可参考 Web Content Accessibility Guidelines (WCAG) 2.1。
经验法则：正文与背景的对比交给"深冷加浅暖"的组合，装饰与点缀才用中等明度的色。
暗色模式下为什么要用带偏色的传统黑
暗色界面最容易犯的错是背景用纯黑 HEX #000000、文字用纯白 HEX #FFFFFF，对比过强、长时间阅读发涩。传统色里没有纯黑，这反而成了优势。
把背景设为青雘 HEX #007175 这类深青会偏"满"，更推荐用接近黑但带灰调的传统色作底，文字则用霜地 HEX #C7C6B6 或缟羽类浅色。这样既保持了暗色模式的省电与沉浸，又避免了纯黑纯白的硬边界。要点：暗色模式不是"把亮色反转"，而是另选一组低饱和的深浅配对。
品牌 VI 中传统色应按什么比例分配
把传统色用进品牌，关键是面积纪律：
- ·主色占 20–25%：选一个能代表气质的色，如青冥 HEX #3271AE（沉静的蓝）或檀色 HEX #B26D5D（温润的木红）。
- ·辅助色占 5–10%：用于次级信息与分割。
- ·点缀色占 3–8%：只给最想被看见的一处，比如按钮 hover、标签。
- ·底色占 65–75%：交给霜地 HEX #C7C6B6 这类低存在感的浅色。
主色一旦定下，就尽量不要在正文里再铺第二个高饱和色，否则品牌会"散"。
六组可直接取用的中国传统色搭配
| 场景 | 底色 | 主色 | 点缀色 |
| 文档类产品 | 霜地 HEX #C7C6B6 | 骐驎 HEX #12264F | 青冥 HEX #3271AE |
| 品牌官网 | 缟羽类浅色 | 檀色 HEX #B26D5D | 缊韨 HEX #984F31 |
| 暗色后台 | 带灰调传统黑 | 青冥 HEX #3271AE | 青雘 HEX #007175 |
| 电商大促 | 霜地 HEX #C7C6B6 | 缊韨 HEX #984F31 | 檀色 HEX #B26D5D |
| 文化栏目 | 缟羽类浅色 | 骐驎 HEX #12264F | 青雘 HEX #007175 |
| 金融稳妥 | 霜地 HEX #C7C6B6 | 青冥 HEX #3271AE | 檀色 HEX #B26D5D |
注：表中"缟羽类浅色"可取霜地 HEX #C7C6B6 的更浅一档；"带灰调传统黑"可取骐驎 HEX #12264F 作底，或直接用其深邻近色。配色比例思路参考了《中国传统色：故宫里的色彩美学》中的传统用色秩序。
用传统色做设计最关键的原则是什么
传统色落到界面与品牌上，靠的不是"多"，而是"准"：用对比度守住可读，用偏色黑稳住暗色模式，用面积纪律收住品牌。上面六组色值的组合可以直接取用，也可以作为你自己的起点去微调。