Tons (Shades) de uma Cor

Hex shades: making a color darker the right way

A shade is a darker variation of a base color, traditionally produced by mixing the hue with black. In digital design, shades form the backbone of any UI palette: every hover state, active/pressed button, drop shadow, focus ring and dark-mode primary is, technically, a shade of your brand color. The opposite operation — mixing with white — is called a tint. Together, tints and shades give you the full vertical stretch of a color ramp.

The HSL math

In the HSL model (Hue, Saturation, Lightness), a shade is generated by holding H and S constant and stepping L downward. A canonical ramp from a base at L=50% goes to 45%, 40%, 30%, 20%, 10%. The formula is roughly L_new = L_base × factor, with factor < 1. Naïvely interpolating in RGB toward #000000 tends to desaturate the result and produce a muddy gray — HSL keeps the chroma intact.

OKLCH: the 2025 way

HSL is intuitive but not perceptually uniform — equal numerical drops in L don't feel like equal drops in brightness. The modern alternative is OKLCH (CSS Color Module 4), which is uniform like Lab. Tailwind v4, Radix Colors and Material 3 all generate their ramps in OKLCH or Lab so each step feels visually equidistant. If you target evergreen browsers, prefer oklch() over hsl() when generating shades.

Where shades show up in a UI

• Button states — default at L=50%, hover at L=40%, active/pressed at L=30%.
• Borders — a subtle border is usually the same hue at L=25–35%.
• Shadows — colored shadows use a very dark shade (L≈10%) of the brand color at low opacity.
• Text on light backgrounds — body text is often a shade at L=20–30% for warmth instead of pure black.
• Dark-mode primary — the inverted version of a brand color is usually a deep shade with reduced saturation.

Numeric ramps: Tailwind, Material, Radix

Design systems standardize shades into named steps. Tailwind uses 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950: everything above 500 is a shade of the base. Material Design labels its shades 600, 700, 800, 900 (plus A700 for accent). Generate 5–9 shades for a typical palette — fewer and you starve hover/active states; more and the steps stop being visually distinct.

Pitfalls and accessibility

Very dark shades on white pass WCAG 4.5:1 easily, but a mid shade as text on a light tint of the same hue often fails — always test contrast in pairs. In print, a CMYK shade is built by adding K (black) ink, not by RGB math, so a screen shade and its CMYK equivalent will drift unless you calibrate per medium. Pure RGB blending toward black also loses saturation: convert to HSL or OKLCH first, step the lightness, then convert back.

FAQ

What's the difference between a shade and a tint? A shade is base + black (darker); a tint is base + white (lighter). Both keep the same hue.

How many shades should I generate? Five to nine is the sweet spot — enough to cover hover, active, borders and shadows without invisible steps between them.

Can a shade become illegible? Yes — once contrast against the background drops below 4.5:1 for body text, the color is no longer accessible.

Which color space is best for shading in 2025? oklch() for perceptually uniform steps; hsl() as a portable fallback.