Demo:
https://bained.github.io/tonal_palette_generator/
Tonal Palette Logic & Usage
This generator creates a cohesive 15-color design system based on HSL (Hue, Saturation, Lightness) mathematics. It ensures visual harmony by shifting all three axes simultaneously.
1. The Core Palette (100 – 500)
The main 5-color scale is your primary toolkit for any web project:
- Color 100 (Lightest): Best for Section Backgrounds or Disabled Button states. Very subtle and airy.
- Color 200 (Soft): Perfect for Card Backgrounds, Dividers, or Secondary Buttons.
- Color 300 (Base): Your Primary Brand Color. Use this for Main Actions, Active Links, and Icons.
- Color 400 (Deep): Great for Hover States on primary buttons or Subheadings.
- Color 500 (Darkest): High contrast. Ideal for Main Text, Deep Borders, or Dark Mode Accents.
2. Tints & Shades (XX1 – XX9)
These are “micro-adjustments” for complex UI components like inputs or layered cards:
- Tints (XX1): Derived by adding +15% Lightness. Excellent for Tooltip backgrounds or Success/Info notifications.
- Shades (XX9): Derived by subtracting 15% Lightness. Use these for Inner Shadows or Pressed (Active) button states.
3. Why HSL?
Unlike HEX, HSL allows you to maintain the “energy” of a color while changing its brightness. The 8° Hue Shift applied here prevents colors from looking “muddy” or “greyish” when darkened, mimicking how real-world shadows work.
Pro Tip: Use the .gpl export to import this palette into Inkscape or GIMP to keep your design mockups and code perfectly in sync!
Download source:
https://github.com/bained/tonal_palette_generator/
Demo:
https://bained.github.io/tonal_palette_generator/