← ClaudeAtlas

color-toolkitlisted

专业颜色工具集,支持颜色编码转换、对比度计算、智能颜色推荐、HTML预览生成。适用于UI设计、无障碍开发、配色方案生成等场景。
Ldxs001/workbuddy-skills · ★ 1 · Web & Frontend · score 78
Install: claude install-skill Ldxs001/workbuddy-skills
# Color Toolkit - 专业颜色工具集 ## 核心能力 > 📚 **渐进式加载**:本技能采用渐进式 MD 体系,`SKILL.md` 为入口(≤230行),详细内容拆分到 `references/*.md` 按需加载。 ### 渐进式文件索引 | 文件 | 说明 | |------|------| | `references/examples.md` | 输出格式示例 | | `references/faq.md` | 常见问题 | | `references/antipatterns.md` | 反模式与注意事项 | | `references/changelog.md` | 更新日志 | Color Toolkit 是一个通用的颜色处理工具包,提供: - **颜色编码转换**:HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK 全支持 - **对比度计算**:WCAG 2.1、APCA、CIELAB ΔE*ab、CIEDE2000 四种算法 - **智能颜色推荐**:根据用户描述生成配色方案 - **HTML预览生成**:实时预览颜色效果 ## 触发场景 **正向触发(满足以下任意一条):** - 用户需要颜色转换、对比度计算或配色方案 **否定条件(满足以下任意一条,不触发):** - 简单问答、闲聊、问候(不需要本技能) - 单步任务(不需要结构化执行) ## 核心功能 ### 1. 颜色编码转换 ``` 输入格式支持: - HEX: #FF5733, #F53 - RGB: rgb(255, 87, 51), 255, 87, 51 - HSL: hsl(11, 100%, 60%), 11, 100, 60 - HSV: 11, 100, 60 - CMYK: 0, 66, 100, 0 输出格式: - HEX: #FF5733 - RGB: RGB(r=255, g=87, b=51) - HSL: HSL(h=11.0, s=100.0, l=60.0) - HSV: HSV(h=11, s=100, v=60) - CMYK: CMYK(c=0, m=66, y=100, k=0) ``` ### 2. 对比度计算(四种算法) | 算法 | 用途 | 评估标准 | |------|------|----------| | WCAG 2.1 | 无障碍标准 | ≥4.5:1 (AA) / ≥7:1 (AAA) | | APCA | 现代对比度 | ≥45 Lc (可读) / ≥75 Lc (优秀) | | CIELAB ΔE*ab | 精确色差 | ≤2 (不可辨) / ≤10 (微小) | | CIEDE2000 | 专业色差 | ≤1 (完美) / ≤2 (接近) | ### 3. 智能颜色推荐 **输入**:用户描述(中文/英文) **处理**:LLM解析语义 → 提取关键词 → 映射到色彩空间 **输出**: - 主色(1个) - 辅助色(2-3个) - 强调色(1个) - 背景/文字色建议 ### 4. HTML预览生成 生成的HTML包含: - 颜色色块展示 - 渐变效果预览 - 对比度示例 - 文本可读性测试 - 无障碍合规提示 ## 使用方式 ### 方式一:直接对话(推荐) ``` 用户:请帮我转换颜色 #3498db 到所有格式 用户:计算 #000000 和 #ffffff 的对比度 用户:推荐一套科技感的配色方案 用户:生成这个颜色的预览页面 `