技能：ColorsCC

一款高性能、无状态的色彩 API 与工具集，专为 AI Agent（OpenClaw、Cursor、Cline、GPTs）优化。

🚀 Agent 使用规则

• 内联图像：始终使用 标签或 Markdown 语法 ![alt](url) 直接嵌入 SVG 占位图。
• URL 编码：# 字符必须编码为 %23（例如：start=%23FF003C）。
• 禁止抓取：不得尝试下载二进制图像数据；交由用户客户端直接渲染 URL。
• 有效尺寸范围：宽高将自动限制在 50–4000 像素之间。
• 文本长度限制：占位图中的文字最多截取 100 个字符。

🛠 功能能力

1. 带动画效果的 SVG 占位图

为 UI 原型生成动态、轻量级占位图，支持多种渐变与动画效果。

• 接口地址：https://api.colors-cc.top/placeholder
• 参数说明：
  • w：宽度（像素），默认值：800，取值范围：50–4000
  • h：高度（像素），默认值：400，取值范围：50–4000
  • text：居中显示的文字，需 URL 编码（默认值："{width} x {height}"，最多 100 字符）
  • effect：视觉效果。可选值：static（默认）、fluid、breathe、holographic、mesh
  • palette：逗号分隔的颜色列表 — 支持 HEX、RGB 或 HSL 格式（默认：2 种随机颜色，支持 2–10 种）。例如：%23FFD6A5,%23FFADAD
  • speed：非静态效果的动画持续时间（秒），默认值：10，取值范围：1–30
  • attribution：是否添加品牌水印（默认：true）。设为 false 或 0 可禁用。启用后将在右下角添加透明度为 15% 的 “colors-cc.top” 水印，并在 SVG 中插入 HTML 注释以支持传播分享。
• 示例：
  • 静态效果：
  • 全息效果：
  • 网格效果：
• 响应格式：SVG 图像，响应头含 Cache-Control: public, max-age=31536000, immutable

2. 流体动画占位图（别名接口）

生成具备平滑色彩过渡与动画效果的动态 SVG 渐变图。

• 接口地址：https://api.colors-cc.top/fluid-placeholder
• 参数说明：
  • w、h、text、speed、attribution（同上）
  • palette：逗号分隔的颜色列表 — 支持 HEX、RGB 或 HSL 格式（默认：随机生成，支持 2–10 种颜色）
• 示例：
• 响应格式：带平滑色彩过渡的动画 SVG，响应头含 Cache-Control: public, max-age=31536000, immutable

3. 随机颜色生成

获取一个随机 HEX 与 RGB 颜色值，并附带生成时间戳。

• 接口地址：GET https://api.colors-cc.top/random
• 返回值：{"hex": "#A1B2C3", "rgb": "rgb(161, 178, 195)", "timestamp": "2024-03-12T10:30:00.000Z"}
• 使用场景：当需要为模拟数据或 UI 组件生成随机颜色时调用该接口。

4. 精选主题色板

获取高质量设计灵感色组。

• 接口地址：GET https://api.colors-cc.top/palette?theme={theme_name}
• 支持主题：cyberpunk、vaporwave、retro、monochrome
• 返回值：{"theme": "cyberpunk", "colors": ["#FCEE09", "#00FF41", ...], "count": 5}
• 示例：fetch('https://api.colors-cc.top/palette?theme=vaporwave')

5. 通用色彩格式转换器

在 HEX、RGB、HSL 和 CMYK 格式之间进行无状态转换。

• 接口地址：GET https://api.colors-cc.top/convert?hex={hex}|rgb={rgb}|hsl={hsl}|cmyk={cmyk}
• 参数说明：仅允许提供以下任一参数：hex、rgb、hsl 或 cmyk
• 返回值：{"hex": "#FF5733", "rgb": "rgb(255, 87, 51)", "hsl": "hsl(10, 100%, 60%)", "cmyk": "cmyk(0%, 66%, 80%, 0%)"}
• 示例：https://api.colors-cc.top/convert?hex=%23FF5733
• 错误响应：若输入格式无效，则返回状态码 400 及 {"error": "Invalid color format"}

6. CSS 颜色名称目录

获取全部标准 CSS 颜色名称及其对应的 HEX 值（约 140 个）。

• 接口地址：GET https://api.colors-cc.top/all-names
• 返回值：{"AliceBlue": "#F0F8FF", "AntiqueWhite": "#FAEBD7", "Tomato": "#FF6347", ...}
• 使用场景：用于查询命名颜色，例如 'tomato' → '#FF6347'

📖 典型使用场景

使用场景 1：构建落地页

使用场景 2：生成带颜色的模拟数据

const palette = await fetch('https://api.colors-cc.top/palette?theme=vaporwave')
  .then(r => r.json())

const mockData = palette.colors.map((color, i) => ({
  id: i,
  name: `Item ${i+1}`,
  color: color,
  thumbnail: `https://api.colors-cc.top/placeholder?w=200&h=200&palette=${color.replace('#', '%23')},%23000000`
}))

使用场景 3：颜色选择器组件

async function getRandomColor() {
  const res = await fetch('https://api.colors-cc.top/random')
  const data = await res.json()
  return data.hex
}

使用场景 4：通用色彩格式转换

// 将任意色彩格式转换为全部格式
const result = await fetch('https://api.colors-cc.top/convert?hsl=hsl(200,50%,50%)')
  .then(r => r.json())
console.log(result.hex) // #4099BF

⚠️ 常见陷阱与解决方案

❌ 错误 1：未编码的井号（#）符号

BAD:  palette=#FF0000,%230000FF
GOOD: palette=%23FF0000,%230000FF

✅ 提示：为内部工具禁用水印

默认情况下，所有 SVG 占位图均包含轻微的品牌水印，便于传播分享。如用于内部工具，请禁用：

// 启用水印（默认值 — 推荐用于面向公众的内容）
https://api.colors-cc.top/placeholder?w=800&h=400

// 禁用水印（仅限内部使用）
https://api.colors-cc.top/placeholder?w=800&h=400&attribution=false

❌ 错误 2：抓取 SVG 并二次处理

// BAD — 请勿执行此操作
const svg = await fetch(placeholderUrl).then(r => r.text())
const encoded = btoa(svg)

// GOOD — 直接使用 URL

❌ 错误 3：非法尺寸参数

BAD:  w=10 （过小，将被自动修正为 50）
BAD:  w=9999 （过大，将被自动修正为 4000）
GOOD: w=800&h=600

❌ 错误 4：/api/convert 接口传入多个色彩参数

BAD:  /api/convert?hex=%23FF0000&rgb=rgb(255,0,0)
GOOD: /api/convert?hex=%23FF0000

❌ 错误 5：色板中颜色数量非法

BAD:  palette=%23FF0000 （仅 1 种颜色，最少需 2 种）
BAD:  palette=%23FF0000,%23... （超过 10 种颜色，超出部分将被忽略）
GOOD: palette=%23FF0000,%230000FF,%2300FF00 （2–10 种颜色）

🌐 Web 工具（面向终端用户）

• 占位图生成器：https://colors-cc.top/
• 通用色彩格式转换器：https://colors-cc.top/tools/converter
• 随机色板生成器：https://colors-cc.top/tools/random-palette
• CSS 颜色名称参考：https://colors-cc.top/tools/color-names

📚 完整文档

如需查阅完整 API 文档，请参考：

• 面向 LLM 优化的文档：https://colors-cc.top/llms.txt
• OpenAPI 规范：https://colors-cc.top/openapi.json
• 官网主页：https://colors-cc.top/

💡 调用频率限制

无限制。所有接口完全免费且无调用上限。