Palette Generator
Main Palette
Click on a color for fine adjustments
1
#0082DF
2
#0012DF
3
#5D00DF
4
#CC00DF
5
#DF0082
1
#0082DF
2
#0012DF
3
#5D00DF
4
#CC00DF
5
#DF0082
Palette Stats
100%
Saturation
44%
Lightness
5
Tones
1.7
Contrast
Available Fine Adjustments:
- Click the edit icon to open HSL controls
- Drag and drop colors to reorder them
- Lock colors to keep them when regenerating
- Adjust Hue (0-360°), Saturation (0-100%) and Lightness (0-100%)
- Use "Apply to all" to change the entire palette at once
- Click "+" to add colors (max. 10)
- Remove colors with the trash icon (min. 3)
- Use "Regenerate Palette" to create a new one based on the edited color
Keyboard Shortcuts
SpaceGenerate
Ctrl+ZUndo
CCopy color
Ctrl+YRedo
←→Navigate
LLock/Unlock
FFullscreen
EscExit fullscreen
Card Icons (hover)
Copy HEX code
Lock when regenerating
Fine HSL adjustments
Remove color
Assign semantic role
Color details & formats
View & select shades
Semantic Roles Guide
Assign roles to your colors to export code with semantic names:
primaryMain brand color, primary action buttons
secondaryAccents, secondary elements, alternative buttons
backgroundPage backgrounds, sections and containers
surfaceCards, modals, elevated elements above background
textMain text, headings and content on light backgrounds
linkLinks, interactive elements and navigation
💡 Roles are used as variable names when exporting (e.g., --color-primary)