HarmonyOS5 便捷生活类——ArkUI支持几位HEX颜色格式-优快云博客

加入下方官方优快云班级，得鸿蒙礼盒

本期活动时间：2025年8月1日-12月31日

如有问题欢迎私聊我呀！

问题现象

ArkUI开发过程中，经常会使用某个颜色的HEX格式字符串来设置组件颜色。HarmonyOS支持哪几位HEX格式字符串？

效果预览

背景知识

HEX颜色格式是一种在网页设计和图形设计中常用的颜色表示方法。最常见的是六位数格式，它使用一个以#开头的六位十六进制数来表示颜色，每两位分别代表红色（Red）、绿色（Green）和蓝色（Blue）三个颜色通道的强度。六位格式不支持设置透明度，对于需要设置透明度的场景，可使用八位数格式，#号后两位表示透明度，最后六位含义同六位数格式。如：

#FF0000FF表示完全不透明的蓝色。
#800000FF表示半透明的蓝色。

解决方案

HarmonyOS在开发设置组件颜色时，既支持六位和八位的标准HEX格式，也支持三位和四位的缩写格式。如下所示：

六位标准格式：#FF0000表示红色；#00FF00表示绿色。
八位带透明度格式：#80FF0000表示半透明红色；FF00FF00表示不透明绿色。
三位缩写格式：#F00表示红色（#FF0000）；#0F0表示绿色（#00FF00）。
四位缩写格式：#F00F表示不透明红色（#FF0000FF）；#80FF表示半透明浅蓝色（#8800FFFF）。

@Entry
@Component
struct Index {
build() {
Column({ space: 10 }) {
Text('六位红色')
.fontSize(20)
.backgroundColor('#FF0000')
.width('80%')
.height('5%')
.textAlign(TextAlign.Center)
.alignSelf(ItemAlign.Center)

Text('八位半透明红色')
.fontSize(20)
.backgroundColor('#80FF0000')
.width('80%')
.height('5%')
.textAlign(TextAlign.Center)
.alignSelf(ItemAlign.Center)

Text('三位绿色')
.fontSize(20)
.backgroundColor('#0F0')
.width('80%')
.height('5%')
.textAlign(TextAlign.Center)
.alignSelf(ItemAlign.Center)

Text('四位半透明浅蓝色')
.fontSize(20)
.backgroundColor('#80FF')
.width('80%')
.height('5%')
.textAlign(TextAlign.Center)
.alignSelf(ItemAlign.Center)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}