Color Utilities

Generate Tints

Creates lighter variations of any color by mixing with white in specified percentages. Use via MCP in Cursor or Windsurf for instant tint generation, or call GET /v1/color/tint with hex codes. Perfect for building color palettes — input #3498db at 20% tint returns #5dade6. Returns deterministic hex values for consistent UI theming.

API Endpoint

GET /v1/color/tint

Code Examples

curl "https://tinyfn.io/v1/color/tint" \
  -H "X-API-Key: YOUR_API_KEY"
const response = await fetch('https://tinyfn.io/v1/color/tint', {
  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/tint',
    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 multiple tint levels of a color?

Pass different tint percentages (10%, 20%, 50%, etc.) to create a full range. Higher percentages produce lighter colors by adding more white to the original.

What's the difference between tints, shades, and tones?

Tints add white (lighter), shades add black (darker), and tones add gray (muted). Use TinyFn's separate shade and tone tools for complete color variations.

Can I use tint generation in MCP for design workflows?

Yes, AI agents like Claude Code can generate tint palettes directly in your editor, perfect for CSS variable generation or design system creation without manual calculations.

What color formats does the tint tool accept?

Accepts hex codes (#3498db), RGB values, and most standard color formats. Always returns hex codes for consistent web development usage.

How accurate are the tint calculations compared to design tools?

Uses standard color theory math with deterministic algorithms, matching results from Photoshop, Figma, and other professional design tools for reliable color consistency.

Try Generate Tints Now

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

Get Free API Key