Color Shade Generator API: Create Darker Color Variations

Need darker versions of your brand colors for hover states, shadows, or dark mode? This guide covers the Color Shade Generator API, which creates darker variations of any color while maintaining its hue for consistent design systems.

What are Color Shades?

A shade is a color mixed with black, making it darker. Unlike simply reducing brightness, properly generated shades maintain the color's character while darkening it:

• Original: #3498db (bright blue)
• 10% shade: Slightly darker
• 50% shade: Significantly darker
• 100% shade: Black

Shade Generation Methods

The API can generate shades using different methods:

• HSL lightness: Reduces the L value in HSL
• Black mixing: Blends with black
• RGB scaling: Multiplies RGB values

Using the Color Shade API

TinyFn provides an endpoint for shade generation:

GET https://api.tinyfn.io/v1/color/shade
Headers: X-API-Key: your-api-key

{
  "original": {
    "hex": "#3498db",
    "hsl": { "h": 204, "s": 70, "l": 53 }
  },
  "shades": [
    { "hex": "#3498db", "percent": 0, "hsl": { "h": 204, "s": 70, "l": 53 } },
    { "hex": "#2980b9", "percent": 10, "hsl": { "h": 204, "s": 70, "l": 48 } },
    { "hex": "#1f6691", "percent": 25, "hsl": { "h": 204, "s": 70, "l": 40 } },
    { "hex": "#154d6d", "percent": 50, "hsl": { "h": 204, "s": 70, "l": 27 } },
    { "hex": "#0a2736", "percent": 75, "hsl": { "h": 204, "s": 70, "l": 13 } }
  ]
}

Parameters

Code Examples

JavaScript / Node.js

// Generate a shade palette
const response = await fetch(
  'https://api.tinyfn.io/v1/color/shade?' + new URLSearchParams({
    color: '#3498db',
    count: 5
  }),
  { headers: { 'X-API-Key': 'your-api-key' } }
);
const result = await response.json();

// Use for CSS variables
result.shades.forEach((shade, i) => {
  console.log(`--color-shade-${i}: ${shade.hex};`);
});

// Get a single specific shade
const hover = await fetch(
  'https://api.tinyfn.io/v1/color/shade?' + new URLSearchParams({
    color: '#3498db',
    amount: 15  // 15% darker for hover
  }),
  { headers: { 'X-API-Key': 'your-api-key' } }
).then(r => r.json());

Python

import requests

response = requests.get(
    'https://api.tinyfn.io/v1/color/shade',
    params={'color': '#e74c3c', 'count': 7},
    headers={'X-API-Key': 'your-api-key'}
)
result = response.json()

print(f"Shades for {result['original']['hex']}:")
for shade in result['shades']:
    print(f"  {shade['percent']}%: {shade['hex']}")

cURL

curl "https://api.tinyfn.io/v1/color/shade?color=%233498db&amount=20" \
  -H "X-API-Key: your-api-key"

Common Use Cases

• Button States: Darker shades for hover and active states
• Shadows: Create color-matched shadows
• Dark Mode: Generate darker palette variations
• Design Systems: Build comprehensive color scales
• Focus States: Create visible focus indicators

Best Practices

1. Use small increments: 10-20% shades work well for interactive states
2. Maintain contrast: Ensure shaded colors still meet accessibility standards
3. Be consistent: Use the same shade percentages across your design system
4. Combine with tints: Generate both shades and tints for complete scales

Use via MCP

Your AI agent can call this tool directly via Model Context Protocol — no HTTP code needed. Add TinyFn to Claude Desktop, Cursor, or any MCP client:

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

See all color tools available via MCP in our Color MCP Tools for AI Agents guide.