Adding colors
PressA or Space to append a new color to the palette. Each new color is generated based on the current relationship mode and any locked colors already in the palette.
The palette holds a maximum of 10 colors (MAX_COLORS). Once you reach 10, the add shortcut does nothing.
You can also use the + button in the toolbar to add a color.
Two-row layout
When a palette grows to 6 or more colors, it splits into two rows. The split is computed bygetRowSplit and follows a fixed table:
| Color count | Row 1 | Row 2 |
|---|---|---|
| 1–5 | all | — |
| 6 | 3 | 3 |
| 7 | 4 | 3 |
| 8 | 4 | 4 |
| 9 | 5 | 4 |
| 10 | 5 | 5 |
Rerolling colors
- Reroll all
- Reroll one color
Press
R to regenerate every unlocked color at once. Locked colors are preserved as anchors, and the unlocked colors are regenerated to match the active relationship.If no colors are locked and the relationship is not random, a random seed color is generated first and placed at the first unlocked position. All other unlocked colors are then generated relative to that seed. This ensures the palette has a coherent hue structure even when starting from scratch.Per-color keyboard shortcuts
All per-color shortcuts use the digit keys1–9 and 0, where 1 targets the first color and 0 targets the tenth.
| Shortcut | Action |
|---|---|
1-9, 0 | Toggle lock on that color |
Shift + 1-9, 0 | Delete that color |
Alt + 1-9, 0 | Reroll that color |
Shift + Alt + 1-9, 0 | Open color editor for that color |
V then 1-9, 0 | View color variations (chord within 500 ms) |
Shortcuts are disabled while you are typing in a text input or when a dialog is open.
Reordering colors
- Drag to reorder
- Rearrange mode
Drag any swatch left or right to move it to a new position. The lock state travels with the color — a locked swatch stays locked after being dragged.
Undo and redo
Every palette change — add, delete, reroll, reorder — is recorded in a history stack. You can move through that history at any time.| Shortcut | Action |
|---|---|
Z | Undo |
Shift + Z | Redo |
localStorage, so it survives page reloads.
You can also browse the full history timeline by pressing
H to open the history panel.How colors are generated
When you add or reroll colors,generateRelatedColor is called with:
- Reference colors — the hex values of all currently locked colors. If no colors are locked and the relationship is not
random, a random seed hex is used instead. - Relationship — the active
ColorRelationship(random, complementary, analogous, etc.). - Fallback — the previous hex value at that position, used only when no locked colors and no seed are available.
Related pages
Color relationships
How each of the 7 relationship modes determines hue angles.
Presets
Apply HSL-bounded palettes like pastel, neon, or earth tones.
Locking colors
Lock individual colors so they stay fixed during rerolls.
Keyboard shortcuts
Complete list of all keyboard shortcuts.