Color Brightness Tool
Adjust the brightness (lightness) of any color and see progressive steps from darkest to lightest. This is the foundation of color scales in every design system — from 50 (lightest) to 900 (darkest).
Colors
What Is Color Brightness?
Brightness (also called lightness) describes how light or dark a color is, independent of its hue and saturation. In HSL, this is the L value. At L=0 a color is black; at L=50 it is the pure hue; at L=100 it is white. Adjusting brightness only produces a grayscale-to-color-to-white scale at the same hue.
When to Use Brightness Adjustment
- Design system scales: Every 50-900 scale is a brightness ramp — 50 is the lightest, 900 is the darkest.
- State changes: Hover and active states typically change brightness by 8-15%.
- Text color selection: Pick a brightness level that meets WCAG contrast requirements.
- Dark mode: Invert the brightness scale — 50 becomes dark, 900 becomes light.
- Backgrounds: High brightness tints work as page backgrounds.