SKILL: ColorsCC

A high-performance, stateless Color API and toolset optimized for AI Agents (OpenClaw, Cursor, Cline, GPTs).

🚀 Usage Rules for Agents

• - Inline Images: Always embed SVG placeholders directly using <img> or Markdown ![alt](url).
• URL Encoding: The # character must be encoded as %23 (e.g., start=%23FF003C).
• No Fetching: Do not attempt to download binary image data; let the user's client render the URL.
• Valid Dimensions: Width and height are clamped between 50-4000px automatically.
• Text Limit: Placeholder text is truncated to 100 characters max.

🛠 Capabilities

1. SVG Placeholders with Animation Effects

Generate dynamic, lightweight placeholders for UI mockups with various gradient and animation effects.

• - Endpoint: INLINECODE5
• Params:

- w: Width in pixels (default: 800, range: 50-4000) - h: Height in pixels (default: 400, range: 50-4000) - text: Center text, URL-encoded (default: "{width} x {height}", max: 100 chars) - effect: Visual effect. Options: static (default), fluid, breathe, holographic, mesh - palette: Comma-separated HEX colors (default: 2 random colors, range: 2-10 colors). e.g., %23FFD6A5,%23FFADAD - speed: Animation duration in seconds for non-static effects (default: 10, range: 1-30) - attribution: Include branding watermark (default: true). Set to false or 0 to disable. When enabled, adds a subtle "colors-cc.top" watermark (15% opacity) in bottom-right corner and HTML comment for viral sharing. - start / end: (Legacy) Start and end gradient colors as hex. Prefer palette.

• - Examples:

- Static: <img src="https://api.colors-cc.top/placeholder?w=1200&h=630&text=Hero+Banner&palette=%23F06292,%2364B5F6" alt="Hero"> - Holographic: <img src="https://api.colors-cc.top/placeholder?w=800&h=400&effect=holographic&palette=%2300FF41,%2300B8FF&speed=5" alt="Holo"> - Mesh: <img src="https://api.colors-cc.top/placeholder?w=800&h=400&effect=mesh&palette=%23FFD6A5,%23FFADAD,%23E2A0FF&speed=8" alt="Mesh">

• - Response: SVG image with INLINECODE27

2. Fluid Animated Placeholders (Alias)

Generate dynamic SVG gradients with smooth color transitions and animations.

• - Endpoint: INLINECODE28
• Params:

- w, h, text, speed, attribution (same as above) - stops or palette: Comma-separated HEX colors for gradient (default: random, range: 2-10 colors)

• - Example: INLINECODE36
• Response: Animated SVG with smooth color transitions and INLINECODE37

3. Random Colors

Get a random HEX and RGB color with generation timestamp.

• - Endpoint: INLINECODE38
• Returns: INLINECODE39
• Example: Fetch this endpoint when you need random colors for mock data or UI components.

4. Curated Theme Palettes

Fetch high-quality color sets for design inspiration.

• - Endpoint: INLINECODE40
• Themes: cyberpunk, vaporwave, retro, INLINECODE44
• Returns: INLINECODE45
• Example: INLINECODE46

5. Universal Color Converter

Stateless conversion between HEX, RGB, HSL, and CMYK formats.

• - Endpoint: INLINECODE47
• Params: Provide ONE of: hex, rgb, hsl, or INLINECODE51
• Returns: INLINECODE52
• Example: INLINECODE53
• Error: Returns {"error": "Invalid color format"} with status 400 if input is invalid

6. CSS Color Names Directory

Get all standard CSS color names mapped to their HEX values (~140 colors).

• - Endpoint: INLINECODE55
• Returns: INLINECODE56
• Example: Use this to look up named colors like 'tomato' → '#FF6347'

📖 Common Use Cases

Use Case 1: Building a Landing Page

CODEBLOCK0

Use Case 2: Generating Mock Data with Colors

CODEBLOCK1

Use Case 3: Color Picker Component

CODEBLOCK2

Use Case 4: Universal Color Converter

CODEBLOCK3

⚠️ Common Pitfalls & Solutions

❌ Mistake 1: Unencoded Hash Symbol

CODEBLOCK4

✅ Tip: Disable Attribution for Internal Tools

By default, all SVG placeholders include a subtle branding watermark for viral sharing. Disable it for internal tools: CODEBLOCK5

❌ Mistake 2: Fetching SVG and Re-processing

CODEBLOCK6

❌ Mistake 3: Invalid Dimensions

CODEBLOCK7

❌ Mistake 4: Multiple Color Parameters in /api/convert

CODEBLOCK8

❌ Mistake 5: Invalid Number of Colors in Palette

CODEBLOCK9

🌐 Web Tools (For Users)

• - Universal Color Converter: https://colors-cc.top/tools/converter
• Random Palette Generator: https://colors-cc.top/tools/random-palette
• CSS Color Names Reference: https://colors-cc.top/tools/color-names
• Fluid Gradient Placeholder: https://colors-cc.top/tools/fluid-placeholder

📚 Full Documentation

For complete API documentation, reference:

• - LLM-optimized docs: https://colors-cc.top/llms.txt
• OpenAPI specification: https://colors-cc.top/openapi.json
• Live site: https://colors-cc.top/

💡 Rate Limits

None. All endpoints are free and unlimited.