Color Utilities

Generate Gradient

Generates smooth color gradients between two specified colors with configurable steps. Access via MCP in Cursor or Windsurf, or call GET /v1/color/gradient directly. Returns RGB hex values for each gradient step — perfect for creating color palettes or smooth transitions. Supports any valid color format as input.

API Endpoint

GET /v1/color/gradient

Code Examples

curl "https://tinyfn.io/v1/color/gradient" \
  -H "X-API-Key: YOUR_API_KEY"
const response = await fetch('https://tinyfn.io/v1/color/gradient', {
  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/gradient',
    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 a gradient between two colors using MCP?

Call the generate_gradient tool with start_color, end_color, and steps parameters. It accepts hex (#FF0000), RGB (255,0,0), or named colors (red) and returns an array of hex color values.

What's the maximum number of gradient steps I can generate?

Most implementations support up to 100 steps, though the exact limit depends on your MCP client. For web applications, 10-50 steps usually provide smooth visual transitions.

Can I create gradients with transparency or alpha channels?

The tool generates RGB gradients without alpha channels. For RGBA gradients with transparency, you'll need to interpolate alpha values separately or use a different approach.

How does the color interpolation work mathematically?

Uses linear interpolation in RGB color space, calculating intermediate values for each RGB component. This creates perceptually uniform steps but may appear darker in the middle compared to HSL interpolation.

What color formats can I use as input for the gradient endpoints?

Accepts hex codes (#FF0000, #f00), RGB values (255,0,0), HSL notation, and standard CSS color names like 'red', 'blue', or 'forestgreen'.

Try Generate Gradient Now

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

Get Free API Key