Tetradic color scheme generator
Enter #e74c3c and get four colors forming two opposite pairs: the red with cyan #3cd7e7, and lime #d7e73c with its own opposite, at 0, 60, 180 and 240 degrees on the color wheel. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Hex
- #e74c3c
- Input hex
- #e74c3c
- Hexes
- #e74c3c, #d7e73c, #3cd7e7, #4c3ce7
- Hues
- 5.614035, 65.614035, 185.614035, 245.614035
- Offsets
- 0, 60, 180, 240
This tetradic color scheme generator builds a four-color rectangle palette from a single CSS hex code. You enter a base color such as #e74c3c or the short form #f00; the engine converts it to HSL, keeps saturation and lightness fixed, and rotates the hue in four deterministic steps at zero, sixty, one hundred eighty, and two hundred forty degrees. Those offsets place two complementary pairs on the color wheel so the four swatches form a classic tetradic rectangle, not a random mood board.
What a rectangle color scheme is and what you get
A tetradic color scheme, also called a rectangular harmony, uses four hues arranged as two complementary pairs on the color wheel. Starting from your base hue h, this generator places colors at h plus zero degrees, h plus sixty degrees, h plus one hundred eighty degrees, and h plus two hundred forty degrees, then rebuilds each color with the original saturation and lightness. That sixty-degree separation between pairs creates a rectangle rather than a square (which would use ninety-degree steps).
Complement pairs sit opposite each other, so the palette balances warm and cool pressure while staying tied to the brand color you typed.
How hex input is read and how the four hues stay reproducible
Values may include or omit the leading hash and may use the short three-digit form such as f00, which expands digit-wise to ff0000 before any conversion. Digits are case-insensitive and always normalized to lowercase six-digit output so goldens and CSS variables stay stable across runs. After parsing, channels convert to HSL with standard sRGB formulas; hue is taken in degrees on the circle from zero to three hundred sixty, while saturation and lightness remain unit fractions that never change across the four steps.
Each offset is applied with positive modulo so negative intermediate values cannot leak, then HSL converts back to integer RGB with channel clamping and two lowercase hex digits per channel.
Where tetradic palettes fit in product, brand, and UI work
Designers reach for tetradic schemes when a brand needs more than a single accent yet must stay harmonious: marketing sites, multi-series charts, dashboard status colors, and illustration systems often need four related hues that still feel intentional. Product teams use the rectangle layout to derive hover, focus, chart, and call-to-action colors from one corporate hex without inventing ad-hoc hex codes in a spreadsheet. Educators and design students use it to demonstrate complementary pairs and hue geometry without opaque desktop apps that change algorithms between versions.
Pair it with contrast checkers when accessibility is next, and with RGB or HSL converters when you need intermediate formats for other tools in your stack.
What you can do with it
Brand and marketing palettes
Expand one corporate hex into four rectangle-harmony colors for campaigns, illustration sets, and multi-accent landing pages.
Charts and dashboard accents
Derive four related series colors from a base brand hue so multi-line charts stay balanced without hand-picked hex noise.
FAQ
What does the tetradic color scheme generator cost?
It is free in your browser on this page.
How are the four hues chosen?
From the base hue h, colors are placed at h+0°, h+60°, h+180°, and h+240° with the same saturation and lightness. That is the classic rectangle (tetradic) layout: two complementary pairs separated by 60°.
What hex formats are accepted?
Three-digit and six-digit CSS hex codes, with or without a leading # (for example #e74c3c, e74c3c, #f00, or f00).
Is this the same as a square color scheme?
No. A square scheme uses 90° steps. This generator uses the rectangle offsets 0/60/180/240 so the pairs form a non-square rectangle on the wheel.
Does the tool pick colors from an image?
No. It only rotates the hue of the hex you provide. For dominant colors from photos, use an image palette extractor instead.
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/tetradic \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#e74c3c"}'const res = await fetch("https://api.kit.forhosting.com/color/tetradic", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#e74c3c"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/tetradic",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#e74c3c"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/tetradic", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#e74c3c"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#e74c3c"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/tetradic", 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": "#e74c3c"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.tetradic",
"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
hex_max_len | 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
Every successful response returns the normalized input hex, four detailed swatches with hex, RGB, and HSL, plus flat hexes and hues arrays for design tokens and CSS variables.
What a tetradic (rectangle) scheme is and what the response contains
The response includes input_hex as the normalized six-digit form, a base object for the first swatch, a colors array of four objects each with hex, r, g, b, h, s, l, hue_offset, rgb, and hsl strings, plus hexes and hues convenience arrays, the offsets list, scheme set to tetradic, method hue_rotate_rectangle, and a short formula reminder. There is no generative model and no image sampling: the engine either builds four exact swatches from a valid hex or rejects the request with invalid_input. Rejected cases include missing hex, non-string values, tokens longer than seven characters, and any string that is not three or six hex digits with an optional leading hash.
How hex input is read and how the four hues stay reproducible
The preferred field is hex, but aliases color, base, and input are accepted so forms, query strings, and design-tool exports can reuse the same contract without renaming columns. Optional floating-point fields such as h, s, and l are rounded to a fixed number of decimals so JSON comparisons do not drift on different JavaScript engines. Pair the free browser run on this page with the priced API when you need the identical palette inside an automated pipeline, a theme package publish step, or a multi-tenant white-label configurator that must not silently change hues between deploys.
Where tetradic palettes fit in product, brand, and UI work
On this page the work runs entirely in your browser; through the API each successful lookup costs $0.002, failed validation is not charged, and nothing is stored after the response returns. That split — free interactive exploration and a priced, identical API — matches the rest of the KIT tier-A catalog and lets you move from a Figma exploration to a production theme file without changing the mathematical result.
Integration use cases
Design tokens and CSS themes
Generate reproducible hexes and hues arrays for CSS variables, Tailwind maps, and design-token JSON checked into git.