Skip to main content
Presets constrain color generation to a specific HSL range, producing palettes with a consistent mood or style. Each preset defines valid bounds for hue, saturation, and lightness. Colors generated within a preset stay inside those bounds.

​
Cycling and rerolling

ShortcutAction
PCycle to the next preset
Shift + PReroll the current preset (generate new colors within the same bounds)
Cycling steps through the 8 presets in order. When you reach the last preset, the next press returns to the first. You can also interact with presets through the preset browser in the toolbar: hover to reveal a dropdown listing all presets, and use the reroll button next to the active preset to regenerate within it.
If any colors are locked when you apply a preset, you will see a confirmation prompt before the preset is applied. Locked colors will be replaced by preset-generated colors. Unlock them first if you want to keep them.

​
The 8 presets

Each preset is defined by three HSL ranges. Colors are generated by sampling within those ranges, with lightness stratified across segments so consecutive colors are spread across the full lightness span rather than clustering together.
Soft, light tones. Low-to-medium saturation and high lightness across the full hue wheel.
ChannelRange
Hue0–360°
Saturation25–45%
Lightness75–88%
Good for: gentle UI backgrounds, children’s products, soft branding.
Vivid, electric colors. Near-maximum saturation with mid-range lightness, spanning the full hue wheel.
ChannelRange
Hue0–360°
Saturation85–100%
Lightness50–60%
Good for: cyberpunk aesthetics, dark-mode interfaces, gaming brands.
Warm, natural hues. Restricted to a narrow hue band (oranges, ambers, tans) with moderate saturation and medium lightness.
ChannelRange
Hue15–50°
Saturation25–55%
Lightness35–55%
Good for: outdoor brands, food, packaging, rustic aesthetics.
Rich, deeply saturated colors. High saturation with lower lightness across the full hue wheel, evoking gemstones.
ChannelRange
Hue0–360°
Saturation55–80%
Lightness30–50%
Good for: luxury brands, jewelry, fashion editorial.
Grayscale spread. Zero hue and near-zero saturation with a wide lightness range from near-black to near-white.
ChannelRange
Hue0° (fixed)
Saturation0–5%
Lightness15–90%
Good for: neutral system palettes, print design, typographic interfaces.
Reds, oranges, and yellows. Uses a wrapping hue range (330–60°) that passes through 0°/360°, ensuring the warmest segment of the wheel is covered.
ChannelRange
Hue330–60° (wrapping through 0°)
Saturation50–85%
Lightness45–70%
Good for: energetic brands, autumn themes, food and hospitality.
Blues, teals, and purples. A focused hue range from cyan through blue to violet.
ChannelRange
Hue180–280°
Saturation40–75%
Lightness40–65%
Good for: tech brands, healthcare, calm and trustworthy aesthetics.
Low saturation, subtle. All hues are available but saturation is kept deliberately low, producing understated, desaturated tones.
ChannelRange
Hue0–360°
Saturation10–30%
Lightness40–65%
Good for: editorial design, muted brand systems, background palettes.

​
Active preset detection

The toolbar shows a badge when your current palette matches a preset’s HSL bounds. Detection checks every color in the palette against the preset’s hue, saturation, and lightness ranges, applying a tolerance of ±2 on each channel. A preset becomes inactive (badge disappears) as soon as any color drifts outside the preset’s bounds — for example, after manually editing a color’s hex value or after mixing in a color from the eyedropper that falls outside the range.
If the badge disappears after editing a color, the palette is no longer strictly within the preset’s bounds. Press P to cycle back to the preset and regenerate fresh colors that fit.

​
How palette generation works

When a preset is applied, generatePresetPalette generates the requested number of colors as follows:
  1. Lightness stratification — the lightness range is divided into equal segments (one per color). A random value is sampled from each segment, then the values are shuffled. This ensures the palette spans the full lightness range without clustering at one end.
  2. Hue distribution — for full-wheel presets (pastel, neon, jewel, muted, monochrome), hues are spaced evenly around the wheel with a random global offset and ±30% jitter. For narrow-range presets (earth, cool), hues are sampled uniformly within the range. For wrapping ranges (warm, 330–60°), sampling wraps correctly through 0°.
  3. Saturation — sampled uniformly within the preset’s saturation range.
Press Shift + P to regenerate within the active preset without cycling to the next one. This is useful when you like the style but want a different set of specific colors.

​
Related pages

Generating palettes

How to add, reroll, and manage palette colors.

Color relationships

Hue-angle modes that control relationship between colors.

Locking colors

Lock colors before applying a preset to preserve them.

Keyboard shortcuts

Complete list of all keyboard shortcuts.

Build docs developers (and LLMs) love

Get started for freeTalk to us