Monochromatic palette generator
Five steps from #3366cc give #000000, #193366, #3366cc, #99b2e6 and #ffffff, every swatch keeping hue 220 and saturation 60 %. Keep a brand blue truly blue from deep surfaces to pale backgrounds. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Color
- #3366cc
- Quantity
- 5
- Hue
- 220
- Saturation
- 60
- Lightness base
- 50
A monochromatic palette generator takes one CSS hex color and an integer step count, then returns N swatches that share the same hue and the same saturation while lightness walks in even increments from black to white. Designers reach for this classic one-hue harmony when a brand navy must stay navy from deep surfaces to pale backgrounds, without drifting toward a neighboring hue the way an analogous scheme would. The tool converts hex to HSL, keeps H and S fixed, and places lightness at i times one hundred divided by N minus one, so five steps land at zero, twenty-five, fifty, seventy-five, and one hundred percent.
How a monochromatic palette steps lightness
Start with a CSS hex color such as #3366cc or the short form #36c. The parser trims whitespace, lowercases the digits, expands three-digit codes with the standard CSS doubling rule, and converts each pair into red, green, and blue integers from zero to two hundred fifty-five.
Those channels map to hue, saturation, and lightness with the usual CSS and W3C formulas: lightness is the average of the maximum and minimum channel fractions, saturation depends on that lightness, and hue is measured in degrees around the color wheel, with achromatic grays reporting hue zero. A monochromatic scheme does not rotate hue and does not mix toward black or white in RGB; it varies only the lightness percentage while hue and saturation remain exactly the values of the base color.
For step index i from zero through N minus one, lightness is i times one hundred divided by N minus one, so the first swatch is always pure black at lightness zero, the last swatch is always pure white at lightness one hundred, and the intermediate stops are equally spaced in HSL lightness. After each new lightness is known, the same CSS hue-to-rgb path converts HSL back to integer channels and a six-digit lowercase hex code.
Five steps on a mid-lightness blue therefore yield black, a deep navy, a mid tone near the original, a pale sky, and white — all still carrying the original hue and saturation. There are no random seeds, wall-clock timestamps, or network calls, so the same inputs always yield the same ordered palette. Alpha hex forms with four or eight digits are rejected because this contract is opaque RGB only.
Non-integer steps or values outside two through twenty-one fail validation so clients cannot silently overshoot the allowed range.
What you send and what you get back
Send two fields: color as a hex string and steps as an integer between two and twenty-one inclusive. Each palette swatch includes index, hex, integer r g b, hue saturation lightness numbers, and printable rgb and hsl strings. The original color is always returned as base so clients can display the seed next to the ramp; that seed appears inside swatches only when its lightness lands exactly on an even stop, for example lightness fifty with five steps.
Typical checks include five steps on #3366cc, three steps on the short red #f00, and confirming that a non-hex string fails validation. Wire the free browser form for design reviews and quick ramps, then call the identical contract from scripts when you need bulk generation of token scales. Keep steps in the documented range rather than relying on silent clamps — this tool fails loudly so design systems stay predictable.
Where monochromatic palettes show up in real work
Product designers build one-hue UI ramps so a single brand primary can cover text, surfaces, chips, and disabled states without introducing a second hue that would fight the identity. Accessibility reviewers explore companions of a text or icon color across a lightness ladder, then hand candidates to a contrast checker rather than guessing midtones by eye. Marketing teams produce campaign pastels and deep accents from a saturated logo for social banners and email headers while preserving brand hue identity.
Frontend engineers script monochromatic ramps in continuous integration so a single brand color yields a documented ladder for charts, badges, and secondary buttons. Curriculum authors teaching color harmony can show that a monochromatic scheme is the one-hue member of the classic family that also includes complementary, analogous, triadic, and tetradic rotations — those other landings rotate hue, while this page only walks lightness.
If you later need a complementary opposite, an analogous neighbor pair, a one-hundred-twenty-degree triad, or a single lighten step, treat those as separate search intents and landings rather than overloading this monochromatic page. Named CSS colors such as tomato are out of scope; resolve them to hex first.
What you can do with it
One-hue UI surfaces and states
Derive deep surfaces, mid fills, and pale backgrounds from a primary color while keeping hue and saturation stable.
Brand campaigns that stay on-hue
Produce campaign-ready lighter and darker swatches from a saturated logo color for banners, slides, and social creatives.
FAQ
How does this monochromatic palette generator build N colors?
It converts hex to HSL, keeps hue and saturation fixed, and places lightness at L_i = i × 100 / (N − 1) for i from 0 to N − 1, then converts each step back to hex and RGB. The first swatch is black and the last is white.
What does the steps parameter mean?
Steps is the total number of palette swatches (integer 2–21), not a count on each side of the base. Five steps produce five colors at lightness 0, 25, 50, 75, and 100 percent.
Does the palette include the original base color?
The original color is always returned as the base swatch with its parsed RGB preserved.
Which hex formats are accepted?
Three-digit and six-digit CSS hex, with or without a leading hash.
What does the monochromatic palette generator cost?
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/monochromatic \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3366cc","steps":5}'const res = await fetch("https://api.kit.forhosting.com/color/monochromatic", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3366cc",
"steps": 5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/monochromatic",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3366cc",
"steps": 5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/monochromatic", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3366cc","steps":5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3366cc","steps":5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/monochromatic", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"color": "#3366cc",
"steps": 5
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.monochromatic",
"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 hex strings and step counts outside the allowed integer range fail with invalid_input instead of silent clamping. No network, no random seeds, and no wall clock — identical color and steps always produce identical JSON.
What you send and what you get back
Color also accepts the aliases hex and base; steps accepts count and n. Missing fields, non-hex characters, wrong lengths, NaN, Infinity, non-integers, and steps outside the closed interval fail with invalid_input and are not charged. On success the response echoes the normalized six-digit color and the integer steps, then provides count equal to steps, the base hue and saturation, lightness_base from the original HSL, a base swatch that preserves the parsed input RGB, a swatches array ordered darkest to lightest, a hexes convenience list, and a short formula string. Pricing for successful API calls is the published base of $0.002 per item; validation failures do not consume prepaid balance.
Where monochromatic palettes show up in real work
Design-token pipelines emit CSS variables or JSON theme scales from a single base hex and store every derived swatch for light-mode and dark-mode surfaces. Because this capability is a pure parse engine, API pricing is the published base of $0.002 per successful item and failed validation does not consume balance. 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.
Integration use cases
Design-token monochromatic ramps
Generate an N-stop darkest-to-lightest ladder from one brand hex for CSS variables, theme JSON, and multi-brand design systems.