Color Shades Generator
This free color shades generator turns any base color into a full set of tints, shades, and tonal steps — the kind of evenly spaced ramp you need for a design system or UI palette. Enter a color and instantly get a Tailwind-style scale from light to dark, ready to copy as HEX, RGB, or HSL.
It runs entirely in your browser with no signup and nothing uploaded, so you can build and refine palettes privately on any device.
Generates an 11-step scale (50–950) anchored at your base color as 500. Uses OKLCH interpolation for even visual steps.
How to use the color shades generator
Pick or paste a base color — usually the main brand color you want your interface built around. The tool generates a ramp of lighter tints above it and darker shades below it, spaced so each step feels like an even visual move. Browse the scale, then click any swatch to copy its value. Use the lighter steps for backgrounds and hover states, the mid steps for primary buttons and accents, and the darker steps for text and borders.
Adjust your base color and the whole ramp regenerates instantly, so you can experiment until the lightest and darkest ends both work in real layouts.
Tints, shades, and tones: what the terms mean
These three words describe how a color is modified. A tint adds white, making the color lighter and softer. A shade adds black, making it deeper and darker. A tone adds gray, muting the color without strongly pushing it lighter or darker. A good UI scale blends these ideas so you get a usable range from a near-white background tint down to a near-black text shade, all clearly related to your base hue.
| Term | What you add | Typical UI use |
|---|---|---|
| Tint | White | Backgrounds, subtle hover fills, disabled states |
| Shade | Black | Body text, borders, pressed button states |
| Tone | Gray | Muted accents and secondary surfaces |
Building a UI palette from a single color
Design systems like Tailwind, Material, and most component libraries assign numbered steps — often 50 to 900 — so the same color can serve many roles. The lightest steps become page and card backgrounds, the middle steps become your interactive primary color, and the darkest steps handle text and high-emphasis edges. Generating the whole ramp from one base keeps everything in the same hue family, which is what makes an interface feel cohesive rather than assembled from unrelated colors.
For accessibility, pair a light background step with a dark text step and check the contrast before shipping. Even, perceptually consistent ramps make it far easier to hit readable contrast at predictable points on the scale.
Why color space matters for even shades
Generating shades is not as simple as raising or lowering a single number, because the way you measure lightness changes how even the steps look. Darkening a color in HSL or RGB often produces uneven jumps: some steps barely change while others fall off a cliff, because those models do not match how the human eye perceives brightness. Perceptually uniform spaces such as OKLCH and CIELAB are designed so that an equal numeric step looks like an equal visual step, which is why they produce smoother, more balanced ramps.
| Color space | How it derives steps | Result for shade scales |
|---|---|---|
| RGB | Scales red, green, and blue channels directly | Fast, but hue and brightness can drift unevenly |
| HSL / HSV | Adjusts a lightness or value percentage | Intuitive, but mid-tones often look bunched or washed out |
| OKLCH / CIELAB | Steps through perceived lightness | Visually even steps that hold hue and contrast predictably |
Using shade scales beyond buttons and text
A good shade scale earns its keep well outside basic component states. For dark mode, the darker steps of the same hue family become surfaces and the lighter steps become text, so a single scale can drive both themes without inventing new colors. In charts and data visualization, sequential shades of one hue read as a clear low-to-high gradient, which is far more legible than a rainbow of unrelated colors. The same ramp also gives you ready-made stops for subtle gradients and layered shadows that stay on-brand.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is your base color mixed with white, so it looks lighter and gentler. A shade is your base color mixed with black, so it looks darker and richer. Tints are typically used for backgrounds and subtle surfaces, while shades work well for text, borders, and pressed states.
How many shades do I need for a design system?
Most UI systems use nine to eleven steps per color, commonly labeled 50 through 900. That range gives you light tints for backgrounds, a strong mid step for primary actions, and dark shades for text. Generate the full ramp, then keep only the steps your interface actually uses.
How do I create a Tailwind-style color scale?
Start from your brand’s core color as the mid point, then produce lighter tints and darker shades in even perceptual steps. This generator does that automatically and lets you copy each step as HEX, RGB, or HSL, so you can paste the values straight into your Tailwind config or CSS variables.
Should backgrounds use tints or shades?
In light interfaces, backgrounds usually use very light tints so content stays readable, while text uses dark shades for contrast. In dark mode the logic flips: deep shades become the surface and light tints carry the text. Either way, keeping both from the same ramp preserves a consistent hue.
Why do my shades look uneven when I darken a color in HSL?
HSL lightness does not track how your eye perceives brightness, so equal percentage steps can look unequal — light shades may barely differ while dark ones change sharply. Generating the ramp in a perceptually uniform space like OKLCH spaces the steps by perceived lightness instead, which smooths out the jumps and keeps the hue from drifting as the color gets darker.
Can I generate a shade scale from any HEX color?
Yes. Any valid color — entered as HEX, RGB, or HSL — can anchor a scale. The most predictable results come from a mid-toned, reasonably saturated base, because there is room to extend both lighter and darker. Very light or very dark starting colors leave less headroom in one direction, so the tints or shades on that side will be more compressed.
Are tints and shades the same as lowering opacity?
No. Lowering opacity makes a color partly transparent, so its final appearance depends on whatever sits behind it. A tint or shade is a fully opaque new color with its own fixed value. For consistent, predictable interfaces you generally want solid tints and shades rather than transparency, which can shift unexpectedly over different backgrounds.
Which format should I copy shade values in — HEX, RGB, or HSL?
Use whichever fits your workflow. HEX is the most compact and common in CSS and design tools. RGB is handy when you need to add an alpha channel or do channel math. HSL is the easiest to tweak by hand because adjusting the lightness value nudges a color along the scale. All three describe the same color, so the choice is about convenience, not accuracy.