Color Blending API: Mix and Blend Colors

Need to mix colors for gradients, overlays, or smooth transitions? This guide covers the Color Blending API, which combines two colors using various blending modes and ratios, essential for creating professional color effects.

What is Color Blending?

Color blending combines two colors to create a new color. The simplest form is linear interpolation (mixing), but more complex modes like multiply, screen, and overlay create different effects:

• Mix 50%: Red + Blue = Purple (midpoint)
• Multiply: Darkens, like overlapping ink
• Screen: Lightens, like overlapping light

Blending Modes

The API supports multiple blending modes:

• Normal/Mix: Linear interpolation between colors
• Multiply: Darkens by multiplying values
• Screen: Lightens by inverting, multiplying, inverting
• Overlay: Combines multiply and screen
• Darken: Keeps the darker of each channel
• Lighten: Keeps the lighter of each channel

Using the Color Blending API

TinyFn provides a versatile endpoint for color blending:

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

{
  "color1": { "hex": "#3498db" },
  "color2": { "hex": "#e74c3c" },
  "result": {
    "hex": "#8472b8",
    "rgb": { "r": 132, "g": 114, "b": 184 }
  },
  "mode": "normal",
  "ratio": 0.5
}

Parameters

Code Examples

JavaScript / Node.js

// Create a 50-50 blend
const response = await fetch(
  'https://api.tinyfn.io/v1/color/blend?' + new URLSearchParams({
    color1: '#3498db',
    color2: '#e74c3c',
    ratio: 0.5,
    mode: 'normal'
  }),
  { headers: { 'X-API-Key': 'your-api-key' } }
);
const result = await response.json();
console.log(result.result.hex); // Blended color

// Create a multiply blend (shadow effect)
const shadow = await fetch(
  'https://api.tinyfn.io/v1/color/blend?' + new URLSearchParams({
    color1: '#3498db',
    color2: '#000000',
    mode: 'multiply'
  }),
  { headers: { 'X-API-Key': 'your-api-key' } }
).then(r => r.json());

Python

import requests

# Generate gradient steps
base = '#3498db'
target = '#e74c3c'
steps = 5

for i in range(steps + 1):
    ratio = i / steps
    response = requests.get(
        'https://api.tinyfn.io/v1/color/blend',
        params={'color1': base, 'color2': target, 'ratio': ratio},
        headers={'X-API-Key': 'your-api-key'}
    )
    result = response.json()
    print(f"Step {i}: {result['result']['hex']}")

cURL

curl "https://api.tinyfn.io/v1/color/blend?color1=%233498db&color2=%23e74c3c&ratio=0.3&mode=screen" \
  -H "X-API-Key: your-api-key"

Common Use Cases

• Gradient Generation: Create smooth color gradients
• Hover Effects: Blend toward a tint/shade on hover
• Overlays: Calculate overlay colors for images
• Theme Generation: Create color variants from base
• Color Correction: Adjust colors toward a target

Best Practices

1. Use appropriate mode: Normal for simple mixing, multiply/screen for effects
2. Generate multiple steps: For gradients, generate intermediate colors
3. Test perceptually: Linear blending may not look perceptually uniform
4. Consider color space: Blending in HSL vs RGB gives different results

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.