sablier-icon

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Recolor the Sablier icon SVG to a user-specified color with an analogous gradient, and optionally export to PNG, JPG, or ICO (favicon).

将Sablier图标SVG重新着色为用户指定的颜色，并添加相似色渐变，还可选择导出为PNG、JPG或ICO（网站图标favicon）。

Source

来源

The base icon is at

assets/icon.svg

(relative to this skill directory). It is a two-path SVG with

viewBox="0 0 189.9 236.73"

(aspect ratio ~0.802:1). Two CSS classes (

.cls-1

.cls-2

) reference two

<linearGradient>

elements in

<defs>

<linearGradient id="linear-gradient">

— contains two

<stop>

elements:

```
offset="0"
```
→
```
stop-color="#f77423"
```
(top / darker)
```
offset="1"
```
→
```
stop-color="#fbce5b"
```
(bottom / lighter)

<linearGradient id="linear-gradient-2">

— inherits stops from the first via

xlink:href="#linear-gradient"

To recolor, replace the two

stop-color

values inside

<linearGradient id="linear-gradient">

. Always preserve the original viewBox and aspect ratio — never add or change

width

height

attributes on the SVG.

A flat variant is at

assets/icon-white.svg

— a single-path SVG with

fill="white"

and

viewBox="0 0 386 480"

(aspect ratio ~0.804:1). Used only when

--flat

is passed.

基础图标位于

assets/icon.svg

（相对于本技能目录）。它是一个包含两条路径的SVG，

viewBox="0 0 189.9 236.73"

（宽高比约0.802:1）。两个CSS类（

.cls-1

、

.cls-2

）引用了

<defs>

中的两个

<linearGradient>

元素：

<linearGradient id="linear-gradient">

— 包含两个

<stop>

元素:

```
offset="0"
```
→
```
stop-color="#f77423"
```
（顶部/较深颜色）
```
offset="1"
```
→
```
stop-color="#fbce5b"
```
（底部/较浅颜色）

<linearGradient id="linear-gradient-2">

— 通过

xlink:href="#linear-gradient"

继承第一个渐变的颜色节点

重新着色时，替换

<linearGradient id="linear-gradient">

内的两个

stop-color

值。请始终保留原始的viewBox和宽高比——切勿在SVG上添加或修改

width

height

属性。

纯色变体位于

assets/icon-white.svg

——这是一个单路径SVG，

fill="white"

且

viewBox="0 0 386 480"

（宽高比约0.804:1），仅在传入

--flat

参数时使用。

Color Resolution

颜色解析

Resolve the user's color input using this priority (first match wins):

Exact alias —
```
primary
```
,
```
secondary
```
,
```
orange
```
,
```
blue
```
(see aliases in palette below)
Exact palette name — e.g.
```
primary-start
```
,
```
dark-300
```
,
```
gray-400
```
Raw hex — accept
```
#RRGGBB
```
or
```
RRGGBB
```
(6-digit only, reject 3/8-digit). Normalize to lowercase
```
#rrggbb
```
CSS color name — standard CSS named colors (e.g.
```
red
```
,
```
teal
```
,
```
cornflowerblue
```
)

If multiple palette entries match a prefix (e.g.

dark

matches

dark

dark-100

dark-300

), prefer the exact match. If no exact match exists, ask the user to be more specific.

按照以下优先级解析用户的颜色输入（匹配到第一个即停止）：

精确别名 —
```
primary
```
、
```
secondary
```
、
```
orange
```
、
```
blue
```
（见下方调色板中的别名）
精确调色板名称 — 例如
```
primary-start
```
、
```
dark-300
```
、
```
gray-400
```
原始十六进制值 — 接受
```
#RRGGBB
```
或
```
RRGGBB
```
格式（仅6位，拒绝3位/8位），统一转换为小写
```
#rrggbb
```
CSS颜色名称 — 标准CSS命名颜色（例如
```
red
```
、
```
teal
```
、
```
cornflowerblue
```
）

如果多个调色板条目匹配某个前缀（例如

dark

匹配

dark

、

dark-100

、

dark-300

），优先选择精确匹配。如果没有找到精确匹配，请要求用户提供更明确的输入。

Sablier Brand Palette

Sablier品牌调色板

Source: sablier-labs/branding

Name	Hex	Notes
primary-start	`#ff7300`	Orange gradient start
primary-end	`#ffb800`	Orange gradient end
primary / orange	`#ff9c00`	Median orange (default primary)
secondary-start	`#003dff`	Blue gradient start
secondary-end	`#00b7ff`	Blue gradient end
secondary / blue	`#0063ff`	Median blue (default secondary)
secondary-desaturated	`#266cd9`	Desaturated blue
dark	`#14161f`	Darkest background
dark-100	`#1e212f`	App background
dark-300	`#2a2e41`	Card borders
dark-400	`#30354a`	Input borders
gray-100	`#e1e4ea`	Body text
gray-400	`#8792ab`	Labels
red	`#e52e52`	Error / destructive
white	`#ffffff`	Original icon color
black	`#000000`	Pure black (rarely used)

来源：sablier-labs/branding

名称	十六进制值	说明
primary-start	`#ff7300`	橙色渐变起始色
primary-end	`#ffb800`	橙色渐变结束色
primary / orange	`#ff9c00`	中间橙色（默认主色调）
secondary-start	`#003dff`	蓝色渐变起始色
secondary-end	`#00b7ff`	蓝色渐变结束色
secondary / blue	`#0063ff`	中间蓝色（默认次色调）
secondary-desaturated	`#266cd9`	低饱和度蓝色
dark	`#14161f`	最深背景色
dark-100	`#1e212f`	应用背景色
dark-300	`#2a2e41`	卡片边框色
dark-400	`#30354a`	输入框边框色
gray-100	`#e1e4ea`	正文文本色
gray-400	`#8792ab`	标签文本色
red	`#e52e52`	错误/破坏性操作色
white	`#ffffff`	原始图标颜色
black	`#000000`	纯黑色（极少使用）

Gradient Generation

渐变生成

Brand gradient pairs

品牌渐变组合

Use these exact hex pairs — no computation needed:

Alias	Start (offset=0, top)	End (offset=1, bottom)
primary / orange	`#f77423`	`#fbce5b`
secondary / blue	`#003dff`	`#00b7ff`

When the user says "primary" or "orange", the output is identical to

icon.svg

(no stop-color changes needed). When the user says "secondary" or "blue", replace the two stop-colors with the blue pair.

使用以下精确的十六进制颜色对——无需计算：

别名	起始色（offset=0，顶部）	结束色（offset=1，底部）
primary / orange	`#f77423`	`#fbce5b`
secondary / blue	`#003dff`	`#00b7ff`

当用户指定“primary”或“orange”时，输出结果与

icon.svg

完全一致（无需修改stop-color值）。当用户指定“secondary”或“blue”时，将两个stop-color值替换为蓝色渐变对。

Arbitrary colors — piecewise HSL algorithm

任意颜色——分段HSL算法

For any color not in the brand gradient pairs above, generate an analogous two-stop gradient:

Convert the resolved hex to HSL
```
(h, s%, l%)
```
Branch by saturation:
- Achromatic (
```
s < 10
```
  ): keep
```
s = 0
```
  for both stops, vary only lightness
  - Start:
```
hsl(h, 0%, max(l - 8, 10)%)
```
  - End:
```
hsl(h, 0%, min(l + 12, 90)%)
```
- Chromatic (
```
s >= 10
```
  ): keep hue constant, adjust lightness and gently reduce end saturation
  - Start:
```
hsl(h, s%, max(l - 8, 15)%)
```
  - End:
```
hsl(h, floor(s * 0.9)%, min(l + 12, 88)%)
```
Ensure
```
endL > startL
```
after clamps; if not, set
```
startL = endL - 10
```
Convert both HSL values back to 6-digit lowercase hex

对于上述品牌渐变组合之外的任意颜色，生成相似色双节点渐变：

将解析后的十六进制值转换为HSL格式
```
(h, s%, l%)
```
根据饱和度分支处理：
- 无彩色（
```
s < 10
```
  ）：保持两个节点的
```
s = 0
```
  ，仅调整亮度
  - 起始色：
```
hsl(h, 0%, max(l - 8, 10)%)
```
  - 结束色：
```
hsl(h, 0%, min(l + 12, 90)%)
```
- 有彩色（
```
s >= 10
```
  ）：保持色相不变，调整亮度并略微降低结束色的饱和度
  - 起始色：
```
hsl(h, s%, max(l - 8, 15)%)
```
  - 结束色：
```
hsl(h, floor(s * 0.9)%, min(l + 12, 88)%)
```
确保调整后
```
endL > startL
```
；如果不满足，设置
```
startL = endL - 10
```
将两个HSL值转换回6位小写十六进制格式

SVG Generation

SVG生成

Gradient mode (default)

渐变模式（默认）

Read
```
assets/icon.svg
```
Resolve gradient start/end colors:
- If the color matches a brand gradient pair alias, use the exact hex pair
- Otherwise, apply the piecewise HSL algorithm
Find the two
```
<stop>
```
elements inside
```
<linearGradient id="linear-gradient">
```
and replace their
```
stop-color
```
values:
- ```
offset="0"
```
  → start hex
- ```
offset="1"
```
  → end hex
Structural checks:
- Exactly two
```
stop-color
```
  replacements occurred
- ```
xlink:href="#linear-gradient"
```
  on
```
linear-gradient-2
```
  is still intact
- ```
viewBox="0 0 189.9 236.73"
```
  preserved, no
```
width
```
  /
```
height
```
  attributes added
Write to
```
sablier-icon-<color-name>.svg
```

读取
```
assets/icon.svg
```
解析渐变起始/结束颜色：
- 如果颜色匹配品牌渐变组合的别名，使用对应的精确十六进制颜色对
- 否则，应用分段HSL算法
找到
```
<linearGradient id="linear-gradient">
```
内的两个
```
<stop>
```
元素，替换它们的
```
stop-color
```
值：
- ```
offset="0"
```
  → 起始色十六进制值
- ```
offset="1"
```
  → 结束色十六进制值

结构检查：

已完成恰好两次
```
stop-color
```
替换

linear-gradient-2

上的

xlink:href="#linear-gradient"

仍保持完整

```
viewBox="0 0 189.9 236.73"
```
已保留，未添加
```
width
```
/
```
height
```
属性

写入文件
```
sablier-icon-<color-name>.svg
```

Flat mode (

--flat

flag)

纯色模式（

--flat

参数）

Read
```
assets/icon-white.svg
```
Resolve the color to a single hex value:
- If the color matches a brand gradient pair alias (
```
primary
```
  ,
```
secondary
```
  ), use the median palette hex (
```
#ff9c00
```
  ,
```
#0063ff
```
  )
- Otherwise, use the resolved hex directly
Replace
```
fill="white"
```
on the
```
<path>
```
element only — never touch
```
fill="none"
```
on the root
```
<svg>
```
element
Verify exactly one replacement occurred
Verify
```
viewBox="0 0 386 480"
```
preserved, no
```
width
```
/
```
height
```
attributes added
Write to
```
sablier-icon-<color-name>.svg
```

读取
```
assets/icon-white.svg
```
将颜色解析为单个十六进制值：
- 如果颜色匹配品牌渐变组合的别名（
```
primary
```
  、
```
secondary
```
  ），使用调色板中的中间色十六进制值（
```
#ff9c00
```
  、
```
#0063ff
```
  ）
- 否则，直接使用解析后的十六进制值
仅替换
```
<path>
```
元素上的
```
fill="white"
```
——切勿修改根
```
<svg>
```
元素上的
```
fill="none"
```
验证已完成恰好一次替换
验证
```
viewBox="0 0 386 480"
```
已保留，未添加
```
width
```
/
```
height
```
属性
写入文件
```
sablier-icon-<color-name>.svg
```

Filenames

文件名规则

Use the brand alias when matched by name (e.g.

primary

), otherwise strip the

prefix and lowercase the hex value (e.g.

#E52E52

→

e52e52

). If the color cannot be resolved, ask the user to provide a valid hex code.

如果匹配到品牌别名，则使用该别名作为文件名的一部分（例如

primary

→

sablier-icon-primary.svg

）；否则，去掉十六进制值的

前缀并转换为小写（例如

#E52E52

→

e52e52

）。如果颜色无法解析，请要求用户提供有效的十六进制代码。

PNG / JPG Export

PNG / JPG导出

If the user passes

--format png

--format jpg

Generate the recolored SVG first

Verify

rsvg-convert

is available:

command -v rsvg-convert >/dev/null 2>&1 || { echo "Error: rsvg-convert not found. Install with: brew install librsvg"; exit 1; }

Use
```
rsvg-convert
```
for SVG→PNG (it correctly renders CSS gradients, unlike ImageMagick's SVG renderer which produces grayscale)
For JPG, convert the PNG with
```
magick
```
(verify availability:
```
command -v magick >/dev/null 2>&1
```
)

Gradient mode (from

icon.svg

, viewBox 189.9×236.73):

bash

undefined

如果用户传入

--format png

或

--format jpg

参数：

先生成重新着色后的SVG

检查

rsvg-convert

是否可用：

command -v rsvg-convert >/dev/null 2>&1 || { echo "Error: rsvg-convert not found. Install with: brew install librsvg"; exit 1; }

使用
```
rsvg-convert
```
将SVG转换为PNG（它能正确渲染CSS渐变，而ImageMagick的SVG渲染器会生成灰度图）
若要导出JPG，先转换为PNG再使用
```
magick
```
处理（需检查
```
magick
```
是否可用：
```
command -v magick >/dev/null 2>&1
```
）

渐变模式（基于

icon.svg

，viewBox为189.9×236.73）：

bash

undefined

PNG (transparent background, 1024px height, width auto-computed from aspect ratio ≈822px)

PNG（透明背景，高度1024px，宽度根据宽高比自动计算≈822px）

rsvg-convert -h 1024 "<input>.svg" -o "<output>.png"

JPG (dark background since JPG has no transparency) — render PNG first, then convert

JPG（因JPG不支持透明，使用深色背景）——先生成PNG再转换

rsvg-convert -h 1024 "<input>.svg" -o "<output>.tmp.png" magick "<output>.tmp.png" -background "#14161f" -flatten "<output>.jpg" rm "<output>.tmp.png"


**Flat mode** (from `icon-white.svg`, viewBox 386×480):

```bash

rsvg-convert -h 1024 "<input>.svg" -o "<output>.tmp.png" magick "<output>.tmp.png" -background "#14161f" -flatten "<output>.jpg" rm "<output>.tmp.png"


**纯色模式**（基于`icon-white.svg`，viewBox为386×480）：

```bash

PNG (transparent background, explicit height, width auto-computed ≈824px)

PNG（透明背景，指定高度，宽度自动计算≈824px）

rsvg-convert -h 1024 "<input>.svg" -o "<output>.png"

JPG (dark background)

JPG（深色背景）

rsvg-convert -h 1024 "<input>.svg" -o "<output>.tmp.png" magick "<output>.tmp.png" -background "#14161f" -flatten "<output>.jpg" rm "<output>.tmp.png"


Verify the exported file's dimensions match the expected aspect ratio.

rsvg-convert -h 1024 "<input>.svg" -o "<output>.tmp.png" magick "<output>.tmp.png" -background "#14161f" -flatten "<output>.jpg" rm "<output>.tmp.png"


验证导出文件的尺寸是否符合预期的宽高比。

ICO Export (

--format ico

--favicon

)

ICO导出（

--format ico

或

--favicon

）

--favicon

is a shorthand for

--format ico

. Both produce a multi-resolution

.ico

file containing 16x16, 32x32, and 48x48 embedded PNGs — the standard sizes for

favicon.ico

Generate the recolored SVG first
Verify
```
rsvg-convert
```
and
```
magick
```
are available (same checks as PNG/JPG)
Render intermediate PNGs at each favicon size using
```
rsvg-convert
```
(height-constrained to preserve aspect ratio), then center each on a square transparent canvas with
```
magick -extent
```
Combine into a single
```
.ico
```
with
```
magick
```
Clean up intermediate PNGs

bash

undefined

--favicon

是

--format ico

的简写。两者都会生成包含16x16、32x32和48x48三种分辨率PNG的多分辨率

.ico

文件——这是

favicon.ico

的标准尺寸。

先生成重新着色后的SVG
检查
```
rsvg-convert
```
和
```
magick
```
是否可用（与PNG/JPG导出的检查方式相同）
使用
```
rsvg-convert
```
渲染每个网站图标尺寸的中间PNG（按高度约束以保留宽高比），然后使用
```
magick -extent
```
将每个PNG居中放置在正方形透明画布上
使用
```
magick
```
合并为单个
```
.ico
```
文件
清理中间PNG文件

bash

undefined

Render PNGs preserving aspect ratio (height-constrained), then center on square canvas

渲染保留宽高比的PNG（按高度约束），然后居中放置在正方形画布上

for size in 16 32 48; do rsvg-convert -h "$size" "<input>.svg" -o "<output>-${size}-raw.tmp.png" magick "<output>-${size}-raw.tmp.png" -background transparent -gravity center -extent "${size}x${size}" "<output>-${size}.tmp.png" rm "<output>-${size}-raw.tmp.png" done

Combine into multi-resolution ICO

合并为多分辨率ICO文件

magick "<output>-16.tmp.png" "<output>-32.tmp.png" "<output>-48.tmp.png" "<output>.ico"

Clean up

清理文件

rm "<output>-16.tmp.png" "<output>-32.tmp.png" "<output>-48.tmp.png"


The output filename follows the `sablier-icon-<color-name>.ico` pattern — or `favicon.ico` if the user explicitly requests that name.

The output filename follows the same `sablier-icon-<color-name>.<ext>` pattern for all other formats.

rm "<output>-16.tmp.png" "<output>-32.tmp.png" "<output>-48.tmp.png"


输出文件名遵循`sablier-icon-<color-name>.ico`格式——如果用户明确要求，也可命名为`favicon.ico`。

所有其他格式的输出文件名均遵循`sablier-icon-<color-name>.<ext>`格式。

Examples

示例

```
primary
```
→
```
sablier-icon-primary.svg
```
with brand orange gradient (identical to
```
icon.svg
```
)

secondary

→

sablier-icon-secondary.svg

with blue gradient

#003dff

#00b7ff

```
#e52e52
```
→
```
sablier-icon-e52e52.svg
```
with red gradient (piecewise HSL algorithm)
```
white
```
→
```
sablier-icon-white.svg
```
with achromatic subtle lightness gradient

#00d395 --flat

→

sablier-icon-00d395.svg

with flat

fill="#00d395"

red --format jpg

→

sablier-icon-red.svg

sablier-icon-red.jpg

secondary --format png

→

sablier-icon-secondary.svg

sablier-icon-secondary.png

(blue gradient + raster export)

primary --format ico

→

sablier-icon-primary.svg

sablier-icon-primary.ico

(multi-resolution 16/32/48px)

```
primary --favicon
```
→ same as
```
--format ico
```

```
primary
```
→
```
sablier-icon-primary.svg
```
（品牌橙色渐变，与
```
icon.svg
```
一致）

secondary

→

sablier-icon-secondary.svg

（蓝色渐变

#003dff

#00b7ff

）

```
#e52e52
```
→
```
sablier-icon-e52e52.svg
```
（红色渐变，使用分段HSL算法）
```
white
```
→
```
sablier-icon-white.svg
```
（无彩色细微亮度渐变）

#00d395 --flat

→

sablier-icon-00d395.svg

（纯色

fill="#00d395"

）

red --format jpg

→

sablier-icon-red.svg

sablier-icon-red.jpg

secondary --format png

→

sablier-icon-secondary.svg

sablier-icon-secondary.png

（蓝色渐变+栅格导出）

primary --format ico

→

sablier-icon-primary.svg

sablier-icon-primary.ico

（多分辨率16/32/48px）

```
primary --favicon
```
→ 与
```
--format ico
```
效果相同

sablier-icon

Original

Translation

Source

来源

Color Resolution

颜色解析

Sablier Brand Palette

Sablier品牌调色板

Gradient Generation

渐变生成

Brand gradient pairs

品牌渐变组合

Arbitrary colors — piecewise HSL algorithm

任意颜色——分段HSL算法

SVG Generation

SVG生成

Gradient mode (default)

渐变模式（默认）

Flat mode (--flat flag)

纯色模式（--flat参数）

Filenames

文件名规则

PNG / JPG Export

PNG / JPG导出

PNG (transparent background, 1024px height, width auto-computed from aspect ratio ≈822px)

PNG（透明背景，高度1024px，宽度根据宽高比自动计算≈822px）

JPG (dark background since JPG has no transparency) — render PNG first, then convert

JPG（因JPG不支持透明，使用深色背景）——先生成PNG再转换

PNG (transparent background, explicit height, width auto-computed ≈824px)

PNG（透明背景，指定高度，宽度自动计算≈824px）

JPG (dark background)

JPG（深色背景）

ICO Export (--format ico or --favicon)

ICO导出（--format ico或--favicon）

Render PNGs preserving aspect ratio (height-constrained), then center on square canvas

渲染保留宽高比的PNG（按高度约束），然后居中放置在正方形画布上

Combine into multi-resolution ICO

合并为多分辨率ICO文件

Clean up

清理文件

Examples

示例

Flat mode (
`--flat`
flag)

纯色模式（
`--flat`
参数）

ICO Export (
`--format ico`
or
`--favicon`
)

ICO导出（
`--format ico`
或
`--favicon`
）