Tonal Palette Logic & Usage
This generator creates a cohesive 15-color design system based on HSL (Hue, Saturation, Lightness) mathematics.
1. The Core Palette (100 - 500)
- 100 (Lightest): Backgrounds or Disabled states.
- 200 (Soft): Cards, Dividers, Secondary buttons.
- 300 (Base): Primary actions, Active links, Icons.
- 400 (Deep): Hover states, Subheadings.
- 500 (Darkest): Main text, Deep borders, Dark mode.
2. Tints & Shades (XX1 - XX9)
- Tints (XX1): +15% Lightness. For tooltips and notifications.
- Shades (XX9): -15% Lightness. For pressed states or inner shadows.
Pro Tip: All changes are saved in the URL. Just copy the link to share your palette!