Color Utilities

Generate Shades

Creates darker variations of any color by systematically reducing brightness while preserving hue. Use via MCP in Cursor or Windsurf for design workflows, or REST API at `/v1/color/shade`. Input any color format (hex, RGB, HSL) and specify how many shades you need. Returns consistent, mathematically-derived darker variants perfect for UI design systems.

API Endpoint

GET /v1/color/shade

Code Examples

curl "https://tinyfn.io/v1/color/shade" \
  -H "X-API-Key: YOUR_API_KEY"
const response = await fetch('https://tinyfn.io/v1/color/shade', {
  headers: { 'X-API-Key': 'YOUR_API_KEY' }
});
const data = await response.json();
console.log(data);
import requests

response = requests.get('https://tinyfn.io/v1/color/shade',
    headers={'X-API-Key': 'YOUR_API_KEY'})
data = response.json()
print(data)

Use via MCP

Add to your AI agent

Connect your AI agent (Claude, Cursor, Windsurf, etc.) to TinyFn's color tools:

{
  "mcpServers": {
    "tinyfn-color": {
      "url": "https://tinyfn.io/mcp/color",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Learn more about MCP setup →

Related Tools

Hex To Hsl
Convert hex color to HSL.
Hsl To Hex
Convert HSL to hex color.
Hex To Hsv
Convert hex color to HSV.
Hsv To Hex
Convert HSV to hex color.
Hex To Cmyk
Convert hex color to CMYK.
Cmyk To Hex
Convert CMYK to hex color.
Lighten Color
Lighten a color by a percentage.
Darken Color
Darken a color by a percentage.

FAQ

How do I generate multiple shades of a color for my design system?

Pass your base color and specify the number of shades needed. The tool returns progressively darker variations with consistent brightness steps, maintaining the original hue and saturation relationships.

What color formats does the shade generator accept as input?

Accepts hex (#FF5733), RGB (rgb(255,87,51)), HSL (hsl(9,100%,60%)), and named colors (red, blue). Output format matches your input format by default.

Can I use this MCP tool with Claude Code for automated color palette generation?

Yes, Claude Code can call this tool to generate shade variations programmatically. Perfect for creating consistent color schemes in CSS files or design tokens without manual color picking.

How does shade generation differ from tint generation?

Shades darken colors by reducing brightness/lightness, while tints lighten by adding white. Use shades for hover states, shadows, or depth effects in dark themes.

What happens if I try to generate shades of pure black?

Pure black (#000000) cannot be made darker, so the tool returns the original black for all requested shades. Consider starting with a dark gray instead for visible variations.

Try Generate Shades Now

Get your free API key and start using Generate Shades in seconds.

Get Free API Key