Triadic color scheme generator
Enter #3498db and get its triadic partners #db3498 and #98db34, three hues set 120 degrees apart so none dominates. Saturation and lightness stay as you typed them, and short codes like #abc work too. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Hex
- #3498db
- Input hex
- #3498db
- Hex raw
- #3498db
- Base rgb
- 52, 152, 219
- Step deg
- 120
A triadic color scheme generator turns one hex color into a three-color palette by walking the color wheel in equal one-hundred-twenty-degree steps. Enter a base code such as #3498db or the short form #abc; the tool converts the color to hue, saturation, and lightness, keeps saturation and lightness fixed, and produces three members at hue offsets of zero, plus one hundred twenty, and plus two hundred forty degrees. You receive normalized hex values, RGB channels, HSL breakdowns, a scheme array, and step-by-step rotation lines you can assert in tests or drop into a design token file. Brand teams balancing bold secondary accents, front-end developers scaffolding theme tokens, and students learning color harmony all need that same deterministic triadic map without opening a full design suite.
What a triadic scheme is and why 120° spacing works
Triadic harmony places three hues at the vertices of an equilateral triangle on the hue circle: each color sits one hundred twenty degrees from the next, so no single hue dominates while all three remain equally spaced. Design systems use this structure when a brand needs one primary identity color plus two supporting accents that still feel related rather than randomly chosen.
The generator implements the classic model in HSL space: convert the input hex to red, green, and blue integers, map those channels to hue in degrees and saturation and lightness as fractions, then emit three colors that share the original saturation and lightness while their hues sit at the base angle, base plus one hundred twenty, and base plus two hundred forty, each wrapped into the half-open range from zero through three hundred sixty.
Keeping saturation and lightness fixed is intentional—triadic search intent is about balanced hue rotation, not about inventing new value or chroma ramps—so a pastel blue yields pastel companions and a saturated red yields saturated companions. When the input is near gray, saturation is near zero and all three hex values may look similar; that is correct physics, not a bug, because achromatic colors have no meaningful hue to rotate.
Teachers often pair this tool with complementary (one hundred eighty degree) and analogous (small adjacent steps) lessons so students see how spacing on the wheel changes visual tension. The response always lists roles primary, secondary, and tertiary so documentation and CSS custom properties can map cleanly to --color-primary, --color-secondary, and --color-tertiary without reordering by hand.
Practical tips, limits, and related searches
Start from the brand or UI color you already trust rather than from an arbitrary wheel pick; the primary member is the input hue at offset zero after HSL round-trip, which may differ by a single channel unit from the original hex because RGB to HSL to RGB is quantized to eight-bit channels. Do not pass alpha forms such as #RRGGBBAA—this landing targets opaque classic hex only so invalid lengths surface immediately.
Named CSS colors like tomato are out of scope; resolve them to hex first or use a named-color table. Prefer this capability when you need exactly three equally spaced hues from one hex token; if you only need channel split without harmony, use a hex-to-RGB converter instead.
What you can do with it
Brand accent triad from a primary hex
Marketing and brand teams enter a logo primary and receive two supporting accents at 120° and 240° for secondary buttons, charts, and campaign layouts.
Theme token scaffolding for apps
Front-end developers generate primary, secondary, and tertiary CSS custom properties from a single design-token hex for light or dark UI kits.
Classroom color-harmony exercises
Students check hand-drawn wheel triangles against deterministic HSL rotations and assert scheme arrays in homework or coding kata tests.
FAQ
What is a triadic color scheme?
Three colors equally spaced on the hue circle—120° apart—so they form an equilateral triangle. This tool keeps saturation and lightness fixed and rotates only the hue.
What input format do you accept?
Classic hex: three or six hexadecimal digits with an optional leading # (for example #3498db, 3498db, or #abc).
Why might the primary hex differ slightly from my input?
The primary is the input after RGB→HSL→RGB with eight-bit channel rounding. Most colors round-trip exactly; a few edge hues may shift by one channel unit.
Does this generate complementary or tetradic palettes?
No. It only produces the three-member triadic set at 0°, +120°, and +240°. Complementary (180°) and tetradic schemes are different tools.
Is the triadic color scheme generator free?
The browser tool is free and runs locally.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/color/triadic \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#3498db"}'const res = await fetch("https://api.kit.forhosting.com/color/triadic", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#3498db"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/triadic",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#3498db"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/triadic", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#3498db"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#3498db"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/triadic", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"hex": "#3498db"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.triadic",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Limits
max_hex_chars | 7 |
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
Invalid hex—wrong length, non-hex characters, empty input, or a programming 0x prefix—fails with a clear invalid_input error instead of inventing a palette.
How to call the API and what comes back
Valid examples include #3498db, 3498db, #E74C3C, and abc; surrounding whitespace is trimmed, letters may be upper or lower case, and the hash is optional. Send a JSON body with one required string field named hex—aliases color, value, text, input, and code are accepted by the same solver. On success the response returns input_hex as a normalized lowercase six-digit #rrggbb string, base_rgb and base_hsl for the source color, step_deg equal to one hundred twenty, a scheme array of three hex strings, a colors array of rich member objects each with role, offset_deg, hue, hex, rgb, css, and hsl, plus convenience fields primary, secondary, and tertiary that mirror the three hex values, a short English message, and a steps array documenting normalization, HSL conversion, and each rotation. Failed validation—missing field, empty string after the hash, length other than three or six, non-hex characters, spaces inside the body, a 0x programming prefix, or a bare number instead of a string—returns invalid_input and is never charged. Pricing is a flat $0.002 per successful request with unit item and zero marginal unit price.
Practical tips, limits, and related searches
Failed tasks that return invalid_input do not consume prepaid balance, which keeps exploratory design scripts and form validation cheap while learners paste imperfect clipboard values.