主题色深浅全色系生成器
Overview
把两个既有能力串联成一个工作流：
- Arco 主题色深浅色板生成器 → 由浅色主题色推导深色主题色
- 主题色中性灰生成器 → 由浅色/深色主题色分别生成各自色相的中性灰
输入一个浅色模式主题色，一站式输出：
- 浅色 Arco 10 级色阶
- 深色 Arco 10 级色阶（其中 #6 = 推导出的深色主题色）
- 浅色模式带色相中性灰 10 级（gray-50 → gray-900）
- 深色模式带色相中性灰 10 级（gray-50 → gray-900）
- 4 张独立色卡 PNG + 1 张总览 PNG
- Markdown 速查表
- 交互式 HTML 可视化工具（可实时调色、复制 HEX）
When to Use
- 用户给出一个浅色主题色，要求「生成对应的深色主题色 + 双模式中性灰」。
- 用户说「我要一套完整的深浅色彩系统」「从浅色出深色再出灰阶」。
- 需要把 Arco 深浅色板算法和主题色色相中性灰算法合并使用。
- 想要一张总览图，同时看到深浅主题色、深浅色板、深浅中性灰。
Workflow
Step 1 — 解析浅色主题色
从用户输入提取浅色模式主题色 HEX（带不带 # 均可）。若用户未给具体色值，可用 Arco 官方预设色作为示例（如 Magenta #F5319D、Arcoblue #165DFF 等）。
Step 2 — 运行合并脚本
调用 scripts/generate_color_system.py，传入 --theme：
python scripts/generate_color_system.py --theme #165DFF --outdir ./color-system-out
脚本会自动完成以下计算：
- 用 Arco HSV 算法生成浅色 10 级色阶
- 用 Arco HSV 算法生成深色 10 级色阶，并取
#6作为深色主题色 - 从浅色主题色提取 HSL 色相 → 生成浅色模式中性灰
- 从深色主题色提取 HSL 色相 → 生成深色模式中性灰
- 渲染 4 张色卡 + 1 张总览图 + Markdown 速查表
Step 3 — 展示结果
向用户展示：
- 深色主题色：由浅色主题色自动推导，是 Arco 深色色板的 #6 号色。
- 浅色 Arco 色板：10 级，#6 = 输入的浅色主题色。
- 深色 Arco 色板：10 级，#6 = 推导出的深色主题色。
- 浅色中性灰：色相锁定浅色主题色，gray-50~900。
- 深色中性灰：色相锁定深色主题色，gray-50~900。
用 show_widget 展示总览 PNG 或直接呈现生成的 PNG；若需要交互，用 present_files 打开 HTML 工具。
Step 4 — 交互式工具（可选）
如需实时调色、点击复制 HEX，可复制 assets/color-system-tool.html 到工作区并用 present_files 打开：
cp ~/.workbuddy/skills/theme-color-system/assets/color-system-tool.html {目标路径}/color-system-tool.html
Step 5 — 设计落地建议
- 把浅色主题色、深色主题色、gray-50~gray-900（双模式）分别固化为 Ardot 颜色变量。
- 浅色灰用于浅色界面背景、卡片、分隔线、文字；深色灰用于深色界面表面/背景梯度。
- 深色灰的色相由深色主题色决定，与浅色灰色相互独立——不要直接反相。
Usage Examples
# 输入浅色主题色，生成完整色彩系统
python scripts/generate_color_system.py --theme #F5319D
# 指定输出目录
python scripts/generate_color_system.py --theme #165DFF --outdir ./my-color-system
# 增强色向强度（中性灰更明显）
python scripts/generate_color_system.py --theme #14C9C9 --strength 1.2
Output Files
运行脚本后，--outdir 目录下会生成：
| 文件 | 说明 |
|---|---|
palette_light.png |
浅色 Arco 10 级色卡 |
palette_dark.png |
深色 Arco 10 级色卡 |
gray_light.png |
浅色模式带色相中性灰 10 级色卡 |
gray_dark.png |
深色模式带色相中性灰 10 级色卡 |
overview.png |
总览图：4 个色阶区域 + 主题色标注 |
color-system-{hex}.md |
Markdown 速查表（含完整 HEX / HSV / HSL） |
Resources
scripts/generate_color_system.py— 核心脚本：Arco 算法 + 中性灰算法（Python）assets/color-system-tool.html— 交互式可视化工具（单文件、自包含、vanilla JS）references/algorithm.md— 双算法源码级详解
Algorithm Notes
- Arco 部分：HSV 色彩空间，深色色板 = 浅色色板明度翻转 + 饱和度按色相分区降低 15~20。
- 中性灰部分：HSL 色彩空间，锁定主题色色相 H，只调 L 和 S。浅色灰 L 97%→13%、S 6%→24%；深色灰 L 42%→9%、S 17%→10%。
- 关键原则：深色灰不是浅色灰的反相，而是由深色主题色色相独立锚定的一套深色表面梯度。
