Colors & AccessibilityLesson 93Free preview

Shades & Tints Generator

This lesson is part of Web Developer Tools · All levels

Summary

Shades and tints generators create a variation of colors that are darker or brighter than the base colors. Tints are produced by adding white, while shades are produced by adding black. Consistent scales are useful for state hover, border, background, and visual hierarchies in design systems.

Key points

Tint is a mixture of colors with white so it's brighter.
Shade is a mix of colors with black so it's darker.
In HSL, increasing the lightness produces a brighter version
The color scale is usually numbered 50, 100, 500, and 900
Use a consistent scale to make interaction states easily distinguishable

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.