Evenly spaced hue palette
Five colors from a base hue of 200° land 72° apart, starting with #269dd9 and ending with #26d93e. Saturation and lightness stay fixed, so no part of the wheel dominates your chart or legend. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Hue
- 200
- Quantity
- 5
- Saturation
- 70
- Lightness
- 50
- Step deg
- 72
- Scheme
- #269dd9, #8526d9, #d92656, #d9cd26, #26d93e
- Hues
- 200, 272, 344, 56, 128
An evenly spaced hue palette generator places N colors at equal angular steps around the color wheel, starting from a base hue you choose while holding saturation and lightness constant. Enter a starting hue in degrees, a count from two through thirty-six, and the saturation and lightness percents that should stay the same for every swatch; the tool computes step size as three hundred sixty divided by N, wraps each successive hue into the half-open range from zero through three hundred sixty, converts each HSL triple to sRGB and lowercase hex, and returns a scheme array, a hues list, and rich per-color objects with RGB, CSS, and HSL breakdowns. Brand teams scaffolding multi-stop chart series, front-end developers building theme tokens for dashboards, and design students studying equal hue spacing all need that same deterministic map without opening a full design suite.
What an evenly spaced hue palette is and why equal steps matter
Equal angular spacing on the hue circle is the classic way to build a multi-color series that does not favor any single sector of the wheel. Complementary schemes use one hundred eighty degrees, triadic schemes use one hundred twenty, tetradic schemes use ninety; this capability generalizes that idea to any integer N from two through thirty-six by setting the step to three hundred sixty divided by N and walking from your base hue.
Saturation and lightness stay fixed on purpose: the search intent for an evenly spaced hue palette is about balanced hue rotation, not about inventing value or chroma ramps, so a vivid mid-lightness start yields vivid mid-lightness companions and a pastel start yields pastel companions. When saturation is zero, every member collapses toward gray because achromatic colors have no meaningful hue to rotate; that is correct color physics, not a bug.
Teachers often pair this tool with fixed-scheme generators so students see how changing N changes visual tension and how the same base hue can feed a five-stop chart series or a twelve-stop qualitative map. Design systems use this structure when a product needs a categorical palette that scales with series count rather than hard-coding three or four brand accents.
Practical tips, limits, and related searches
Start from the brand or UI hue you already trust rather than from an arbitrary wheel pick; the first member is always the base hue at offset zero after wrap, so index zero is your identity color in HSL terms. Prefer integer counts that match your chart series or legend size; five stops give seventy-two degree steps, six give sixty, eight give forty-five, and twelve give thirty.
Keep saturation and lightness inside the ranges your accessibility pipeline already validates—equal hue spacing does not guarantee WCAG contrast against a fixed background, so pair this palette with a contrast checker when text sits on solid fills. Do not expect complementary-only or triadic-only output from this landing: those fixed schemes are separate tools with their own SEO intent; use this capability when N is a parameter you control.
Named CSS colors and hex strings are out of scope here; convert them to hue, saturation, and lightness first if you start from a token hex. When writing tests, cover at least one vivid multi-stop case, one count of two (one-hundred-eighty-degree split), one near-gray saturation, and one deliberate invalid count so both spacing math and validation stay locked.
This page targets people searching for an evenly spaced hue palette, equal hue wheel generator, or free N-color color-wheel tool online; it is not an image palette extractor and not a full multi-space converter.
What you can do with it
Categorical chart and dashboard series
Data teams pick a brand base hue and N series count, then drop the scheme hex list into chart libraries for evenly spaced categorical colors.
Design-token scaffolding for themes
Front-end developers generate N CSS custom properties from one base hue with fixed saturation and lightness for multi-accent UI kits.
FAQ
What is an evenly spaced hue palette?
N colors placed at equal angular steps around the hue circle.
What inputs are required?
Four numbers: hue (degrees, wrapped into [0, 360)), count (integer 2–36), saturation (0–100%), and lightness (0–100%).
Is the evenly spaced hue palette tool free?
The browser tool is free and runs locally.
How far apart are the colors in an evenly spaced palette?
The step is 360 degrees divided by the number of colors. Five colors give 72° steps, so a base hue of 200° continues to 272°, 344°, 56° and 128°, wrapping back around the wheel.
Why does every color in my palette come out gray?
Saturation is set to 0. A color without saturation has no hue to rotate, so every swatch collapses toward the same gray. Raise the saturation, for example to 70 %, and the hues separate again.
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/hue-wheel \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":200,"count":5,"saturation":70,"lightness":50}'const res = await fetch("https://api.kit.forhosting.com/color/hue-wheel", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 200,
"count": 5,
"saturation": 70,
"lightness": 50
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hue-wheel",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 200,
"count": 5,
"saturation": 70,
"lightness": 50
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hue-wheel", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":200,"count":5,"saturation":70,"lightness":50}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":200,"count":5,"saturation":70,"lightness":50}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hue-wheel", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"hue": 200,
"count": 5,
"saturation": 70,
"lightness": 50
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hue_wheel",
"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.
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 input—missing fields, non-integer count, count outside the allowed range, saturation or lightness outside zero through one hundred—fails with a clear invalid_input error instead of inventing a palette.
What an evenly spaced hue palette is and why equal steps matter
The response always indexes members from zero and reports offset_deg and hue so documentation, design tokens, and automated tests can assert exact wheel positions without reordering by hand.
How to call the API and what comes back
Send a JSON body with four required finite numbers: hue as the base angle in degrees (any finite value is accepted and wrapped into the half-open interval from zero through three hundred sixty), count as an integer from two through thirty-six, saturation as a percent in zero through one hundred, and lightness as a percent in zero through one hundred. Numeric strings are accepted the same way as JSON numbers. On success the response returns the normalized hue, the echoed count, rounded saturation and lightness, step_deg equal to three hundred sixty divided by count with fixed decimal rounding, a scheme array of lowercase #rrggbb strings in walk order, a hues array of the member angles, a colors array of rich objects each with index, offset_deg, hue, hex, hex6, r, g, b, rgb, css, and hsl, plus a short English message and a steps array documenting normalization, the step size, and every conversion. Failed validation—missing field, non-finite value, non-integer count, count outside two through thirty-six, or saturation or lightness outside zero through one hundred—returns invalid_input and is never charged. Pricing is a flat $0.002 per successful request with unit item.
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 values.
Integration use cases
Classroom color-wheel exercises
Students compare hand-drawn equal sectors against deterministic step_deg and assert hues arrays in homework or coding kata tests.
Technical questions
How is the step size computed?
step_deg = 360 / count with stable decimal rounding. Member i uses hue wrap(base + i × step_deg).
Is this the same as triadic or complementary schemes?
Those are fixed special cases (N=3 at 120°, N=2 at 180°). This capability generalizes to any allowed N you choose.