What Are Shades and Tints? Adding Black or White and Building Them in HSL

When designing a website or app, have you ever changed the darkness of a button slightly for its normal, hover, and pressed states, or shaded a chart using lighter and darker versions of one color? The foundation of this "change only the darkness while keeping the same hue" expression is the idea of shades and tints. This article explains, step by step, what shades and tints are, how they differ, and how to build them using HSL.

What Are Shades, Tints, and Tones

When you create light-and-dark variations from a single color (a base color), the name and the effect change depending on what you mix in. The three fundamentals are these.

• Shade: a color made darker by mixing black into the base color.
• Tint: a color made lighter by mixing white into the base color.
• Tone: a color made less vivid by mixing gray (a blend of black and white) into the base color.

What they share is that they move only brightness or vividness without changing the hue (the color itself, such as red, blue, or green). Because the hue stays constant, the resulting colors keep a sense of unity when placed side by side, letting you build natural gradients and cohesive palettes. Generating a list of shades from a base color makes the differences easy to grasp; with the Color Shades Generator you can review the shade and tint steps from a single input color all at once.

Shade: A Color Mixed With Black

A shade is a color darkened by adding black to the base color. For example, gradually adding black to a vivid blue shifts it toward a calm, navy-like blue. The more black you mix in, the darker it gets, eventually approaching black.

In practical design, shades shine in situations like these.

• Button hover and pressed states: applying a shade one step darker than the normal button color naturally conveys "you can press this" or "you are pressing it now."
• Shadows and borders: using a shade of the base color for shadows blends in better than plain black and produces a refined sense of depth.
• Text readability: placing dark-shade text on a light background secures contrast while keeping the hue unified.

Be careful that mixing in black lowers brightness while also changing the impression of vividness (saturation). Overdoing it easily produces a "merely dark, dull" color, so the trick is to slice the steps finely and find just the right darkness. When you want to check a color code in another notation, the Color Converter makes it easy to move between HEX, RGB, and HSL.

Tint: A Color Mixed With White

A tint is a color brightened by adding white to the base color. Adding white to a vivid blue produces a soft sky-blue or pastel blue. The more white you mix in, the lighter and paler it gets, eventually approaching white.

Tints are indispensable when you want a sense of space and lightness on screen.

• Background colors and fills: using a faint tint of the base color for a section background lets your brand color come through without overpowering the page.
• Disabled states: making a button a faint tint gently expresses the "cannot be pressed right now" state.
• Selection highlights: filling a selected row in a list or calendar with a pale tint creates emphasis that is not too strong.

Because a tint gets lighter while appearing less vivid, going too pale can make it whitish and blurry, making element borders hard to see. When using one as a background, always check that contrast with the text on top is sufficient. To build tint steps from a base color in one go, generating and comparing them with the Color Shades Generator is a quick approach.

Tone and Adjusting Lightness and Saturation

A tone is a color whose vividness is reduced by mixing gray into the base color. Unlike shades (only black) and tints (only white), a tone is characterized by lowering saturation for a calmer impression. On business-oriented sites or screens where photos should take the lead, muted tones come together elegantly.

The keys here are two axes: lightness and saturation.

• Lightness: how bright the color is. Raising it approaches white; lowering it approaches black. Tints roughly correspond to raising lightness, and shades to lowering it.
• Saturation: how vivid the color is. Raising it makes it flashy; lowering it approaches gray. Tones correspond to lowering saturation.

In other words, shade, tint, and tone are intuitive ways of saying "mix in black, white, or gray," but in the digital world they can be organized as moving the numeric values of lightness and saturation. Understanding this correspondence makes the HSL implementation described below much easier to grasp.

Tips for Building Beautiful Steps

When making light-and-dark variations, simply changing brightness at equal intervals is not always best. The human eye is sensitive to differences in bright regions and dull to differences in dark regions, so a mechanical even split can look unbalanced. Here are points for building beautiful steps.

• Decide the number of steps: for UI, about five steps such as "base + two shades + two tints" is easy to handle and reusable as color tokens in a design system.
• Anchor on the middle (base): place the base color in the center and spread symmetrically toward darker (shades) and lighter (tints) to keep visual balance.
• Check contrast: for combinations used as text and background, verify they meet readability standards. Pairings of two pale tints especially need care.
• Slightly shift the hue: as an advanced technique, nudging the hue a little as you darken (for example, shifting blue toward purple) produces a more natural, deeper gradient.

Building such steps by hand makes numeric tuning tedious. It is efficient to start from steps auto-generated from a base color with the Color Shades Generator, then fine-tune only the parts you need. When you want to use the generated color codes as HEX, RGB, or HSL, the Color Converter is helpful.

How to Implement It in HSL

When building shades and tints in code, the most intuitive color notation is HSL. HSL expresses a color with three numbers: H (hue), S (saturation), and L (lightness). Because you can move only lightness or saturation while keeping the hue, it pairs perfectly with making gradients.

hsl(210, 80%, 50%) ← H=210 (blue), S=80% (vivid), L=50% (mid brightness)

From this base color, you can build gradations just by moving the HSL numbers.

• Shade: lower L. e.g. hsl(210, 80%, 35%), hsl(210, 80%, 20%)
• Tint: raise L. e.g. hsl(210, 80%, 70%), hsl(210, 80%, 88%)
• Tone: lower S. e.g. hsl(210, 45%, 50%), hsl(210, 20%, 50%)

This way, keeping the hue (H) fixed at 210 and raising or lowering lightness (L) yields tints and shades, while lowering saturation (S) yields tones. In CSS you can write HSL values directly, and in recent years functions like color-mix() let you blend white or black into a base color by proportion, expressing tints and shades more declaratively.

Even if you only have a HEX code (notation like #3399ee), converting it to HSL once lets you build gradations with the same procedure. You can convert between HEX and HSL quickly with the Color Converter, and review the generated gradient list all at once with the Color Shades Generator. Start by making a few shades and tints from your own brand color and lining them up. Seeing the darkness change in an orderly way while the hue stays constant should expand your palette options at once.

Please note that this article is intended to provide general information. How colors appear varies with the display environment and individual differences, and accessibility standards and browser color-feature specifications are updated over time. For actual production work, make your decisions after checking the latest official information and guidelines.