🔥 前言：在鸿蒙 HarmonyOS ArkTS 开发中，颜色配置是 UI 开发的核心基础。其实鸿蒙所有颜色相关方法，参数规则完全通用！无论是字体颜色、背景色、边框色，只要是设置颜色的 API，写法完全一致，学会这一篇，所有组件颜色设置全部搞定！

一、核心结论：所有颜色方法通用

鸿蒙中所有接收颜色值的 API，参数类型完全统一，无需单独记忆每个方法的用法！这是鸿蒙 UI 开发的一个核心技巧，能大幅提升开发效率。

1. 通用颜色参数类型

颜色参数: Color | string | number | Resource

2. 全场景通用颜色 API 一览（高频必备）

组件/方法	作用	最简用法示例
.fontColor()	文本字体颜色	Text(‘文字’).fontColor(颜色)
.backgroundColor()	组件背景色	Column().backgroundColor(颜色)
.borderColor()	组件边框色	Button().borderColor(颜色)
.shadowColor()	阴影颜色	Image().shadowColor(颜色)
.strokeColor()	线条/绘制颜色	Shape().strokeColor(颜色)
.fillColor()	图形填充颜色	Circle().fillColor(颜色)
重点：以上所有方法，传入颜色的写法完全通用，没有任何区别！无需单独记忆，掌握一种，全部复用。

二、4种通用颜色参数详解

以下4种参数写法，适用于上述所有颜色 API，复制即可使用，结合示例快速上手。

1. Color 枚举类型

鸿蒙内置的标准颜色枚举，封装了高频使用的颜色，直接调用即可，无需手动写色值，不易出错，适合快速开发。

常用枚举值（高频）

Color.Black（黑色）、Color.White（白色）、Color.Red（红色）、Color.Green（绿色）、Color.Blue（蓝色）、Color.Yellow（黄色）、Color.Transparent（透明）

通用示例

// 1. 字体颜色
Text('示例文本').fontColor(Color.Green)
// 2. 背景颜色
Column().backgroundColor(Color.Blue)
// 3. 边框颜色
Button('按钮').border({width: 3}).borderColor(Color.Red)
// 4. 阴影颜色
Text('阴影示例').shadow({radius: 5}).shadowColor(Color.Gray)

2. string 字符串类型

支持 RGB、RGBA、十六进制 3 种写法，可实现精准色值、透明色配置，是开发中最常用的方式。

三种写法格式

• RGB格式：rgb(0-255, 0-255, 0-255)（无透明度，取值范围0-255）

• RGBA格式：rgba(0-255, 0-255, 0-255, 0-1)（带透明度，0全透，1不透明）

• 十六进制格式：#RRGGBB（无透明度） / #AARRGGBB（AA为透明度）

通用示例

// 字体颜色（十六进制）
.fontColor('#008000')
// 背景颜色（RGB）
.backgroundColor('rgb(0,128,0)')
// 边框颜色（RGBA，半透明）
.borderColor('rgba(0,128,0,0.5)')
// 阴影颜色（带透明度十六进制）
.shadowColor('#80808080')

3. number 数字类型（十六进制数字，适合动态计算）

格式为 0x + 十六进制色值，支持透明度，适合代码中动态计算颜色（如根据条件切换色值）。

格式规则

• 无透明度：0xRRGGBB（对应十六进制字符串 #RRGGBB）

• 带透明度：0xAARRGGBB（AA=透明度，00全透，FF不透明）

通用示例

// 字体颜色（无透明度）
.fontColor(0x008000)
// 背景颜色（带透明度）
.backgroundColor(0xa4008000)
// 边框颜色（红色，不透明）
.borderColor(0xFFFF0000)
// 填充颜色（蓝色，半透明）
.fillColor(0x330000FF)

4. Resource 资源类型（企业级开发规范）

引用 resources/element/color.json 中的颜色资源，适合项目统一配色、多端适配、主题切换，避免重复写色值，便于后期维护。

步骤1：定义颜色资源（color.json）

打开项目 resources/base/element/color.json，添加自定义颜色配置（可根据项目需求扩展）：

{
  "color": [
    {
      "name": "mainGreen", // 资源名称（自定义，建议语义化）
      "value": "#008000"  // 颜色值（支持所有string格式）
    },
    {
      "name": "mainRed",
      "value": "#FF0000"
    },
    {
      "name": "lightBlue",
      "value": "rgba(0,0,255,0.3)"
    }
  ]
}

步骤2：代码中引用资源（通用写法）

使用 $r('app.color.资源名称') 语法引用，注意资源名称与 color.json 中一致，不可拼写错误。

// 字体颜色
.fontColor($r('app.color.mainGreen'))
// 背景颜色
.backgroundColor($r('app.color.lightBlue'))
// 边框颜色
.borderColor($r('app.color.mainRed'))
// 填充颜色
.fillColor($r('app.color.mainGreen'))

三、总结

• ✅ 鸿蒙所有颜色 API 规则完全统一，不用单独记忆 fontColor、backgroundColor 等方法的区别；

• ✅ 4 种参数通用：Color 枚举（快速开发）、string 字符串（灵活自定义）、number 十六进制数字（动态计算）、Resource 资源（统一管理）；

• ✅ 企业开发推荐：优先使用 Resource 资源类型，方便统一配色、主题切换、多端适配，降低维护成本；

• ✅ 避坑提醒：颜色参数格式错误会导致样式不生效，重点核对十六进制、RGBA的写法，资源引用需与 color.json 名称一致。