Tetradic Colors API: Generate Four-Color Schemes

Need a rich, diverse color palette? This guide covers the Tetradic Colors API, which generates four-color schemes using two complementary pairs, creating visually rich palettes with maximum color variety while maintaining harmony.

What are Tetradic Colors?

Tetradic (or rectangular) color schemes use four colors arranged in two complementary pairs. On the color wheel, these form a rectangle. This provides the richest color variety of any harmony scheme:

• Base color: Your starting color
• Complement: 180 degrees opposite
• Third color: 60 or 90 degrees from base
• Fourth color: Complement of third

Types of Tetradic Schemes

There are two main tetradic arrangements:

• Rectangular (60/90): Pairs are 60 or 90 degrees apart - more variety
• Square (90): All colors are 90 degrees apart - maximum contrast

Using the Tetradic Colors API

TinyFn provides an endpoint for generating tetradic color schemes:

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

{
  "base": {
    "hex": "#3498db",
    "hsl": { "h": 204, "s": 70, "l": 53 }
  },
  "tetradic": [
    { "hex": "#3498db", "hsl": { "h": 204, "s": 70, "l": 53 }, "rotation": 0 },
    { "hex": "#db8134", "hsl": { "h": 24, "s": 70, "l": 53 }, "rotation": 180 },
    { "hex": "#db34a1", "hsl": { "h": 294, "s": 70, "l": 53 }, "rotation": 90 },
    { "hex": "#34db6d", "hsl": { "h": 114, "s": 70, "l": 53 }, "rotation": 270 }
  ],
  "type": "square"
}

Parameters

Code Examples

JavaScript / Node.js

// Get square tetradic scheme
const response = await fetch(
  'https://api.tinyfn.io/v1/color/tetradic?' + new URLSearchParams({
    color: '#3498db',
    type: 'square'
  }),
  { headers: { 'X-API-Key': 'your-api-key' } }
);
const result = await response.json();

// Display all four colors
result.tetradic.forEach((color, i) => {
  console.log(`Color ${i + 1}: ${color.hex}`);
});

Python

import requests

# Get rectangular tetradic scheme
response = requests.get(
    'https://api.tinyfn.io/v1/color/tetradic',
    params={'color': '#e74c3c', 'type': 'rectangular'},
    headers={'X-API-Key': 'your-api-key'}
)
result = response.json()

print(f"Tetradic scheme for {result['base']['hex']}:")
for color in result['tetradic']:
    print(f"  {color['hex']} (rotation: {color['rotation']})")

cURL

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

Common Use Cases

• Complex UI Design: When you need four distinct colors
• Data Visualization: Distinguish four data categories
• Branding: Create rich, multi-color brand systems
• Game Design: Color-code four teams or elements
• Seasonal Themes: Create festive color combinations

Best Practices

1. Establish hierarchy: Pick one dominant color (60%), let others support
2. Vary saturation: Adjust saturation levels to reduce visual competition
3. Use neutrals: Add white, black, or gray to give the eye rest
4. Test extensively: Tetradic schemes need careful balancing

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.