第3章色彩系统

第三章：色彩系统——主色与强调色、色彩层级与可访问性、深色主题配色策略、Material Color Tool 使用

色彩这东西，说起来玄乎，做起来更玄乎。我刚入行那会儿，觉得配色就是「选个喜欢的颜色」，结果被设计老大怼得体无完肤。后来我才明白，Material Design 的色彩系统不是让你自由发挥的，它是一套有章法的工程体系。

今天咱们就把这套体系拆开揉碎了讲。你想想看，一个 App 里少说几十个页面，颜色要是乱来，用户第一眼就懵了。所以，先搞清楚主色和强调色怎么搭，再弄明白层级怎么控制，最后把深色主题也安排上。嗯，咱们一步步来。

3.1 主色与强调色：一个 App 的「性格」和「脾气」

主色，说白了就是你 App 的「性格」。比如支付宝的蓝色、微信的绿色，用户一看到这个颜色就知道是谁家的。Material Design 建议你选一个主色，再配一个深色变体和一个浅色变体。我个人习惯是直接拿品牌色做主色，省事。

强调色呢？那是 App 的「脾气」。它用来突出关键操作——按钮、链接、选中状态。强调色通常选一个和主色对比强烈的颜色。比如主色是蓝色，强调色用橙色或粉色，效果就很炸。

  核心原则： 主色覆盖 60% 的界面面积，强调色只占 10% 左右。别把强调色当主色用，否则界面会像打翻的调色盘。

我在项目中遇到过一件事：有个同事把强调色用在了所有文字上，结果用户反馈「眼睛快瞎了」。后来我们改成了只有按钮和链接用强调色，其他文字用灰色，问题就解决了。

3.2 色彩层级与可访问性：别让用户「看不清」

色彩层级，就是通过颜色深浅来区分信息的重要程度。Material Design 把颜色分成几个层级：

最高层级： 主色背景 + 白色文字，用于顶部导航栏、底部操作栏
中间层级： 浅色背景 + 深色文字，用于卡片、列表项
最低层级： 白色背景 + 灰色文字，用于页面主体内容

可访问性这块，我踩过坑。曾经有个项目，我用了浅灰色文字配白色背景，自己看着还行，结果色盲用户根本看不清。后来我养成了一个习惯：所有颜色组合必须过 WCAG AA 标准（对比度 ≥ 4.5:1）。

注意： 不要只靠颜色来传达信息。比如错误状态，除了变红，还得加个图标或文字提示。色盲用户有 8% 的男性，你想想看，这可不是小数目。

怎么算对比度？Material Color Tool 里自带检测功能。我一般会先选好主色，然后点「Accessibility」标签，它会自动告诉你哪些组合不合格。嗯，这个工具咱们后面细说。

3.3 深色主题配色策略：不只是「反色」那么简单

深色主题现在几乎是标配了。但很多人以为深色主题就是把白色背景换成黑色，文字反白。错！大错特错！

Material Design 的深色主题，核心是 「降低亮度，保留色相」。什么意思呢？比如你的主色是蓝色 #1976D2，在深色主题里不能直接用白色背景上的蓝色，得调暗一点，比如 #90CAF9。否则在黑色背景上会刺眼。

我建议你遵循这几个原则：

背景： 用深灰色（#121212），别用纯黑（#000000）。纯黑太死板，而且 OLED 屏幕下会有拖影
文字： 白色文字用 87% 透明度，次要文字用 60% 透明度，禁用文字用 38% 透明度
强调色： 保持和浅色主题一样的色相，但降低饱和度

小技巧： 我一般会在深色主题里把强调色的亮度提高 20%。比如浅色主题的强调色是 #FF5722，深色主题里用 #FF8A65。这样在暗背景下依然醒目。

我曾经做过一个阅读类 App，深色主题上线后，用户反馈「眼睛舒服多了」。但有个坑：深色主题下，卡片和背景的对比度不能太大，否则会显得「脏」。我后来把卡片背景设为 #1E1E1E，和主背景 #121212 只差一点点，效果反而更好。

3.4 Material Color Tool 使用：从「瞎选」到「科学配色」

这个工具是 Google 官方出的，地址是 material.io/resources/color。我几乎每个项目都会用它。说白了，它就是帮你把上面那些理论落地的。

怎么用？我一般分三步走：

选主色： 输入你的品牌色，工具会自动生成 500 色值（标准色），以及 50、100、200...900 的色阶
选强调色： 工具会推荐几个互补色。我一般选 A200 或 A400 色阶，太亮或太暗都不好
检查可访问性： 点开「Accessibility」面板，它会列出所有颜色组合的对比度。不合格的会标红

  重点： 工具生成的色阶可以直接复制到代码里。比如主色 500 用于顶部栏，700 用于按压状态，200 用于背景。省去了手动调色的麻烦。

举个例子，假设你的主色是 #2196F3（Material Blue）：

// 浅色主题
--md-sys-color-primary: #1976D2;       // 主色 700
--md-sys-color-on-primary: #FFFFFF;     // 主色上的文字
--md-sys-color-secondary: #FF5722;      // 强调色
--md-sys-color-surface: #FFFFFF;        // 背景
--md-sys-color-on-surface: #1C1B1F;     // 背景上的文字

// 深色主题
--md-sys-color-primary: #90CAF9;        // 主色 200（调亮）
--md-sys-color-on-primary: #1C1B1F;     // 深色文字
--md-sys-color-secondary: #FF8A65;      // 强调色（调亮）
--md-sys-color-surface: #121212;        // 深色背景
--md-sys-color-on-surface: #E6E1E5;     // 浅色文字

你看，代码里直接用了色阶值，不用自己算。这就是工具的价值。

最后，我画了一张图，帮你把整个色彩系统的逻辑串起来：

这张图把主色、强调色、可访问性、深色主题和工具串在了一起。你照着这个结构去搭色彩系统，基本不会出大问题。

我的习惯： 每次新项目开始，我会先用 Material Color Tool 生成一套色板，然后导出 CSS 变量。这样团队里所有人都用同一套颜色，不会出现「你用的蓝和我用的蓝不一样」的尴尬。

好了，色彩系统这块就聊到这儿。记住：配色不是艺术，是工程。用工具、守规范、测对比度，这三件事做好了，你的 App 色彩就不会翻车。

📚 课程目录

第三章：色彩系统——主色与强调色、色彩层级与可访问性、深色主题配色策略、Material Color Tool 使用

3.1 主色与强调色：一个 App 的「性格」和「脾气」

3.2 色彩层级与可访问性：别让用户「看不清」

3.3 深色主题配色策略：不只是「反色」那么简单

3.4 Material Color Tool 使用：从「瞎选」到「科学配色」