Color Utilities

Blend Colors

Mathematically blends two colors using linear interpolation in RGB space. Call via MCP in Cursor or Windsurf, or REST at GET /v1/color/blend with color1, color2, and ratio parameters. Example: blending #FF0000 (red) with #0000FF (blue) at 50% ratio yields #800080 (purple). Returns precise hex values for consistent color mixing.

API Endpoint

GET /v1/color/blend

Code Examples

curl "https://tinyfn.io/v1/color/blend" \
  -H "X-API-Key: YOUR_API_KEY"
const response = await fetch('https://tinyfn.io/v1/color/blend', {
  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/blend',
    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 does color blending work mathematically?

Uses linear interpolation in RGB space. Each RGB channel is calculated as: channel1 * (1 - ratio) + channel2 * ratio, then converted back to hex format.

What color formats are supported for blending?

Accepts hex colors (#FF0000, #f00), RGB values (rgb(255,0,0)), and named colors (red, blue). Always returns hex format for consistency.

Can I use this in Claude Code for design workflows?

Yes, the MCP tool integrates directly. Useful for generating color palettes, creating gradients, or finding midpoint colors between brand colors in design systems.

What happens with 0% and 100% blend ratios?

0% returns the first color unchanged, 100% returns the second color unchanged. Use 50% for exact middle blending between colors.

Does blending work differently than CSS color-mix?

Similar results for simple blending, but this tool uses pure RGB interpolation while CSS color-mix supports multiple color spaces (sRGB, HSL, LCH).

Try Blend Colors Now

Get your free API key and start using Blend Colors in seconds.

Get Free API Key