下载地址
https://www.zhengdianxue.com/wp-content/uploads/skills/org-nokx8ub8--color-card.zip将提示词发送给你的 AI 安装该 skills
请根据 https://skillhub.cn/install/skillhub.md，安装 @org-nokx8ub8/color-card。颜色色卡生成器。输入 16 进制颜色值（如 f3f4f6、#f3f4f6、#4f46e5），生成对应的可视化颜色色卡，包含色块预览、HEX/RGB/HSL/CMYK 多格式色值、明暗判断、最近 CSS 颜色名、对比度、色阶（tints/shades）、互补色与邻近色，以及分场景搭配建议（UI 界面配色、品牌/平面配色、数据可视化系列色、文字无障碍搭配）。
当用户询问某个十六进制颜色是什么颜色、要求展示色卡、查颜色值转换或配色建议时触发。
阅读全文 （展开查看完整说明）
概述
color-card 颜色色卡生成器
目的
根据用户输入的 16 进制颜色值（支持 f3f4f6、#f3f4f6、3 位缩写如 #fff），输出一张可视化颜色色卡。色卡包含：色块预览、多格式色值（HEX/RGB/HSL/CMYK）、明暗属性、最佳文字颜色、对比度、最近 CSS 颜色名、色阶和互补/邻近色。
触发场景
- 用户给出一个或多个十六进制颜色值，询问"这是什么颜色"、"给我看看这个颜色的色卡"
- 用户要求做颜色值格式转换（HEX → RGB/HSL/CMYK）
- 用户要求查看某颜色的色阶、互补色或搭配色
使用流程
第 1 步：提取颜色值并运行脚本
从用户消息中提取所有 16 进制颜色值（可一次多个），运行脚本获取精确的颜色数据（禁止手动心算转换，必须用脚本保证数据准确）：
python3 scripts/color_info.py f3f4f6 "#1e293b" 4f46e5（命令在本 skill 所在目录执行；脚本仅依赖 Python 3 标准库，无需安装任何第三方包。）
脚本输出 JSON，每个颜色对象包含：
| 字段 | 含义 |
|---|---|
hex / rgb / hsl / hsv / cmyk | 各格式色值（含可直接复制的 css 写法） |
luminance / is_light / best_text_color | 相对亮度、明暗判断、色块上应使用的文字颜色 |
contrast.vs_white / contrast.vs_black | 与白/黑文字的对比度（WCAG，≥4.5 达标） |
nearest_name | 最近的 CSS 颜色名及色差百分比 |
tints_20_40_60_80 / shades_20_40_60_80 | 提亮色阶 / 加深色阶（各 4 档，20%/40%/60%/80%） |
complementary / analogous | 互补色、邻近色（各含 hex） |
pairings | 分场景搭配建议（见下表） |
pairings 字段包含 4 个场景，每个场景为 {note: 说明, colors: [{role, hex}, ...]}：
| 场景 key | 含义 | 内容 |
|---|---|---|
ui | UI 界面设计 | 页面背景、卡片/表面、边框、次级文字、主文字、强调/主按钮（按原色明暗自动输出浅色或深色模式方案） |
brand | 品牌/平面设计 | 品牌主色、对比强调色（互补）、两个邻近辅助色、浅背景、深色标题 |
dataviz | 数据可视化 | 5 个可区分的图表系列色（色相分散）+ 坐标轴/网格灰 |
text | 文字搭配（无障碍） | 此色作背景时的文字色、此色作文字时的背景色、链接色，note 含对比度结论 |
若输入非法（脚本 errors 字段非空），向用户指出哪个值格式有误，并说明正确格式。
第 2 步：渲染色卡（show_widget）
用 SVG 渲染色卡，遵守当前 IDE 主题（浅色主题用浅底深字）。色卡布局规范：
- 主色块：大面积展示目标颜色（占卡片宽度约 60%），块内左下角用
best_text_color显示大号 HEX 值；旁边标注最近 CSS 颜色名（如 "≈ whitesmoke"）。 - 色值表：以小卡片或行形式列出 HEX / RGB / HSL / CMYK 值，使用等宽字体，方便复制。
- 色阶条：两条水平色带——tints（从原色到白）与 shades（从原色到黑），每格标注对应 hex。
- 搭配建议（分场景）：按
pairings的 4 个场景分区块渲染——「UI 界面」「品牌/平面」「数据可视化」「文字搭配」。- 每个场景一个独立卡片（带背景色或底框）。
- 场景标题（如 "2 · 品牌/平面设计"）与 说明文字（note）必须分两行渲染，标题
font-size="14"，notefont-size="11"，两行基线间距 ≥ 20px，禁止合并到同一<text>。 - 标题下方再预留 12px，再放置色块行。
- 每个场景卡片总高度 ≥ 118px，确保 note 较长时仍有安全留白。
- 色块为 6 个左右的小矩形，每块下方标注 role（如"页面背景"、"系列 2"），块内或块旁标注 hex。色块上的 hex/role 文字颜色按明暗选择黑/白。
- 属性标注：明/暗（is_light）、与黑白的对比度数值，对比度 ≥ 4.5 时标注"✓ 达标"。
多个颜色时：每个颜色渲染一张独立色卡，或垂直排列多张卡；多个 widget 之间用文字分隔说明。
第 3 步：文字回复
在 widget 之外，用简短文字总结关键信息：颜色名、明暗属性、推荐文字颜色、对比度是否达标（无障碍角度）。
约束
- 颜色数值一律以脚本输出为准，不得手动换算或猜测。
- 色块上的文字颜色必须使用脚本给出的
best_text_color，保证可读性。 - SVG 中每个形状必须显式设置 fill（不得依赖 class 着色）。
- 用户只问颜色值转换、不需要图形时，可直接以表格形式回复脚本输出，省略渲染步骤。
