Security audit
Security checks across malware telemetry and agentic risk
This is a documentation-only color and placeholder-image skill that uses a clearly named external API, with no local code execution or credential access.
Install only if you are comfortable using colors-cc.top as an external service. Do not put confidential project names, private user text, secrets, or internal identifiers into placeholder text or query parameters; for sensitive internal tools, prefer local or self-hosted placeholder generation.
### 1. SVG Placeholders with Animation Effects Generate dynamic, lightweight placeholders for UI mockups with various gradient and animation effects. - **Endpoint**: `https://api.colors-cc.top/placeholder` - **Params**: - `w`: Width in pixels (default: 800, range: 50-4000) - `h`: Height in pixels (default: 400, range: 50-4000)
- `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 `Cache-Control: public, max-age=31536000, immutable`
- `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 `Cache-Control: public, max-age=31536000, immutable`
- **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 `Cache-Control: public, max-age=31536000, immutable` ### 2. Fluid Animated Placeholders (Alias)
### 2. Fluid Animated Placeholders (Alias) Generate dynamic SVG gradients with smooth color transitions and animations. - **Endpoint**: `https://api.colors-cc.top/fluid-placeholder` - **Params**: - `w`, `h`, `text`, `speed`, `attribution` (same as above) - `stops` or `palette`: Comma-separated HEX colors for gradient (default: random, range: 2-10 colors)
- **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**: `<img src="https://api.colors-cc.top/fluid-placeholder?w=1200&h=400&stops=%23FFD6A5,%23FFADAD,%23E2A0FF&speed=8&text=Animated+Hero" alt="Warm Gradient">` - **Response**: Animated SVG with smooth color transitions and `Cache-Control: public, max-age=31536000, immutable` ### 3. Random Colors
### 3. Random Colors
Get a random HEX and RGB color with generation timestamp.
- **Endpoint**: `GET https://api.colors-cc.top/random`
- **Returns**: `{"hex": "#A1B2C3", "rgb": "rgb(161, 178, 195)", "timestamp": "2024-03-12T10:30:00.000Z"}`
- **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**: `GET https://api.colors-cc.top/palette?theme={theme_name}`
- **Themes**: `cyberpunk`, `vaporwave`, `retro`, `monochrome`
- **Returns**: `{"theme": "cyberpunk", "colors": ["#FCEE09", "#00FF41", ...], "count": 5}`
- **Example**: `fetch('https://api.colors-cc.top/palette?theme=vaporwave')`- **Endpoint**: `GET https://api.colors-cc.top/palette?theme={theme_name}`
- **Themes**: `cyberpunk`, `vaporwave`, `retro`, `monochrome`
- **Returns**: `{"theme": "cyberpunk", "colors": ["#FCEE09", "#00FF41", ...], "count": 5}`
- **Example**: `fetch('https://api.colors-cc.top/palette?theme=vaporwave')`
### 5. Universal Color Converter
Stateless conversion between HEX, RGB, HSL, and CMYK formats.### 5. Universal Color Converter
Stateless conversion between HEX, RGB, HSL, and CMYK formats.
- **Endpoint**: `GET https://api.colors-cc.top/convert?hex={hex}|rgb={rgb}|hsl={hsl}|cmyk={cmyk}`
- **Params**: Provide ONE of: `hex`, `rgb`, `hsl`, or `cmyk`
- **Returns**: `{"hex": "#FF5733", "rgb": "rgb(255, 87, 51)", "hsl": "hsl(10, 100%, 60%)", "cmyk": "cmyk(0%, 66%, 80%, 0%)"}`
- **Example**: `https://api.colors-cc.top/convert?hex=%23FF5733`- **Endpoint**: `GET https://api.colors-cc.top/convert?hex={hex}|rgb={rgb}|hsl={hsl}|cmyk={cmyk}`
- **Params**: Provide ONE of: `hex`, `rgb`, `hsl`, or `cmyk`
- **Returns**: `{"hex": "#FF5733", "rgb": "rgb(255, 87, 51)", "hsl": "hsl(10, 100%, 60%)", "cmyk": "cmyk(0%, 66%, 80%, 0%)"}`
- **Example**: `https://api.colors-cc.top/convert?hex=%23FF5733`
- **Error**: Returns `{"error": "Invalid color format"}` with status 400 if input is invalid
### 6. CSS Color Names Directory### 6. CSS Color Names Directory
Get all standard CSS color names mapped to their HEX values (~140 colors).
- **Endpoint**: `GET https://api.colors-cc.top/all-names`
- **Returns**: `{"AliceBlue": "#F0F8FF", "AntiqueWhite": "#FAEBD7", "Tomato": "#FF6347", ...}`
- **Example**: Use this to look up named colors like 'tomato' → '#FF6347'```html <section class="hero"> <!-- Animated hero banner with text --> <img src="https://api.colors-cc.top/placeholder?w=1200&h=600&text=Hero+Section&effect=mesh&palette=%23FFD6A5,%23FFADAD,%23E2A0FF&speed=10" alt="Hero"> </section> <div class="features"> <!-- Static placeholder images -->
</section> <div class="features"> <!-- Static placeholder images --> <img src="https://api.colors-cc.top/placeholder?w=400&h=300&text=Feature+1&palette=%23F06292,%2364B5F6" alt="Feature 1"> <img src="https://api.colors-cc.top/placeholder?w=400&h=300&text=Feature+2&palette=%234DB6AC,%2381C784" alt="Feature 2"> </div> ```
<div class="features"> <!-- Static placeholder images --> <img src="https://api.colors-cc.top/placeholder?w=400&h=300&text=Feature+1&palette=%23F06292,%2364B5F6" alt="Feature 1"> <img src="https://api.colors-cc.top/placeholder?w=400&h=300&text=Feature+2&palette=%234DB6AC,%2381C784" alt="Feature 2"> </div> ```
### Use Case 2: Generating Mock Data with Colors
```javascript
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`
}))
```### Use Case 3: Color Picker Component
```javascript
async function getRandomColor() {
const res = await fetch('https://api.colors-cc.top/random')
const data = await res.json()
return data.hex
}### Use Case 4: Universal Color Converter
```javascript
// Convert any color format to all formats
const result = await fetch('https://api.colors-cc.top/convert?hsl=hsl(200,50%,50%)')
.then(r => r.json())
console.log(result.hex) // #4099BF
```By default, all SVG placeholders include a subtle branding watermark for viral sharing. Disable it for internal tools: ``` // With attribution (default - recommended for public-facing content) https://api.colors-cc.top/placeholder?w=800&h=400 // Without attribution (for internal use) https://api.colors-cc.top/placeholder?w=800&h=400&attribution=false
https://api.colors-cc.top/placeholder?w=800&h=400 // Without attribution (for internal use) https://api.colors-cc.top/placeholder?w=800&h=400&attribution=false ``` ### ❌ Mistake 2: Fetching SVG and Re-processing
const encoded = btoa(svg) // GOOD - Use URL directly <img src="https://api.colors-cc.top/placeholder?w=800&h=400" alt="Direct"> ``` ### ❌ Mistake 3: Invalid Dimensions
61/61 vendors flagged this skill as clean.
No suspicious patterns detected.