Color Shades

What are color shades?

A shade is a darker version of a base color, created by reducing its lightness while keeping the hue and saturation unchanged. In the HSL color model, this means lowering the L (lightness) value from the original toward zero (pure black). For example, a sky blue at HSL(199, 88%, 48%) produces shades at 43%, 38%, 33% lightness and so on, each step darker than the last. Shades are essential for creating depth, shadows and visual hierarchy in design.

Unlike tints, which move toward white, shades move toward black. This makes them ideal for dark-mode interfaces, text colors on light backgrounds, and any element that needs to feel heavier or more grounded. A well-constructed shade scale gives you multiple darkness levels of the same hue, all perfectly harmonious because they share the same underlying color.

Shades vs tints

Shades and tints are two sides of the same coin. A shade darkens a color by reducing lightness; a tint lightens a color by increasing lightness. Both preserve the original hue and saturation, so they always harmonize with the base color. The key difference is their emotional and functional effect: shades feel heavier, more serious and more grounded, while tints feel lighter, more airy and more playful. In practice, most design systems use both — shades for text and shadows, tints for backgrounds and highlights.

When to use color shades

Shades are indispensable in modern UI and graphic design. Common use cases include:

• Text colors. Use a dark shade of your brand color for headings and body text instead of pure black for a softer, more branded feel.
• Shadows and depth. Shades of the background color create natural-looking shadows that feel cohesive.
• Dark mode. A shade scale provides multiple darkness levels for dark-theme backgrounds and surfaces.
• Hover and active states. A slightly darker shade of a button color signals interaction.
• Data visualization. A sequential shade scale works perfectly for heatmaps and choropleth maps.

How to generate color shades

This tool generates shades instantly in your browser.

1. Pick a base color. Use the color picker to choose any starting hue.
2. Choose the count. Select 5, 10 or 15 shades from the dropdown.
3. Copy a HEX. Click the Copy button next to any swatch to copy its HEX code.

The tool converts the picked RGB color to HSL, then progressively reduces the lightness from the original value toward zero, generating evenly spaced shades. All processing is local and private.

Shade design tips

When building a shade scale, aim for perceptually even steps rather than mathematically even ones. The human eye is more sensitive to lightness changes in the mid-range than at the extremes, so you may need to adjust the spacing manually for the best visual progression. A common approach is to use a geometric or exponential progression rather than a linear one. Also, consider generating more shades than you need and then selecting the ones that look best — having options makes it easier to find the perfect darkness level for each use case.