Color Saturation API: Adjust Color Saturation Programmatically

Need to make colors more vibrant or create muted variations? This guide covers the Color Saturation API, which allows you to increase or decrease the saturation of any color, creating rich, vivid hues or subtle, desaturated tones.

What is Color Saturation?

Saturation is the intensity or purity of a color. In the HSL color model:

• 100% saturation: Pure, vivid color
• 50% saturation: Muted, pastel-like color
• 0% saturation: Gray (no color)

Adjusting saturation changes how vibrant or muted a color appears while maintaining its hue and lightness.

Saturation Effects

Different saturation levels create different moods:

• High saturation: Energetic, bold, attention-grabbing
• Medium saturation: Balanced, professional, easy on the eyes
• Low saturation: Calm, sophisticated, vintage feel

Using the Color Saturation API

TinyFn provides an endpoint for saturation adjustment:

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

{
  "original": {
    "hex": "#3498db",
    "hsl": { "h": 204, "s": 70, "l": 53 }
  },
  "result": {
    "hex": "#1a8cd8",
    "hsl": { "h": 204, "s": 80, "l": 47 }
  },
  "adjustment": "+10%"
}

Parameters

Code Examples

JavaScript / Node.js

// Increase saturation by 20%
const response = await fetch(
  'https://api.tinyfn.io/v1/color/saturate?' + new URLSearchParams({
    color: '#3498db',
    amount: 20
  }),
  { headers: { 'X-API-Key': 'your-api-key' } }
);
const result = await response.json();
console.log(result.result.hex); // More vibrant blue

// Desaturate by 30%
const muted = await fetch(
  'https://api.tinyfn.io/v1/color/saturate?' + new URLSearchParams({
    color: '#3498db',
    amount: -30
  }),
  { headers: { 'X-API-Key': 'your-api-key' } }
).then(r => r.json());
console.log(muted.result.hex); // More muted blue

Python

import requests

# Create a muted version
response = requests.get(
    'https://api.tinyfn.io/v1/color/saturate',
    params={
        'color': '#e74c3c',
        'amount': -40  # Desaturate
    },
    headers={'X-API-Key': 'your-api-key'}
)
result = response.json()
print(f"Original: {result['original']['hex']}")
print(f"Desaturated: {result['result']['hex']}")

cURL

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

Common Use Cases

• Brand Variations: Create muted versions of brand colors
• Hover States: Increase saturation on hover for visual feedback
• Disabled States: Desaturate colors for disabled UI elements
• Backgrounds: Create subtle, desaturated background colors
• Color Palettes: Generate variations with different saturation levels

Best Practices

1. Start subtle: Small adjustments (10-20%) often work best
2. Check contrast: Verify readability after saturation changes
3. Consider accessibility: High saturation can cause eye strain
4. Test on devices: Saturation may appear differently on various screens

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.