The base is preserved
The middle swatch is your original normalized HEX. The scale samples darker and lighter HSL lightness values on either side instead of replacing the base with a nearby calculated step.
ONELESS / COLOR
Color Shades Generator
A single color often needs lighter surfaces and darker companions before it can become a useful interface palette. Color Shades Generator builds a compact HSL lightness scale around your exact base. Keep the original in the center, compare neighboring steps and inspect how black or white text reads on each one.
Open Color Shades Generator. JavaScript powers the workspace; the full guide is available below.
UNDERSTAND THE RESULT
Color, with a little context.
Lightness is a coordinate, not a perception guarantee
Hue and saturation are retained while HSL lightness changes. The steps are not uniform perceptual distances, and different hues with equal HSL lightness can have very different contrast.
Contrast belongs to each swatch
Selecting a step shows its contrast with pure black and pure white. These are informational ratios; decide which text threshold applies before choosing a label color.
HOW TO USE IT
From a starting point to a usable result.
- Enter a 3- or 6-digit opaque Base HEX.
- Choose five, seven or nine steps. Click any swatch to inspect the HEX and its black/white text contrast.
- Copy selected for one value or CSS for the complete numbered scale. Reset restores the initial teal base and nine-step layout.
A WORKED EXAMPLE
Nine steps around teal
With #268C86 and nine steps, the fifth value is exactly #268C86. Four darker steps precede it and four lighter steps follow. Pure black or white inputs can produce repeated values on the side where lightness has no further room.
EVERYDAY USES
Make the next small decision easier.
Start a compact token scale
Use the generated list as a starting set of surface, border and accent tokens, then adjust and name them for the actual interface.
Choose a text treatment
Inspect the black and white ratios on a desired step before assigning its label. Check the actual text size and context with WCAG Contrast Checker.
LOCAL WORKSPACE
Your work stays in this browser.
The tool processes color values locally. It does not upload the input to a processing server or save it in browser storage. Leaving or reloading the page clears the working state. Copying places the selected result on your clipboard; sharing sends only the page address without your working values.
These tools describe sRGB colors. Browser decoding, color management and the display can affect what you see; they are not an ICC proofing workflow or a print-color guarantee. Read the site privacy policy for information about the surrounding website.
KEEP IT NEARBY
One less search next time.
Press Ctrl + D on Windows or Command + D on Mac to bookmark this page. Your browser may also offer Create shortcut or Add to Home Screen. Shortcuts open the tool; they do not include your colors or images.
Choose a shortcut icon
Soft Coral
Warm Peach
Sunset Orange
OneLess Blue
Rose PinkQUESTIONS, ANSWERED
A few useful details.
Are these only shades toward black?
This tool provides a complete dark-to-light scale around the base. Tint and Shade Generator separately shows explicit mixtures with white and black.
Are the steps perceptually equal?
No. This is an HSL lightness scale, not OKLCH or another perceptual scale.
Why are some steps repeated?
At black, white or very low chroma, rounding or the available lightness range can produce identical HEX values. The generator retains the requested steps and exact base.
Does CSS export use a framework naming scheme?
No. It exports numbered --color-1 and subsequent variables with comments. Rename the values to match your project.
Is my base color preserved in the scale?
Yes. The base remains the middle reference swatch. The surrounding steps provide lighter and darker options to compare.
How do I choose a useful scale size?
Use five steps for a compact range or seven or nine when you need more intermediate choices. Extra steps are options, not a requirement to use every color.
Can I assume a dark step is readable on every light step?
No. Check the specific pair you will use. Position in a scale is not an accessibility pass or a substitute for contrast measurement.
REFERENCES
ANOTHER SMALL STEP
Keep the next tool close.
Ready for a little more color?
A scale of light and dark, built around your color.
Return to Color Shades Generator ↑