Hue-Locked Color Palette Generator

How to use

1. 1️⃣
   Choose your options above
2. 2️⃣
   Click Generate
3. 3️⃣
   Copy your result

Detailed instructions

1. Enter your target hue as a number from 0 to 360 in the Hue field — use your brand color's HSL hue value for precision.
2. Set the Number of Colors field to how many swatches you need, typically 6 for simple UIs or 8–10 for full design token scales.
3. Click Generate to produce the hue-locked palette as a grid of color swatches.
4. Click any swatch or its hex code to copy the value, then paste directly into Figma, your CSS variables, or your design token file.
5. If the range feels too muted or too vivid, regenerate — the saturation variation is randomized within the hue lock, so each run produces a slightly different feel.

Use Cases

• •Building an 8-step Tailwind color scale for backgrounds, borders, hover, and focus states from one brand blue
• •Generating design token values in Figma for a component library where all surface and text colors share a single hue
• •Creating light-mode and dark-mode surface pairs — tint at the top, shade at the bottom — from one locked hue
• •Producing tonal fills for a multi-series chart where every data color belongs to the same visual family
• •Sampling a 6-swatch colorway for textile or print production before committing to physical samples

Tips

• →Convert your existing brand hex color to HSL in browser DevTools (F12, pick color, switch to HSL) to find the exact hue value before generating.
• →Generate two palettes at the same hue but different counts — one at 6 for production tokens and one at 12 to audition the in-between shades.
• →Hues near 60 (yellow) and 30 (orange) produce very light pale tints that may fail contrast checks at low lightness — always verify hex codes in a contrast tool.
• →For dark-mode surfaces, the darkest 2–3 swatches in an 8-step palette work well as background layers while the lightest serve as text or icon fills.
• →Pair a hue-locked palette with a complementary hue (add 180 to your locked hue, wrapping at 360) to build a split-complementary system with built-in harmony.
• →Regenerate several times and collect your favorite runs — because saturation varies per generation, different attempts suit different contexts like vibrant marketing vs. subdued data UI.

FAQ