Back to Details

color-cli

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Color CLI

Color CLI

Convert colors accurately between hex, rgb, and oklch using 
@kood/color-cli
.
AI models often produce incorrect oklch conversions due to matrix precision errors, missing gamut mapping, and degree/radian confusion. This skill delegates color conversion to 
@kood/color-cli
(powered by culori) for CSS Color Level 4 compliant results.
<request_routing>
使用
@kood/color-cli
在hex、rgb与oklch格式之间精准转换颜色。
AI模型常因矩阵精度误差、色域映射缺失以及角度/弧度混淆，导致oklch转换结果不准确。本技能将颜色转换任务委托给
@kood/color-cli
（由culori提供支持），以获得符合CSS Color Level 4标准的结果。
<request_routing>

Positive triggers

正向触发条件

  • "Convert #ff0000 to oklch"
  • "What's the oklch value of rgb(0, 128, 255)?"
  • "Convert all colors in styles.css to oklch"
  • "hex to rgb", "oklch to hex", "convert this color"
  • "Normalize the colors in this CSS file to hex"
  • "Convert #ff0000 to oklch"
  • "What's the oklch value of rgb(0, 128, 255)?"
  • "Convert all colors in styles.css to oklch"
  • "hex to rgb", "oklch to hex", "convert this color"
  • "Normalize the colors in this CSS file to hex"

Out-of-scope

超出范围场景

  • Color palette generation or design suggestions — use a design skill instead.
  • Color theory explanations — answer directly without this skill.
  • Creating CSS from scratch — use an implementation skill instead.
  • 调色板生成或设计建议——请使用设计类技能。
  • 色彩理论解释——直接回答，无需使用本技能。
  • 从零开始创建CSS——请使用实现类技能。

Boundary

边界案例

  • "What color is oklch(0.7 0.25 140)?" → Use this skill to get the hex/rgb equivalent.
  • "Pick a good color for a button" → Do not use this skill; this is a design question.
</request_routing>
<prerequisites>
Install 
@kood/color-cli
globally if not already available:
bash
npm i -g @kood/color-cli
Verify installation:
bash
color --help
If 
color
command is not found, install it first before proceeding.
</prerequisites> <workflow>
  • "What color is oklch(0.7 0.25 140)?" → 使用本技能获取对应的hex/rgb格式。
  • "Pick a good color for a button" → 请勿使用本技能；这属于设计问题。
</request_routing>
<prerequisites>
如果尚未安装，请全局安装
@kood/color-cli
：
bash
npm i -g @kood/color-cli
验证安装：
bash
color --help
如果未找到
color
命令，请先安装再继续操作。
</prerequisites> <workflow>

Single Color Conversion

单一颜色转换

When the user asks to convert a specific color value:
bash
color "<value>"
Examples:
bash
color "#ff0000"
color "oklch(0.7 0.25 140)"
color "rgb(255, 0, 0)"
color "hsl(0, 100%, 50%)"
For JSON output (useful for programmatic use):
bash
color --json "#ff0000"
For multiple colors at once:
bash
color "#e63946" "oklch(0.7 0.25 140)" "rgb(0, 128, 255)"
当用户要求转换特定颜色值时：
bash
color "<value>"
示例：
bash
color "#ff0000"
color "oklch(0.7 0.25 140)"
color "rgb(255, 0, 0)"
color "hsl(0, 100%, 50%)"
如需JSON格式输出（适用于程序化调用）：
bash
color --json "#ff0000"
如需同时转换多个颜色：
bash
color "#e63946" "oklch(0.7 0.25 140)" "rgb(0, 128, 255)"

CSS File Color Conversion

CSS文件颜色转换

When the user wants to convert all colors in a CSS file to a specific format:
Preview first (dry run):
bash
color css <file> --to <format> --dry-run
Apply changes (in-place):
bash
color css <file> --to <format>
Supported target formats: 
hex
, 
rgb
, 
oklch
.
Examples:
bash
undefined
当用户希望将CSS文件中的所有颜色转换为特定格式时：
先预览（试运行）：
bash
color css <file> --to <format> --dry-run
应用更改（原地修改）：
bash
color css <file> --to <format>
支持的目标格式：
hex
、
rgb
、
oklch
。
示例：
bash
undefined

Preview oklch conversion

预览转换为oklch格式的效果

color css styles.css --to oklch --dry-run
color css styles.css --to oklch --dry-run

Apply hex conversion

应用转换为hex格式的更改

color css src/global.css --to hex
color css src/global.css --to hex

Convert to rgb

转换为rgb格式

color css theme.css --to rgb
undefined
color css theme.css --to rgb
undefined

CSS conversion behavior

CSS转换行为

  • Automatically detects hex, rgb, rgba, oklch patterns in the file
  • Skips colors already in the target format
  • Preserves alpha values (e.g., 
    rgba(255,0,0,0.5)
    → 
    oklch(0.628 0.258 29.23 / 0.5)
    )
  • Ignores colors inside CSS comments (
    /* ... */
    )
  • Applies CSS Color Level 4 gamut mapping for out-of-gamut oklch values
</workflow>
<output_interpretation>
  • 自动检测文件中的hex、rgb、rgba、oklch格式颜色
  • 跳过已为目标格式的颜色
  • 保留透明度值（例如：
    rgba(255,0,0,0.5)
    → 
    oklch(0.628 0.258 29.23 / 0.5)
    ）
  • 忽略CSS注释（
    /* ... */
    ）内的颜色
  • 对超出色域的oklch值应用CSS Color Level 4色域映射
</workflow>
<output_interpretation>

Single color output

单一颜色输出

HEX:   #ff0000
RGB:   rgb(255, 0, 0)
OKLCH: oklch(0.6280 0.2577 29.23)
HEX:   #ff0000
RGB:   rgb(255, 0, 0)
OKLCH: oklch(0.6280 0.2577 29.23)

Gamut mapping warning

色域映射警告

When an oklch value is outside the sRGB gamut, the tool applies chroma-reduction and shows:
⚠ Color was outside sRGB gamut — CSS Color Level 4 chroma-reduction applied.
This means the original oklch chroma was reduced to fit sRGB while preserving lightness and hue.
当oklch值超出sRGB色域时，工具会进行色度缩减并显示：
⚠ Color was outside sRGB gamut — CSS Color Level 4 chroma-reduction applied.
这表示原始oklch的色度已被缩减以适配sRGB色域，同时保留亮度和色调。

CSS conversion summary

CSS转换摘要

styles.css: 12 colors found, 8 converted, 4 skipped
  • converted: colors that were changed to the target format
  • skipped: colors already in the target format
</output_interpretation>
<guidelines>
  • Always use 
    --dry-run
    first when converting CSS files, then apply if the user confirms.
  • When the user provides an oklch value, always run the conversion rather than computing manually — AI models frequently produce incorrect oklch ↔ hex mappings.
  • Report the full output (hex, rgb, oklch) to the user so they can pick the format they need.
  • For CSS file operations, show the summary (converted/skipped counts) to the user.
</guidelines>
styles.css: 12 colors found, 8 converted, 4 skipped
  • converted：已转换为目标格式的颜色
  • skipped：已为目标格式、被跳过的颜色
</output_interpretation>
<guidelines>
  • 转换CSS文件时，始终先使用
    --dry-run
    预览，获得用户确认后再应用更改。
  • 当用户提供oklch值时，务必运行转换工具而非手动计算——AI模型经常会产生错误的oklch ↔ hex映射结果。
  • 向用户展示完整输出结果（hex、rgb、oklch三种格式），以便他们选择所需格式。
  • 对于CSS文件操作，向用户展示转换摘要（已转换/已跳过的数量）。
</guidelines>