Color 色彩

rchoui 提供了一套科学、规范的主题色系统，为应用界面提供统一的视觉体验。

简介

RcColors 是 rchoui 组件库的色彩系统模块，预定义了 5 大主题色系（Primary、Success、Error、Warning、Info），每个色系包含标准、Dark、Light、Disabled 四种状态，满足不同场景的设计需求。

注意

使用前请确保已正确安装并引入 rchoui 组件库。

版本要求

HarmonyOS 5	HarmonyOS 6+
√	√

版本说明

该组件仅适用于 HarmonyOS 5、HarmonyOS 6 及以上版本。

使用方式

全量引入

通过 RcColors 对象访问，适合需要动态切换多个颜色的场景。

点击查看代码

typescript

import { RcColors } from "rchoui"

@ComponentV2
export struct ColorsDemo {
  build() {
    Column({ space: 10 }) {
      Text('主题色')
        .fontColor(RcColors.RcPrimary)
      Text('成功提示')
        .fontColor(RcColors.RcSuccess)
      Text('错误提示')
        .fontColor(RcColors.RcError)
    }
    .padding(20)
  }
}

按需引入（推荐）

减少代码体积，提升可读性。

点击查看代码

typescript

import { RcPrimary, RcSuccess, RcError } from "rchoui"

@ComponentV2
export struct ColorsDemo {
  build() {
    Column({ space: 10 }) {
      Text('主题色')
        .fontColor(RcPrimary)
      Text('成功提示')
        .fontColor(RcSuccess)
      Text('错误提示')
        .fontColor(RcError)
    }
    .padding(20)
  }
}

色彩分类

主题色（Primary）

代表品牌主色调，用于主要操作按钮、链接等核心交互元素。

颜色名称	色值	说明
RcPrimary	#3c9cff	标准态
RcPrimaryDark	#398ade	深色态（hover/active）
RcPrimaryDisabled	#9acafc	禁用态
RcPrimaryLight	#ecf5ff	浅色态（背景）

使用示例：

点击查看代码

typescript

import { RcPrimary, RcPrimaryDark, RcPrimaryLight } from "rchoui"

@ComponentV2
export struct PrimaryDemo {
  build() {
    Column({ space: 10 }) {
      Button('主要按钮')
        .backgroundColor(RcPrimary)
        .width(200)
      
      Text('链接文本')
        .fontColor(RcPrimary)
      
      Column()
        .backgroundColor(RcPrimaryLight)
        .width('100%')
        .height(100)
    }
    .padding(20)
  }
}

成功色（Success）

用于表示操作成功、积极状态的反馈信息。

颜色名称	色值	说明
RcSuccess	#5ac725	标准态
RcSuccessDark	#53c21d	深色态
RcSuccessDisabled	#a9e08f	禁用态
RcSuccessLight	#f5fff0	浅色态

使用示例：

点击查看代码

typescript

import { RcSuccess, RcSuccessLight } from "rchoui"

@ComponentV2
export struct SuccessDemo {
  build() {
    Column({ space: 10 }) {
      Text('操作成功！')
        .fontColor(RcSuccess)
        .fontSize(16)
      
      Row() {
        Text('√ 提交成功')
          .fontColor(RcSuccess)
      }
      .backgroundColor(RcSuccessLight)
      .padding(15)
      .borderRadius(8)
    }
    .padding(20)
  }
}

错误色（Error）

用于警示错误、危险操作的提示信息。

颜色名称	色值	说明
RcError	#f56c6c	标准态
RcErrorDark	#e45656	深色态
RcErrorDisabled	#f7b2b2	禁用态
RcErrorLight	#fef0f0	浅色态

使用示例：

点击查看代码

typescript

import { RcError, RcErrorLight } from "rchoui"

@ComponentV2
export struct ErrorDemo {
  build() {
    Column({ space: 10 }) {
      Text('× 操作失败！')
        .fontColor(RcError)
        .fontSize(16)
      
      Button('危险操作')
        .backgroundColor(RcError)
        .width(200)
      
      Row() {
        Text('请检查输入内容')
          .fontColor(RcError)
      }
      .backgroundColor(RcErrorLight)
      .padding(15)
      .borderRadius(8)
    }
    .padding(20)
  }
}

警告色（Warning）

用于需要用户注意但非强制性的警告提示。

颜色名称	色值	说明
RcWarning	#f9ae3d	标准态
RcWarningDark	#f1a532	深色态
RcWarningDisabled	#f9d39b	禁用态
RcWarningLight	#fdf6ec	浅色态

使用示例：

点击查看代码

typescript

import { RcWarning, RcWarningLight } from "rchoui"

@ComponentV2
export struct WarningDemo {
  build() {
    Column({ space: 10 }) {
      Row() {
        Text('⚠ 请注意系统维护通知')
          .fontColor(RcWarning)
      }
      .backgroundColor(RcWarningLight)
      .padding(15)
      .borderRadius(8)
      .width('100%')
    }
    .padding(20)
  }
}

信息色（Info）

用于中性信息展示，如说明文本、辅助提示等。

颜色名称	色值	说明
RcInfo	#909399	标准态
RcInfoDark	#767a82	深色态
RcInfoDisabled	#c4c6c9	禁用态
RcInfoLight	#f4f4f5	浅色态

使用示例：

点击查看代码

typescript

import { RcInfo, RcInfoLight } from "rchoui"

@ComponentV2
export struct InfoDemo {
  build() {
    Column({ space: 10 }) {
      Text('普通信息提示')
        .fontColor(RcInfo)
      
      Row() {
        Text('这是一条中性消息')
          .fontColor(RcInfo)
      }
      .backgroundColor(RcInfoLight)
      .padding(15)
      .borderRadius(8)
    }
    .padding(20)
  }
}

文本色彩

分层级的文本颜色，确保信息层次清晰。

颜色名称	色值	说明
RcMainColor	#303133	主标题、重要文本
RcContentColor	#606266	正文内容
RcTipsColor	#909193	提示文本、次要信息
RcLightColor	#c0c4cc	占位符、禁用文本

使用示例：

点击查看代码

typescript

import { RcMainColor, RcContentColor, RcTipsColor, RcLightColor } from "rchoui"

@ComponentV2
export struct TextColorDemo {
  build() {
    Column({ space: 15 }) {
      Text('主标题文本')
        .fontColor(RcMainColor)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      
      Text('这是正文内容，用于显示主要信息。')
        .fontColor(RcContentColor)
        .fontSize(16)
      
      Text('这是提示文本，用于辅助说明。')
        .fontColor(RcTipsColor)
        .fontSize(14)
      
      Text('这是占位符或禁用文本')
        .fontColor(RcLightColor)
        .fontSize(14)
    }
    .padding(20)
    .alignItems(HorizontalAlign.Start)
  }
}

背景与状态色

用于页面背景和组件状态标识。

颜色名称	色值	说明
RcBgColor	#f3f4f6	页面背景色
RcDisabledColor	#c8c9cc	禁用状态色

使用示例：

点击查看代码

typescript

import { RcBgColor, RcDisabledColor } from "rchoui"

@ComponentV2
export struct BgColorDemo {
  build() {
    Column({ space: 10 }) {
      Column()
        .backgroundColor(RcBgColor)
        .width('100%')
        .height(100)
      
      Button('禁用按钮')
        .backgroundColor(RcDisabledColor)
        .width(200)
        .enabled(false)
    }
    .padding(20)
  }
}

边框色彩

提供四档边框颜色，适应不同视觉强度需求。

颜色名称	色值	说明
RcBorder1Color	#9a9998	强调边框
RcBorder2Color	#b4b3b1	标准边框
RcBorder3Color	#ceccca	次级边框
RcBorder4Color	#e7e6e4	淡化边框

使用示例：

点击查看代码


import { RcBorder1Color, RcBorder2Color, RcBorder3Color, RcBorder4Color } from "rchoui"

@ComponentV2
export struct BorderColorDemo {
    build() {
        Column({ space: 15 }) {
            Column() {
                Text('强调边框')
            }
                .border({ width: 2, color: RcBorder1Color })
                .width('100%')
                .height(60)
                .justifyContent(FlexAlign.Center)


            Column() {
                Text('标准边框')
            }

            .border({ width: 1, color: RcBorder2Color })
                .width('100%')
                .height(60)
                .justifyContent(FlexAlign.Center)

            Column() {
                Text('次级边框')
            }

            .border({ width: 1, color: RcBorder3Color })
                .width('100%')
                .height(60)
                .justifyContent(FlexAlign.Center)

            Column() {
                Text('淡化边框')
            }
                .border({ width: 1, color: RcBorder4Color })
                .width('100%')
                .height(60)
                .justifyContent(FlexAlign.Center)

        }
        .padding(20)
    }
}

色彩状态说明

状态类型	说明	使用场景
标准态（Standard）	组件的默认显示状态	常规展示
深色态（Dark）	颜色加深，增强视觉反馈	hover、active、焦点状态
浅色态（Light）	降低视觉强度	背景填充、次要区域
禁用态（Disabled）	降低饱和度和对比度	不可操作状态

使用建议

语义化使用：根据功能含义选择色系（成功用 Success，错误用 Error，警告用 Warning）
保持一致性：同类操作在不同页面应使用相同的色彩方案
注意对比度：确保文本与背景有足够的对比度，符合 WCAG AA 标准
适度使用：避免在单一界面过度使用高饱和度色彩，保持视觉平衡

API

主题色变量

变量名	类型	色值	说明
RcPrimary	string	#3c9cff	主题色-标准态
RcPrimaryDark	string	#398ade	主题色-深色态
RcPrimaryDisabled	string	#9acafc	主题色-禁用态
RcPrimaryLight	string	#ecf5ff	主题色-浅色态
RcSuccess	string	#5ac725	成功色-标准态
RcSuccessDark	string	#53c21d	成功色-深色态
RcSuccessDisabled	string	#a9e08f	成功色-禁用态
RcSuccessLight	string	#f5fff0	成功色-浅色态
RcError	string	#f56c6c	错误色-标准态
RcErrorDark	string	#e45656	错误色-深色态
RcErrorDisabled	string	#f7b2b2	错误色-禁用态
RcErrorLight	string	#fef0f0	错误色-浅色态
RcWarning	string	#f9ae3d	警告色-标准态
RcWarningDark	string	#f1a532	警告色-深色态
RcWarningDisabled	string	#f9d39b	警告色-禁用态
RcWarningLight	string	#fdf6ec	警告色-浅色态
RcInfo	string	#909399	信息色-标准态
RcInfoDark	string	#767a82	信息色-深色态
RcInfoDisabled	string	#c4c6c9	信息色-禁用态
RcInfoLight	string	#f4f4f5	信息色-浅色态

文本色变量

变量名	类型	色值	说明
RcMainColor	string	#303133	主标题、重要文本
RcContentColor	string	#606266	正文内容
RcTipsColor	string	#909193	提示文本、次要信息
RcLightColor	string	#c0c4cc	占位符、禁用文本

背景与边框变量

变量名	类型	色值	说明
RcBgColor	string	#f3f4f6	页面背景色
RcDisabledColor	string	#c8c9cc	禁用状态色
RcBorder1Color	string	#9a9998	强调边框
RcBorder2Color	string	#b4b3b1	标准边框
RcBorder3Color	string	#ceccca	次级边框
RcBorder4Color	string	#e7e6e4	淡化边框

完整示例

点击查看代码

typescript

import { 
  RcPrimary, RcSuccess, RcError, RcWarning, RcInfo,
  RcMainColor, RcContentColor, RcTipsColor,
  RcBorder2Color
} from "rchoui"

@Entry
@ComponentV2
export struct ColorSystemDemo {
  build() {
    Scroll() {
      Column({ space: 30 }) {
        Text('Color 色彩系统')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .fontColor(RcMainColor)
        
        // 主题色演示
        Column({ space: 15 }) {
          Text('主题色')
            .fontSize(18)
            .fontWeight(FontWeight.Medium)
            .fontColor(RcContentColor)
          
          Row({ space: 10 }) {
            Button('主要').backgroundColor(RcPrimary).width(100)
            Button('成功').backgroundColor(RcSuccess).width(100)
            Button('错误').backgroundColor(RcError).width(100)
            Button('警告').backgroundColor(RcWarning).width(100)
            Button('信息').backgroundColor(RcInfo).width(100)
          }
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
        
        // 文本层级演示
        Column({ space: 15 }) {
          Text('文本层级')
            .fontSize(18)
            .fontWeight(FontWeight.Medium)
            .fontColor(RcContentColor)
          
          Column({ space: 8 }) {
            Text('主标题文本').fontColor(RcMainColor).fontSize(16)
            Text('正文内容文本').fontColor(RcContentColor).fontSize(14)
            Text('提示辅助文本').fontColor(RcTipsColor).fontSize(12)
          }
          .alignItems(HorizontalAlign.Start)
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
        
        // 消息提示演示
        Column({ space: 15 }) {
          Text('消息提示')
            .fontSize(18)
            .fontWeight(FontWeight.Medium)
            .fontColor(RcContentColor)
          
          Column({ space: 10 }) {
            Row() {
              Text('操作成功！').fontColor(RcSuccess)
            }
            .padding(12)
            .width('100%')
            .border({ width: 1, color: RcBorder2Color })
            .borderRadius(8)
            
            Row() {
              Text('请注意相关事项').fontColor(RcWarning)
            }
            .padding(12)
            .width('100%')
            .border({ width: 1, color: RcBorder2Color })
            .borderRadius(8)
            
            Row() {
              Text('操作失败，请重试').fontColor(RcError)
            }
            .padding(12)
            .width('100%')
            .border({ width: 1, color: RcBorder2Color })
            .borderRadius(8)
          }
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
      }
      .width('100%')
      .padding(20)
    }
  }
}

Color 色彩 ​

简介 ​

版本要求 ​

使用方式 ​

全量引入 ​

按需引入（推荐） ​

色彩分类 ​

主题色（Primary） ​

成功色（Success） ​

错误色（Error） ​

警告色（Warning） ​

信息色（Info） ​

文本色彩 ​

背景与状态色 ​

边框色彩 ​

色彩状态说明 ​

使用建议 ​

API ​

主题色变量 ​

文本色变量 ​

背景与边框变量 ​

完整示例 ​

Color 色彩

简介

版本要求

使用方式

全量引入

按需引入（推荐）

色彩分类

主题色（Primary）

成功色（Success）

错误色（Error）

警告色（Warning）

信息色（Info）

文本色彩

背景与状态色

边框色彩

色彩状态说明

使用建议

API

主题色变量

文本色变量

背景与边框变量

完整示例