颜色字面量遵循 CSS 的语法：

export component Example inherits Window {    background: blue;    property<color> c1: #ffaaff;    property<brush> b2: Colors.red;}

除了纯颜色之外，许多元素具有类型为 brush 而非 color 的属性。 画刷是一种既可以是颜色也可以是渐变的类型。然后使用画刷来填充元素或绘制其轮廓。

CSS 颜色名称仅在 color 或 brush 类型的表达式的作用域内可用。 否则，请通过 Colors 命名空间访问颜色。

颜色属性

公开以下属性：

red

green

blue

alpha

这些属性的取值范围为 0-255。

使用颜色命名空间可以通过名称选择颜色。例如，你可以使用 Colors.aquamarine 或 Colors.bisque。 名称的完整列表非常长。你可以在 CSS 规范 中找到完整列表。

这些颜色名称在 color 和 brush 表达式的作用域中可用，以及在 Colors 命名空间中可用。

// Using the Colors namespacebackground: Colors.aquamarine;
// Using the functions via global scope.background: aquamarine;

全局颜色函数

rgb(int, int, int) -> color

rgba(int, int, int, float) -> color

按照 CSS 中的方式返回颜色。与 CSS 中一样，这两个函数实际上是别名，可以接受三个或四个参数。

前 3 个参数可以是介于 0 到 255 之间的数字，也可以是带 % 单位的百分比。 第四个值（如果存在）是介于 0 到 1 之间的 alpha 值。

与 CSS 不同的是，逗号是必需的。

hsv(h: float, s: float, v: float) -> color

hsv(h: float, s: float, v: float, a: float) -> color

使用 HSV（色相、饱和度、明度）坐标返回颜色。hue 参数是一个表示度数（0-360）的浮点数，并且会环绕（例如，480 变成 120）。 saturation、value 和可选的 alpha 参数的取值范围应在 0 到 1 之间。

oklch(l: float, c: float, h: float) -> color

oklch(l: float, c: float, h: float, a: float) -> color

使用 Oklch 颜色空间（一种感知上均匀的颜色空间）返回颜色。

• l（亮度）：0（黑色）到 1（白色），或 0% 到 100%
• c（色度）：0（灰度）到 ~0.4（鲜艳），或 0% 到 100%（其中 100% = 0.4）
• h（色相）：0-360 度，或作为角度（例如 180deg、0.5turn）
• a（alpha）：0-1，默认为 1

颜色方法

所有颜色和画刷都定义了以下方法：

brighter(factor: float) -> brush

返回从此颜色派生的新颜色，但亮度增加了指定的因子。 这是通过将颜色转换为 HSV 颜色空间并将亮度（value）乘以 (1 + factor) 来实现的。 例如，如果 factor 为 0.5（例如 50%），则返回的颜色亮度增加 50%。负的 factor 会降低亮度。

darker(factor: float) -> brush

返回从此颜色派生的新颜色，但亮度降低了指定的因子。 这是通过将颜色转换为 HSV 颜色空间并将亮度（value）除以 (1 + factor) 来实现的。 例如，如果 factor 为 0.5（例如 50%），则返回的颜色亮度降低 50%。负的 factor 会增加亮度。

mix(other: brush, factor: float) -> brush

返回由此颜色和 other 混合而成的新颜色。指定的 factor 被限制在 0.0 和 1.0 之间，然后应用于此颜色，而 1.0 - factor 应用于 other。例如，red.mix(green, 70%) 的红色调更浓，而 red.mix(green, 30%) 的绿色调更浓。

transparentize(factor: float) -> brush

返回不透明度降低 factor 的新颜色。 透明度通过将 alpha 通道乘以 (1 - factor) 获得。

with-alpha(alpha: float) -> brush

返回将 alpha 值设置为 alpha（介于 0 到 1 之间）的新颜色

to-hsv() -> { hue: float, saturation: float, value: float, alpha: float }

将此颜色转换为 HSV 颜色空间，并返回一个包含 hue、saturation、value 和 alpha 字段的结构体。hue 的取值范围为 0 到 360，而 saturation、value 和 alpha 的取值范围为 0 到 1。

to-oklch() -> { lightness: float, chroma: float, hue: float, alpha: float }

将此颜色转换为 Oklch 颜色空间，并返回一个包含 lightness、chroma、hue 和 alpha 字段的结构体。lightness 的取值范围为 0 到 1，chroma 通常介于 0 到 ~0.4 之间， hue 的取值范围为 0 到 360，alpha 的取值范围为 0 到 1。

线性渐变

线性渐变描述平滑、彩色的表面。它们通过一个角度和一系列颜色停止点来指定。颜色将在这些停止点之间进行线性插值，沿着旋转了指定角度的假想线对齐。这称为线性渐变，使用 @linear-gradient 宏指定，其签名如下：

@linear-gradient(angle, color percentage, color percentage, …)

宏的第一个参数是一个角度（参见 类型）。渐变线的起始点 将按指定的值旋转。

在初始角度之后是一个或多个颜色停止点，描述为由空格分隔的一对 color 值和 percentage。颜色指定线性颜色插值应沿着渐变轴在该百分比处达到的值。

以下示例展示了一个用线性渐变填充的矩形，渐变从浅蓝色开始，在中心过渡到非常浅的色调，最后以橙色结束：

export component Example inherits Window {    preferred-width: 100px;    preferred-height: 100px;
    Rectangle {        background: @linear-gradient(90deg, #3f87a6 0%, #ebf8e1 50%, #f69d3c 100%);    }}

径向渐变

径向渐变与线性渐变类似，但颜色是沿圆形而非直线进行插值。要描述径向渐变，请使用 @radial-gradient 宏，其签名如下：

@radial-gradient(circle, color percentage, color percentage, …)

宏的第一个参数始终是 circle，因为仅支持圆形渐变。 其他语法基于 CSS 的 radial-gradient 函数。

示例：

export component Example inherits Window {    preferred-width: 100px;    preferred-height: 100px;    Rectangle {        background: @radial-gradient(circle, #f00 0%, #0f0 50%, #00f 100%);    }}

锥形渐变

锥形渐变是指颜色过渡围绕中心点旋转的渐变（就像色轮上的角度）。 要描述锥形渐变，请使用 @conic-gradient 宏，其签名如下：

@conic-gradient([from angle,] color angle, color angle, …)

锥形渐变由一系列颜色停止点描述，每个停止点由一个颜色和一个角度组成。 角度指定颜色沿圆形扫描放置的位置（0deg 到 360deg）。 颜色沿圆形路径在停止点之间进行插值。

可选的 from 参数指定渐变旋转的起始角度。 如果省略，渐变从 0deg 开始（指向上方）。例如，from 90deg 将整个渐变顺时针旋转 90 度。

示例：

export component Example inherits Window {    preferred-width: 100px;    preferred-height: 100px;    Rectangle {        background: @conic-gradient(#f00 0deg, #0f0 120deg, #00f 240deg, #f00 360deg);    }}

这会产生一个色轮效果，红色位于顶部（0deg/360deg），绿色位于 120 度，蓝色位于 240 度。

你也可以使用 from 参数旋转渐变：

export component Example inherits Window {    preferred-width: 100px;    preferred-height: 100px;    Rectangle {        background: @conic-gradient(from 90deg, #f00 0deg, #0f0 120deg, #00f 240deg, #f00 360deg);    }}

这会将同一个色轮顺时针旋转 90 度，因此红色从右侧（90deg）开始，而不是顶部。

Known Limitation

负角度无法直接在锥形渐变中使用（例如 #ff0000 -90deg）。 请改用以下变通方法之一：

• 转换为正角度：-90deg → 270deg
• 使用变量：property <angle> start: -90deg; 然后在渐变中使用 start
• 使用显式减法：#ff0000 0deg - 90deg