鸿蒙实战：设计令牌系统——AppColors 颜色体系

前言（必读）

在这里插入图片描述

图：鸿蒙实战：设计令牌系统——AppColors 颜色体系（第 67 篇） 运行效果截图（HarmonyOS NEXT）

颜色是应用的视觉灵魂。面对一个数十页面、上百组件的鸿蒙项目，如果没有统一颜色管理，就会出现「差不多的灰用了三个不同的色值」的混乱局面。本文详细讲解本项目的颜色设计令牌系统——基于「米色 + 莫兰迪低饱和色板」的 AppColors 颜色体系。

AppColors颜色体系设计令牌示意图

图：AppColors 颜色设计令牌体系——米色底色 + 莫兰迪低饱和色板的分层管理

AppColors 颜色体系

背景色系

文字色系

强调色系

状态色系

primary: #FAF8F4 米色

card: #FFFFFF 纯白

secondary: #F5F2EC 浅米

primary: #2C2C2C 深灰

secondary: #8A8580 中灰

hint: #B5B0A8 浅灰

main: #C4956A 莫兰迪棕

light: #D4AB84 浅棕

success: #7BAE7F 绿

warning: #E8C068 黄

error: #D17B7B 红

一、什么是设计令牌（Design Tokens）

设计令牌是设计系统中最小的不可分割的视觉原子——颜色、字号、间距、阴影等。统一管理方式：

❌ 混乱方式：每个页面写自己的色值
  .backgroundColor('#E9E2D4')
  .fontColor('#8A745F')
  ... // 换主题时无处不改

✅ 令牌方式：所有页面引用 AppColors 常量
  .backgroundColor(AppColors.BG_DEEP)
  .fontColor(AppColors.PRIMARY_DEEP)
  ... // 换主题时只改 AppColors.ets

二、AppColors 完整源码

// 文件：common/theme/AppColors.ets

/**
 * 鹿鹿·笔迹心理分析 — 设计令牌（颜色）
 * 米色 + 莫兰迪低饱和色板 · 治愈温柔风
 */
export class AppColors {
  // ============ 基础底色 ============
  static readonly BG: string = '#F1ECE2';         // 主背景 · 米色
  static readonly BG_DEEP: string = '#E9E2D4';    // 深米色 · 列表分隔背景
  static readonly PAPER: string = '#F7F3EC';      // 纸感卡片背景
  static readonly CARD: string = '#FFFCF7';       // 浮起卡片白
  static readonly LINE: string = '#EAE3D7';       // 描边色

  // ============ 主品牌色 · 莫兰迪驼 ============
  static readonly PRIMARY: string = '#A8907A';
  static readonly PRIMARY_DEEP: string = '#8A745F';
  static readonly PRIMARY_LIGHT: string = '#C9B89A';

  // ============ 情绪辅助色 · 五情绪 ============
  static readonly WARM: string = '#D9A689';   // 雾橘 · 热情/活力
  static readonly QUIET: string = '#9BAEA8';  // 雾松 · 平静/治愈
  static readonly DEEP: string = '#8A93A6';   // 雾蓝 · 深沉/思考
  static readonly ROSE: string = '#C9A0A0';   // 雾玫 · 温柔/柔软
  static readonly SUN: string = '#E8C880';    // 雾黄 · 喜悦

  // ============ HarmonyOS 蓝调辅助 ============
  static readonly HM_BLUE: string = '#5B7FB6';
  static readonly HM_BLUE_SOFT: string = '#DDE5F0';

  // ============ 文字色阶 ============
  static readonly TEXT: string = '#3D352E';
  static readonly TEXT_2: string = '#8C8278';
  static readonly TEXT_3: string = '#B8AFA3';

  // ============ 状态色 ============
  static readonly SUCCESS: string = '#9BAEA8';
  static readonly WARNING: string = '#D9A689';
  static readonly ERROR: string = '#C9A0A0';
}

只有 40 行——管理了全应用 20+ 颜色，0 行硬编码色值。

三、色板结构剖析

3.1 五层颜色系统

层级 1：基础底色（5 色）     → 页面/卡片/描边背景
层级 2：主品牌色（3 色）     → 核心 CP/CTA 按钮
层级 3：情绪辅助色（5 色）   → 笔迹分析结果展示
层级 4：文字色阶（3 色）     → 主/次/辅 文字
层级 5：状态色（3 色）       → 成功/警告/错误

3.2 配色哲学：米色 + 莫兰迪

「鹿鹿」app 的定位是治愈、温柔、手写风，因此色板选择了低饱和度的米色系 + 莫兰迪色系：

颜色来源 特征 代表色 应用
米色系 暖白、自然 #F1ECE2 BG / #FFFCF7 CARD 页面背景、卡片
莫兰迪驼 低饱和棕 #A8907A PRIMARY 品牌色、按钮
莫兰迪雾 灰调 + 彩色 #D9A689 / #9BAEA8 情绪标签

莫兰迪色的核心秘方是每个颜色都带一定比例的灰色。例如 WARM 虽然是橘色系（#D9），但加入了 A6 的灰色分量，看起来柔和不刺眼。

3.3 色值分析

传统高饱和暖橘：  #FF6B35   (RGB: 255, 107, 53)
莫兰迪雾橘 WARM: #D9A689   (RGB: 217, 166, 137)
                   ↓ 降低饱和度（增加 G/B 通道）
                   ↓ 整体亮度拉低

传统大红：        #E74C3C   (RGB: 231, 76, 60)
莫兰迪雾玫 ROSE:  #C9A0A0   (RGB: 201, 160, 160)
                   ↓ 从红到粉棕
                   ↓ 饱和度从 80% → 25%

四、颜色系统的设计原则

原则 1：语义命名

// ❌ 不要按位置命名
static readonly BG_TOP: string = '#F1ECE2'
static readonly BG_BOTTOM: string = '#E9E2D4'

// ✅ 要按语义命名
static readonly BG: string = '#F1ECE2'       // 主背景
static readonly BG_DEEP: string = '#E9E2D4'  // 更深层次背景

原则 2：色阶命名（深浅扩展）

主品牌色具备 3 级色阶：

static readonly PRIMARY_LIGHT: string = '#C9B89A'  // 浅（hover/disabled）
static readonly PRIMARY: string = '#A8907A'         // 中（常规）
static readonly PRIMARY_DEEP: string = '#8A745F'    // 深（按下/强调）

原则 3：单一数据源

所有颜色定义集中在这一个文件。其他组件的使用示例：

// HomePage.ets
Column()
  .backgroundColor(AppColors.BG)       // 页面背景
  .fontColor(AppColors.TEXT)           // 主文字

// CapturePage.ets
Button()
  .backgroundColor(AppColors.PRIMARY)  // 拍照按钮
  .fontColor(Color.White)

// ReportDetailPage.ets
Text()
  .fontColor(AppColors.WARM)           // 情绪标签色

// MetaServiceCard.ets
Column()
  .backgroundColor(AppColors.CARD)      // 卡片背景

五、与 HarmonyOS Design 的关系

HarmonyOS Design 推荐：
  "大胆柔和"（Bold & Soft）—— 大胆的颜色搭配柔和的过渡

本项目的适配策略：
  ✅ 大胆：品牌色 A8907A 作为 CTA 按钮主色
  ✅ 柔和：所有颜色饱和度 ≤ 40%
  ✅ HarmonyOS 蓝调辅助：HM_BLUE / HM_BLUE_SOFT
  ✅ 符合 Design 的色阶系统（light / regular / deep）

HarmonyOS Design 颜色令牌规范对比

HarmonyOS 规范色阶 本项目实现
PrimaryDark PRIMARY_DEEP #8A745F
Primary PRIMARY #A8907A
PrimaryLight PRIMARY_LIGHT #C9B89A
Background BG #F1ECE2
SurfaceBg CARD #FFFCF7
TextPrimary TEXT #3D352E
TextSecondary TEXT_2 #8C8278
TextTertiary TEXT_3 #B8AFA3

六、扩展：如何快速建立自己的色板

6.1 四步法

Step 1：定基色 → 选择 1 个品牌色作为起点
          #A8907A（莫兰迪驼）

Step 2：建色阶 → 品牌色派生 3 级
          light = brand + 白色混合
          deep  = brand + 黑色混合

Step 3：配辅助 → 5 种情绪各配 1 色
          暖/冷/深沉/温柔/喜悦

Step 4：定灰度 → 文字 3 阶 + 背景 4 阶
          文字：黑→灰→浅灰
          背景：米白→米→深米→描边

6.2 常用配色工具

工具 用途 链接
Material Design Color Tool 色阶生成 material.io/design/color
Coolors 色板搭配 coolors.co
Colormind AI 色板生成 colormind.io

七、颜色系统的工程管理

规格表

属性 值
颜色总数 20
色阶层级 3（light / regular / deep）
文件大小 40 行
引用方式 AppColors.XXX 静态常量
主题切换 未来可扩展为 @State theme: ThemeColors

未来扩展方向

// 暗黑模式支持
class AppColors {
  static readonly MODE: 'light' | 'dark' = 'light'

  static get BG(): string {
    return this.MODE === 'dark' ? '#2D2A26' : '#F1ECE2'
  }
}

但本项目的定位是「治愈手写风」，后续无暗黑模式计划。

总结

  • ✅ 设计令牌概念：颜色作为最小视觉原子统一管理
  • ✅ AppColors 完整源码：40 行管理 20+ 颜色
  • ✅ 米色 + 莫兰迪色板：低饱和、治愈、温柔的配色哲学
  • ✅ 五层颜色系统：底色 / 品牌 / 情绪 / 文字 / 状态
  • ✅ 语义命名原则：按功能命名而非按位置命名
  • ✅ 单一数据源：所有组件引用 AppColors，无硬编码
  • ✅ HarmonyOS Design 适配：色阶映射到规范标准

下一篇将讲解 AppFonts 字体令牌与排版规范。

📌 收藏提示：建立颜色设计令牌是工程化的重要一步，值得在项目初期就规范化。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

七、颜色体系扩展实践

7.1 深色模式适配

在 AppColors 基础上新增深色模式令牌，无需修改业务代码：

// 深色模式颜色扩展
class AppColorsDark {
  // 背景色系（深色）
  static readonly bgPrimary: string = '#1A1815';       // 深棕黑
  static readonly bgCard: string = '#242018';          // 深棕
  static readonly bgSecondary: string = '#2A2520';     // 暗米色

  // 文字色系（深色模式下反转）
  static readonly textPrimary: string = '#E8E3DC';     // 浅米白
  static readonly textSecondary: string = '#A89E94';   // 中灰
}

7.2 颜色语义化命名原则

颜色令牌命名应遵循用途而非外观：

反例（不推荐） 正例（推荐） 理由
beige bgPrimary 可独立调色，不受名字约束
dark_gray textSecondary 换主题时无需修改用途理解
orange accentMain 强调色换色不影响语义
light_beige bgSecondary 层级关系清晰

7.3 颜色令牌在组件中的应用

// ✅ 正确：使用语义化令牌
Text('标题').fontColor(AppColors.textPrimary)
Column().backgroundColor(AppColors.bgCard)

// ❌ 错误：硬编码颜色值
Text('标题').fontColor('#2C2C2C')
Column().backgroundColor('#FFFFFF')

7.4 与设计工具的同步

Figma 中的颜色变量（Variables）可以与 ArkTS 令牌保持一一对应：

  • Figma Variables → bg/primary 对应 AppColors.bgPrimary
  • 设计师修改 Figma 变量值 → 工程师同步修改对应令牌值
  • 保证设计稿与实现代码的颜色系统同步一致

7.5 颜色对比度与可访问性

设计令牌还需满足 WCAG 2.1 AA 对比度标准（最低 4.5:1）：

组合 颜色 对比度 是否合规
主文字 / 主背景 #2C2C2C / #FAF8F4 13.2:1 ✅ AAA
次要文字 / 主背景 #8A8580 / #FAF8F4 4.6:1 ✅ AA
强调色 / 主背景 #C4956A / #FAF8F4 3.8:1 ⚠️ AA Large
白文字 / 强调色 #FFFFFF / #C4956A 2.9:1 ❌ 需调整

实践建议：在强调色按钮上使用深色文字（textPrimary）而非白色，以满足对比度要求。

7.6 颜色令牌的版本管理

在项目迭代中颜色可能调整，建议在代码注释中记录颜色的变更历史：

class AppColors {
  // v1.0: #C4956A（原始莫兰迪棕）
  // v1.2: #C89B72（微调亮度提升识别度）
  // v2.0: #BF8E63（降低饱和度配合深色模式）
  static readonly accentMain: string = '#BF8E63';
}

7.7 总结：颜色令牌的三大价值

  1. 一致性：全应用颜色来自同一个常量源，不会出现「差不多的颜色用了三个值」
  2. 可维护性：改颜色只需改一个地方，自动影响所有引用该令牌的组件
  3. 可读性：AppColors.accentMain 比 #C4956A 更能传达设计意图

颜色令牌与字体令牌、间距令牌共同构成了本项目的完整设计系统基础设施，是工程化 UI 开发的基石。

7.8 互动练习

思考题：

  1. 如果设计师要求将应用主色调从「米色系」改为「蓝灰系」，你需要修改多少个文件？用了设计令牌和没用各有什么差异？

  2. 在现有 AppColors 中添加一组「渐变色令牌」（gradientStart / gradientEnd），应该放在哪个分类下，命名遵循什么规则？

参考答案：有令牌只需改 1 个文件（AppColors.ets），无令牌需改数十个散落的样式。渐变色属于「强调色系」扩展，命名建议 gradientWarm / gradientCool 按用途命名。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

# harmonyos # ubuntu # 华为 # 鸿蒙系统
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

Counterpoint发布Q1全球蜂窝物联网模组市场报告：利尔达同比增长17%，增速表现亮眼

avatar 人工智能6S服务平台
cover

HarmonyOS购物商城——首页交互优化与细节打磨

avatar 人工智能6S服务平台
cover

企业为什么要区分AI Agent和Agentic AI？不同业务场景对应不同智能体路线

avatar 人工智能6S服务平台