← Images & Color
Color Palette Generator
Generate harmonious color palettes from any base color. Everything runs locally in your browser.
Palette
Use this tool from AI agents
This tool's engine is available to AI agents over MCP as color_palette. Add the Clean.tools server, then your agent can call it directly.
Claude Code
claude mcp add --transport http clean-tools https://mcp.clean.tools/mcpclaude mcp add --transport http clean-tools https://mcp.clean.tools/mcpClaude Desktop (mcpServers)
{"mcpServers":{"clean-tools":{"command":"npx","args":["-y","@clean-tools/mcp"]}}}{"mcpServers":{"clean-tools":{"command":"npx","args":["-y","@clean-tools/mcp"]}}}Cursor
https://mcp.clean.tools/mcphttps://mcp.clean.tools/mcpOr call it over plain HTTP from any script. Same engine, JSON in and JSON out, no key:
curl
curl -s https://api.clean.tools/v1/color_palette \
-H 'content-type: application/json' \
-d '{"color":"#e11d48"}'curl -s https://api.clean.tools/v1/color_palette \
-H 'content-type: application/json' \
-d '{"color":"#e11d48"}'JavaScript
const res = await fetch("https://api.clean.tools/v1/color_palette", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({"color":"#e11d48"})
});
const data = await res.json();const res = await fetch("https://api.clean.tools/v1/color_palette", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({"color":"#e11d48"})
});
const data = await res.json();How it works
This color palette generator converts your base color to HSL, then rotates the hue and adjusts saturation and lightness to create harmonious palettes using standard color theory. Complementary colors sit opposite on the color wheel (180°), analogous colors are neighbors (±30°), triadic colors are evenly spaced at 120° intervals, and split-complementary pairs offset 150° and 210° from the base. If you want to generate palettes from scripts or AI agents instead of the page, the same engine is exposed as the color_palette API, or you can install the @clean-tools/mcp package from npm.
All color math runs entirely in your browser. No data is sent to a server. Click any swatch to copy its HEX value to your clipboard.
Frequently asked questions
Why does the base color appear unchanged in monochromatic and analogous palettes?
These palettes always keep your exact base color as the anchor and derive the other swatches around it. Monochromatic shifts only lightness (clamped between 5% and 95% so very dark or very light bases still produce visible steps), while analogous rotates the hue 30 degrees on either side but preserves your original saturation and lightness.
What color formats does the tool accept?
It reads 6-digit HEX values (with or without the leading #) and the native color picker. Shorthand 3-digit HEX like #f00 and named colors such as "red" are not supported, so type the full six characters. Generated swatch values are always full 6-digit HEX.
Are the generated HEX values exact matches to the color theory angles?
The math is exact in HSL, but converting back to 8-bit HEX rounds each channel to the nearest value, so a swatch may differ by one unit per channel from a floating-point ideal. This rounding is standard for screen color and keeps every value copy-paste ready for CSS.
Can I share or bookmark a palette?
Yes. The base color and palette type are stored in the page URL as you change them, so copying the link or bookmarking the page reproduces the exact palette. Use the Copy link button to grab the current state. Nothing is uploaded; the URL is built entirely in your browser.
Can I use this from the command line or an AI agent?
Yes. The generator is backed by a REST endpoint at https://api.clean.tools/v1/color_palette that takes a base color and returns the palette as JSON, so you can call it from curl or any script. It is also an MCP server you can add to Claude, Claude Code, or Cursor to let an agent build palettes for you. Installing the @clean-tools/mcp package from npm runs the same server locally over stdio.
More tools from Clean.tools
Use Clean.tools from your AI agent
This tool is also color_palette on the Clean.tools MCP server — the same engine, callable by your AI agent directly. No key, no signup: requests are processed in memory and request contents are never stored.
Claude Code
claude mcp add --scope user --transport http clean-tools https://mcp.clean.tools/mcpclaude mcp add --scope user --transport http clean-tools https://mcp.clean.tools/mcpAny MCP client (streamable HTTP, authless)
https://mcp.clean.tools/mcphttps://mcp.clean.tools/mcpEvery tool, the REST API, and setup for Cursor, Claude Desktop, VS Code & more →