Color shades generator
Build a full light-to-dark ladder from one brand color, for example #3366cc with three steps, which gives seven swatches from #000000 through #224488 and the base to #bbccee and #ffffff. Only lightness changes, so hue and saturation stay put. 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
- 7
- Lightness base
- 50
A color shades generator takes a CSS hex base and a step count, then returns a full ladder of darker shades and lighter tints by moving only the lightness channel in HSL space. Hue and saturation stay fixed, so brand blues remain blue and brand reds remain red while surfaces step smoothly from near-black through the base to near-white. Invalid hex strings and step counts outside the allowed integer range are rejected with a clear validation error instead of silent clamping.
How tints and shades step lightness
Start with a CSS hex color such as hash three three six six c c or the short form hash three six c. The parser expands three-digit codes, lowercases the digits, 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 standard CSS and W three C 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. Shades do not mix toward black in RGB; they lower only the lightness percentage while hue and saturation remain fixed.
For step index k from one to the chosen step count, each shade uses lightness equal to the base lightness times one minus k over steps, so the farthest shade lands at pure black with lightness zero and the nearest shade sits just below the base. Tints raise lightness toward white the same way: lightness becomes base lightness plus the remaining distance to one hundred, scaled by k over steps, so the farthest tint is pure white.
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. There are no random seeds, wall-clock timestamps, or network calls, so the same inputs always yield the same ordered scale. Alpha hex forms with four or eight digits are rejected because this contract is opaque RGB only.
Non-integer steps or values outside one through twenty 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 one and twenty inclusive. Each swatch includes role, index, step, hex, integer r g b, hue saturation lightness numbers, and printable rgb and hsl strings. Role is shade for darker steps, base for the original, and tint for lighter steps; step is negative for shades, zero for base, and positive for tints so clients can sort or filter without re-deriving lightness.
A short formula string documents the L stepping rules for docs and support. Typical checks include three steps on hash three three six six c c, five steps on pure red, and confirming that invalid hex 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 shade scales show up in real work
Product designers build full UI ramps by generating darker active states and lighter hover backgrounds from one brand primary without drifting hue, so a navy CTA ladder stays navy from pressed to soft surface. Accessibility reviewers explore companions of text or icon colors 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 saturated logos for social banners and email headers while preserving brand hue identity.
Frontend engineers script shade ramps in continuous integration so a single brand color yields a documented ladder for charts, chips, badges, and secondary buttons. If you later need only a single lighten step, convert HSL to RGB, build an analogous palette, or check WCAG contrast, treat those as separate search intents and landings rather than overloading this shades page.
What you can do with it
UI hover and pressed states
Derive darker pressed shades and lighter hover tints from a primary color while keeping hue and saturation stable.
Marketing pastels and deep accents
Produce campaign-ready lighter and darker swatches from saturated logo colors for banners, slides, and social creatives.
FAQ
How does this color shades generator build the scale?
It converts hex to HSL, steps lightness toward black for shades (L = L×(1−k/steps)) and toward white for tints (L = L+(100−L)×(k/steps)), keeps hue and saturation fixed, then converts each step back to hex and RGB.
What does the steps parameter mean?
Steps is the number of lightness steps on each side of the base color (integer 1–20). Total swatches equal 2×steps+1 including the base, ordered darkest to lightest.
What is the difference between a shade and a tint?
A shade lowers HSL lightness toward black; a tint raises lightness toward white. Both keep the original hue and saturation so brand identity stays stable.
Which hex formats are accepted?
Three-digit and six-digit CSS hex, with or without a leading hash.
What does it 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/shades \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3366cc","steps":3}'const res = await fetch("https://api.kit.forhosting.com/color/shades", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3366cc",
"steps": 3
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/shades",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3366cc",
"steps": 3
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/shades", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3366cc","steps":3}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3366cc","steps":3}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/shades", 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": 3
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.shades",
"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
The step count is the number of steps on each side of the base: three steps yield three darker shades, the original color, and three lighter tints for a total of seven swatches ordered darkest to lightest. No network calls, no random seeds, and no model drift — 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 two times steps plus one, lightness_base from the original HSL, a base swatch, separate shades and tints arrays, a full swatches array ordered darkest to lightest, and a hexes convenience list. Pricing for successful API calls is the published base of $0.002 per item; validation failures do not consume prepaid balance.
Where shade scales 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.
Integration use cases
Design-token shade ramps
Generate a full darkest-to-lightest ladder from one brand hex for CSS variables, theme JSON, and multi-brand design systems.