Color 模块

Color 模块为 XScript 提供颜色处理功能,支持 RGBA 颜色创建、预定义颜色常量和颜色格式转换。

功能特性

RGBA 颜色 - 创建和操作 RGBA 颜色值

预定义颜色 - 提供常用颜色常量(红、绿、蓝等)

颜色转换 - 支持 RGB、HEX、HSL 等格式转换

颜色运算 - 颜色混合、透明度调整

Web 颜色 - 支持 CSS 颜色名称和格式

基本使用

引入模块

创建 RGBA 颜色

使用预定义颜色

颜色格式转换

API 参考

颜色创建

`color.rgba(r, g, b, a)`

创建 RGBA 颜色对象。

参数:

r (number) - 红色分量 (0-255)

g (number) - 绿色分量 (0-255)

b (number) - 蓝色分量 (0-255)

a (number) - 透明度 (0.0-1.0)

返回: (object) 颜色对象 { r, g, b, a }

`color.rgb(r, g, b)`

创建 RGB 颜色对象(完全不透明)。

参数:

r (number) - 红色分量 (0-255)

g (number) - 绿色分量 (0-255)

b (number) - 蓝色分量 (0-255)

返回: (object) 颜色对象 { r, g, b, a: 1.0 }

`color.fromHex(hex)`

从十六进制颜色码创建颜色。

参数:

hex (string) - 十六进制颜色码,如 '#FF5733' 或 '#F57'

返回: (object) 颜色对象

`color.fromHSL(h, s, l)`

从 HSL 色彩空间创建颜色。

参数:

h (number) - 色相 (0-360)

s (number) - 饱和度 (0-100)

l (number) - 亮度 (0-100)

返回: (object) 颜色对象

颜色转换

`color.toHex(color)`

将颜色对象转换为十六进制字符串。

参数:

color (object) - 颜色对象

返回: (string) 十六进制颜色码,如 '#FF5733'

`color.toRGBString(color)`

转换为 CSS RGB 字符串。

参数:

color (object) - 颜色对象

返回: (string) RGB 字符串,如 'rgb(255, 87, 51)'

`color.toRGBAString(color)`

转换为 CSS RGBA 字符串。

参数:

color (object) - 颜色对象

返回: (string) RGBA 字符串,如 'rgba(255, 87, 51, 0.8)'

`color.toHSL(color)`

转换为 HSL 色彩空间。

参数:

color (object) - 颜色对象

返回: (object) HSL 对象 { h, s, l }

颜色操作

`color.mix(color1, color2, ratio)`

混合两个颜色。

参数:

color1 (object) - 第一个颜色

color2 (object) - 第二个颜色

ratio (number) - 混合比例 (0.0-1.0)

返回: (object) 混合后的颜色

`color.lighten(color, amount)`

提高颜色亮度。

参数:

color (object) - 原始颜色

amount (number) - 增加的亮度值 (0-100)

返回: (object) 变亮后的颜色

`color.darken(color, amount)`

降低颜色亮度。

参数:

color (object) - 原始颜色

amount (number) - 降低的亮度值 (0-100)

返回: (object) 变暗后的颜色

`color.setAlpha(color, alpha)`

设置颜色透明度。

参数:

color (object) - 原始颜色

alpha (number) - 新的透明度 (0.0-1.0)

返回: (object) 新的颜色对象

预定义颜色常量

注意事项

值范围 - RGB 值范围 0-255,透明度范围 0.0-1.0

格式一致性 - 保持颜色格式在项目中统一

性能考虑 - 频繁颜色计算时考虑缓存结果

颜色空间 - 注意不同颜色空间(RGB/HSL)的转换损失

浏览器兼容 - 使用 CSS 颜色格式时注意浏览器支持

实际应用场景

动态主题系统

图像处理

数据可视化

无障碍设计

最佳实践

使用预定义颜色 - 优先使用模块提供的颜色常量

颜色命名 - 使用有意义的颜色变量名

缓存计算结果 - 避免重复进行颜色转换

考虑无障碍 - 确保文字和背景有足够对比度

统一格式 - 在代码中统一使用一种颜色表示格式

颜色格式对比

格式	示例	适用场景
RGB	rgb(255, 87, 51)	CSS 样式
RGBA	rgba(255, 87, 51, 0.8)	透明颜色
HEX	#FF5733	Web 开发
HSL	hsl(9, 100%, 60%)	颜色调整

color

Color 模块#

功能特性#

基本使用#

引入模块#

创建 RGBA 颜色#

使用预定义颜色#

颜色格式转换#

API 参考#

颜色创建#

color.rgba(r, g, b, a)#

color.rgb(r, g, b)#

color.fromHex(hex)#

color.fromHSL(h, s, l)#

颜色转换#

color.toHex(color)#

color.toRGBString(color)#

color.toRGBAString(color)#

color.toHSL(color)#

颜色操作#

color.mix(color1, color2, ratio)#

color.lighten(color, amount)#

color.darken(color, amount)#

color.setAlpha(color, alpha)#

预定义颜色常量#

注意事项#

实际应用场景#

动态主题系统#

图像处理#

数据可视化#

无障碍设计#

最佳实践#

颜色格式对比#

相关模块#

Color 模块

功能特性

基本使用

引入模块

创建 RGBA 颜色

使用预定义颜色

颜色格式转换

API 参考

颜色创建

`color.rgba(r, g, b, a)`

`color.rgb(r, g, b)`

`color.fromHex(hex)`

`color.fromHSL(h, s, l)`

颜色转换

`color.toHex(color)`

`color.toRGBString(color)`

`color.toRGBAString(color)`

`color.toHSL(color)`

颜色操作

`color.mix(color1, color2, ratio)`

`color.lighten(color, amount)`

`color.darken(color, amount)`

`color.setAlpha(color, alpha)`

预定义颜色常量

注意事项

实际应用场景

动态主题系统

图像处理

数据可视化

无障碍设计

最佳实践

颜色格式对比

相关模块