Why You Need a Brightness/Saturation Palette
A single brand color rarely covers every UI need — backgrounds, highlights, disabled states, and more. This tool keeps the hue of your base color fixed while stepping through brightness and saturation levels, automatically generating a palette that stays visually cohesive.
How the Calculation Works
Your input HEX color is converted to the HSL (hue, saturation, lightness) model. One row varies only lightness from 20% to 80% across 5 steps, and another row varies only saturation from 20% to 100% across 5 steps. Hue stays fixed in both rows, keeping the whole palette in the same color family.
How to Use This Tool
The brightness scale works well for expressing hierarchy through light/dark contrast — think dark mode backgrounds, hover states, or disabled elements. The saturation scale is great for dialing vividness up or down while keeping the same hue. Click any generated HEX code to copy it instantly.
Frequently Asked Questions
A. Brightness (lightness) describes how light or dark a color is, while saturation describes how vivid or muted it is. Adjusting either one on the same hue creates very different palette moods.
A. The brightness scale is useful for expressing hierarchy with a single hue — shadows, highlights, backgrounds — while the saturation scale is useful for adjusting vividness while keeping the same hue.
A. This tool keeps the hue of your chosen base color fixed and only varies brightness and saturation. To get a different hue, change the base color first.