一、引言
颜色选择器（Color Picker）是设计师和开发者几乎每天都会用到的工具。无论是在网页开发中选取主题色，还是在设计工具中调配渐变色，一个直观、易用的颜色选取器都是不可或缺的。

本文将讲解如何在 ArkTS 中利用三个 Slider 组件实现 RGB 三通道的实时调色，并自动生成对应的 HEX 色值。

二、色彩模型基础
2.1 RGB 色彩模型
RGB 是最基础、最通用的色彩模型，它通过红（Red）、绿（Green）、蓝（Blue）三个通道的不同强度来混合出几乎所有的颜色。每个通道的取值范围为 0-255（8 位色深），总共可以表示 256³ ≈ 1670 万种颜色。

颜色 R G B HEX
纯红 255 0 0 #FF0000
纯绿 0 255 0 #00FF00
纯蓝 0 0 255 #0000FF
白色 255 255 255 #FFFFFF
黑色 0 0 0 #000000
2.2 HEX 色值的计算
HEX 是 RGB 的十六进制表示法，将三个通道的十进制值分别转为两位十六进制数并拼接：

updateHex() {
let r = Math.round(this.red).toString(16).padStart(2, ‘0’);
let g = Math.round(this.green).toString(16).padStart(2, ‘0’);
let b = Math.round(this.blue).toString(16).padStart(2, ‘0’);
this.hex = ‘#’ + r.toUpperCase() + g.toUpperCase() + b.toUpperCase();
}
padStart(2, ‘0’) 确保当通道值小于 16 时（如 15 → ‘f’），补零为 ‘0f’。toUpperCase() 将十六进制字母转为大写，符合常见 HEX 色值的格式规范。

三、RGB 三通道调色实现
3.1 Slider 组件配置
三个 Slider 分别控制 R、G、B 通道，取值范围 0-255：

Slider({ value: this.red, min: 0, max: 255, step: 1 })
.blockColor(‘#E74C3C’) // R 通道滑块为红色
.trackColor(‘#E0E0E0’)
.selectedColor(‘#E74C3C’)
.onChange((v: number) => {
this.red = Math.round(v);
this.updateHex();
})
3.2 颜色预览
Text(‘’)
.width(200)
.height(200)
.borderRadius(20)
.backgroundColor(this.rgbColor())
.shadow({ radius: 10, color: ‘#30000000’, offsetY: 5 })
this.rgbColor() 方法返回 CSS 格式的 RGB 字符串：

rgbColor(): string {
return rgb(${Math.round(this.red)},${Math.round(this.green)},${Math.round(this.blue)});
}
3.3 预设颜色
提供常见颜色的快速选取按钮：

ForEach([
‘#E74C3C’, ‘#E67E22’, ‘#F1C40F’, ‘#2ECC71’,
‘#3498DB’, ‘#9B59B6’, ‘#1ABC9C’, ‘#34495E’
], (c: string) => {
Text(‘’)
.width(32).height(32).borderRadius(16)
.backgroundColor©
.onClick(() => {
this.hex = c;
this.red = parseInt(c.slice(1, 3), 16);
this.green = parseInt(c.slice(3, 5), 16);
this.blue = parseInt(c.slice(5, 7), 16);
})
})
点击预设颜色时，同时更新 HEX 值和三个通道值。

四、命名冲突问题
在开发过程中，我们遇到了一个典型的 ArkTS 命名冲突问题。最初我们将组件命名为 ColorPicker，但 ArkTS 的 ArkUI 框架中已有一个内置的 ColorPicker 组件，导致编译错误：

The struct ‘ColorPicker’ cannot have the same name as the built-in component ‘ColorPicker’.
解决方案：将自定义结构体重命名为 ColorPick，与内置组件名称区分开。样式文件名为 ColorPicker.ets（按文件路径路由），内部结构体名为 ColorPick。

五、总结
颜色选择器展示了 ArkTS 中 Slider 组件的另一种用途——不是用于数值调节，而是用于色彩调节。通过三个 Slider 分别控制 RGB 通道，用户可以直观地看到颜色随滑动的实时变化。

核心收获：

RGB 模型与 HEX 色值的转换
Slider 的非数值交互用途
命名冲突的识别与解决
@Builder 的灵活运用