Building an AI design assistant? Your agent needs accurate color tools. LLMs frequently hallucinate color conversions, miscalculate contrast ratios, and generate inaccessible palettes. This guide shows you how to equip your AI agent with deterministic color tools via Model Context Protocol (MCP).
Why AI Agents Fail at Colors
Ask any LLM to convert #FF5733 to RGB, and you might get the right answer. Or you might not. The problem is consistency and reliability. In design workflows, incorrect color values cause real problems:
- Brand inconsistency: Slightly wrong hex values break brand guidelines
- Accessibility failures: Miscalculated contrast ratios lead to WCAG violations
- Broken implementations: Invalid color values crash rendering engines
- Time waste: Designers must verify every AI-generated color
Hex/RGB Conversion Tools
Color format conversion is fundamental to design work. Your agent needs to reliably convert between hex, RGB, HSL, and other formats.
Hex to RGB Conversion
Tool: color/hex-to-rgb
Input: { "hex": "#FF5733" }
Result: {
"rgb": { "r": 255, "g": 87, "b": 51 },
"css": "rgb(255, 87, 51)"
}RGB to Hex Conversion
Tool: color/rgb-to-hex
Input: { "r": 255, "g": 87, "b": 51 }
Result: {
"hex": "#FF5733"
}With TinyFn MCP, your agent gets exact conversions every time. No rounding errors, no format mistakes.
Color Contrast Checking
Contrast ratio calculation is where LLMs fail most dramatically. The formula involves relative luminance calculations that LLMs cannot reliably compute:
Tool: color/contrast-ratio
Input: {
"foreground": "#FFFFFF",
"background": "#3B82F6"
}
Result: {
"ratio": 4.52,
"wcag_aa_normal": true,
"wcag_aa_large": true,
"wcag_aaa_normal": false,
"wcag_aaa_large": true
}Why This Matters
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA level). A ratio of 4.52 passes, but 4.48 fails. LLMs often approximate these calculations, leading to designs that fail accessibility audits.
| WCAG Level | Normal Text | Large Text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Palette Generation
AI design agents often need to generate color palettes from a base color. TinyFn provides deterministic palette tools:
Complementary Colors
Tool: color/complementary
Input: { "hex": "#3B82F6" }
Result: {
"original": "#3B82F6",
"complementary": "#F6A93B"
}Color Gradients
Tool: color/gradient
Input: {
"start": "#3B82F6",
"end": "#10B981",
"steps": 5
}
Result: {
"colors": ["#3B82F6", "#2E94C4", "#22A792", "#15B98F", "#10B981"]
}Lighten and Darken
Tool: color/lighten
Input: { "hex": "#3B82F6", "amount": 20 }
Result: {
"original": "#3B82F6",
"lightened": "#6BA3F8"
}
Tool: color/darken
Input: { "hex": "#3B82F6", "amount": 20 }
Result: {
"original": "#3B82F6",
"darkened": "#2563C4"
}Accessibility Compliance
When building design agents for professional use, accessibility compliance is non-negotiable. Here's how to build an agent workflow that ensures WCAG compliance:
User: "I want to use #3B82F6 as my primary button color.
What text color should I use?"
Agent thinking:
1. Check contrast with white text
2. Check contrast with black text
3. Recommend the accessible option
Tool calls:
- color/contrast-ratio { "foreground": "#FFFFFF", "background": "#3B82F6" }
Result: { "ratio": 4.52, "wcag_aa_normal": true }
- color/contrast-ratio { "foreground": "#000000", "background": "#3B82F6" }
Result: { "ratio": 4.65, "wcag_aa_normal": true }
Agent response:
"Both white and black text pass WCAG AA on #3B82F6.
White (#FFFFFF) has a 4.52:1 ratio and black (#000000) has 4.65:1.
I recommend white text for a modern look, or black for maximum readability."MCP Setup for Color Tools
Adding TinyFn color tools to your AI agent takes just a few lines of configuration:
{
"mcpServers": {
"tinyfn-color": {
"url": "https://api.tinyfn.io/mcp/color",
"headers": {
"X-API-Key": "your-api-key"
}
}
}
}Or include all TinyFn tools:
{
"mcpServers": {
"tinyfn": {
"url": "https://api.tinyfn.io/mcp/all/",
"headers": {
"X-API-Key": "your-api-key"
}
}
}
}Available Color Tools
| Tool | Description |
|---|---|
color/hex-to-rgb |
Convert hex color to RGB values |
color/rgb-to-hex |
Convert RGB values to hex color |
color/contrast-ratio |
Calculate WCAG contrast ratio |
color/lighten |
Lighten a color by percentage |
color/darken |
Darken a color by percentage |
color/complementary |
Find complementary color |
color/gradient |
Generate color gradient steps |
Agent Workflow Examples
Design System Creation
User: "Create a color palette based on #6366F1 for my app"
Agent uses:
- color/lighten (20%, 40%, 60%) for light variants
- color/darken (20%, 40%) for dark variants
- color/complementary for accent color
- color/contrast-ratio to verify all text combinations
Result:
Primary: #6366F1
Primary Light: #818CF8, #A5B4FC, #C7D2FE
Primary Dark: #4F46E5, #4338CA
Accent: #F1E663
All combinations verified for WCAG AA compliance.Accessibility Audit
User: "Check if my color scheme is accessible:
Background: #1F2937
Text: #9CA3AF
Links: #60A5FA"
Agent uses:
- color/contrast-ratio for text on background
- color/contrast-ratio for links on background
Result:
Text (#9CA3AF) on background (#1F2937): 4.23:1
- Fails WCAG AA for normal text (needs 4.5:1)
- Passes WCAG AA for large text (needs 3:1)
Links (#60A5FA) on background (#1F2937): 5.89:1
- Passes WCAG AA and AAA for large text
Recommendation: Lighten text color to #D1D5DB (7.12:1) for full compliance.Add Color Tools to Your AI Agent
Get your free API key and give your design agent accurate color capabilities.
Get Free API Key