Skip to main content
Back to Colors generators

Colors

Hue-Based Color Palette Generator

Used by developers, writers, and creators worldwide.

A hue-based color palette generator builds a complete tonal scale from a single point on the color wheel. Set your hue angle — 0 for red, 120 for green, 240 for blue — and the generator steps through lightness and saturation to produce a coherent family of shades that all belong together. This is exactly how Tailwind CSS, Material Design, and Radix UI construct their official color scales. You control two things: the hue angle (0–360) and how many colors to generate. Fewer steps give you a tight accent set; more steps give you the range needed for backgrounds, borders, hover states, and disabled UI. No guesswork, no mismatched shades.

Loading usage…

Free forever — no account required

How to use

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

Detailed instructions

  1. Set the Base Hue slider to the degree angle of the color you want — check your brand hex in Figma or DevTools to find the exact HSL hue value.
  2. Set the Number of Colors to match your target scale size, typically 7 for illustration work or 9 for a full UI token scale.
  3. Click Generate to produce the palette grid, then scan from darkest to lightest to confirm the tonal progression looks smooth.
  4. Click any swatch to copy its hex value, then paste directly into your CSS variables, design tokens file, or Figma styles.
  5. Adjust the hue angle by small increments (5–10 degrees) if the palette reads too warm or too cool, then regenerate to compare.

Use Cases

  • •Building a 9-stop color scale to drop into a Tailwind CSS theme config
  • •Generating light and dark mode token pairs for a Radix UI component library
  • •Picking accessible contrast steps for a D3.js data visualization chart
  • •Creating a monochromatic brand palette for a Figma logo and stationery system
  • •Exploring hue angles between 195 and 220 to finalize a client's primary brand color

Tips

  • →Hues between 160 and 220 (greens, teals, blues) tend to produce the most legible UI palettes because lightness steps stay perceptually even.
  • →Generate the same count at two adjacent hue angles (e.g., 195 and 210) and compare side by side before committing to a brand direction.
  • →For dark mode surfaces, use the two or three darkest swatches as background layers — they carry the hue identity without overwhelming contrast.
  • →Avoid hue angles near 55–65 (yellow) for text-heavy UI scales; yellows lose contrast quickly and fail accessibility checks at light values.
  • →Export your palette alongside a neutral gray scale generated at the same hue with saturation near zero — this creates a cohesive design system with matched undertones.
  • →If you need a split-complementary or triadic palette, generate three separate hue-based scales 120 degrees apart and use one scale as the dominant and the others as accents only.

FAQ

what hue angle should I use for common colors like blue or green

Red is 0, yellow is 60, green is 120, cyan is 180, blue is 240, and magenta is 300. Sky blue sits around 200–210, teal near 180, and navy tones use 220–230 with reduced lightness. If your palette reads more teal than blue, nudge the angle up toward 240.

how many colors should I generate for a design system

Most production systems use 7 to 11 steps — Tailwind uses 10, Material Design uses 14. Generating 9 colors gives you enough range for backgrounds, borders, text, hover states, and disabled states without creating near-identical adjacent steps. Fewer than 5 limits flexibility; more than 11 rarely adds usable variety.

how do I find the hue angle for an existing brand hex color

Convert the brand hex to HSL — Figma, Adobe Color, and browser DevTools all show this directly. The H value is your hue angle. Enter it into the generator to build a full scale that stays true to the original brand color's position on the wheel.