Colors

Hue-Based Color Palette Generator

A hue-based color palette generator gives you an instant family of shades derived from a single point on the color wheel. By locking in one hue angle and varying lightness and saturation across that fixed base, you produce a coherent tonal scale — deep shadows, midtones, and bright highlights that all feel like they belong together. This is exactly how production design systems like Tailwind CSS, Material Design, and Radix UI build their official color scales, and it removes the guesswork from matching shades manually. The hue angle is the most fundamental property in HSL color, ranging from 0 (red) through 120 (green), 240 (blue), and back to 360. Tiny shifts in that angle — say, 195 versus 220 — produce noticeably different color personalities even when lightness and saturation stay identical. Using this generator, you can dial in your exact angle and immediately see how the full tonal range plays out before committing to any hex value. Generating between 5 and 9 colors tends to produce the most usable scales. Fewer than five gives you limited flexibility for hover states and disabled UI elements; more than nine often creates steps so close together that they're indistinguishable at small sizes. The sweet spot mirrors what major design tokens use in practice. Whether you're building a component library, selecting an illustration palette, or choosing brand colors for a client presentation, having a single-hue palette as your foundation means every color you pick is harmonically related from the start.

How to Use

  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 for a Tailwind CSS config file
  • •Generating dark and light mode token pairs for a UI component library
  • •Creating a monochromatic brand palette for a logo and stationery system
  • •Selecting fill colors for a data visualization with accessible contrast steps
  • •Planning a limited illustration palette rooted in one dominant hue
  • •Producing background, surface, and text color tokens for a design system
  • •Testing how a client's brand hue looks across light, mid, and dark values
  • •Exploring adjacent hue angles to choose between two similar brand color candidates

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 is a hue angle and how does it work?

Hue is the position of a color on the color wheel, measured in degrees from 0 to 360. Red sits at 0, yellow at 60, green at 120, cyan at 180, blue at 240, and magenta at 300. The wheel wraps around, so 360 is the same as 0. Everything else — lightness and saturation — is layered on top of this base angle.

What hue number is blue?

Pure blue sits at 240 degrees in HSL. Sky blue is closer to 200–210, teal sits around 180, and navy tones often use 220–230 with reduced lightness. If your palette looks more teal than blue, nudge the hue angle up toward 240.

How many colors should I generate for a design system scale?

Most production design systems use between 7 and 11 steps. Tailwind uses 10 (50 through 900), and Material Design uses 14. For a practical starting point, generate 9 colors — this gives you enough range for backgrounds, borders, text, hover states, and disabled states without creating near-identical adjacent steps.

What is the difference between a hue-based palette and a random color palette?

A hue-based palette fixes one hue and varies lightness and saturation, guaranteeing all colors are tonally related. A random palette pulls colors from across the wheel, which may look vibrant but often lacks cohesion for UI or brand work. Hue-based palettes are far easier to use consistently in production.

Can I use a single-hue palette for accessible design?

Yes, but check contrast ratios between adjacent steps. A hue-based scale gives you predictable lightness progression, which makes it easier to find pairs that meet WCAG AA (4.5:1 for normal text) or AAA (7:1) standards. Use the dark end of the scale for text and the light end for backgrounds.

How do I find the right hue for a specific brand color?

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

Why do some hues look more vibrant than others at the same saturation?

This is a perceptual effect called Helmholtz-Kohlrausch. Yellows and cyans appear brighter to the human eye than reds or blues at identical HSL saturation values. If your palette looks unexpectedly dull or intense, try small adjustments — 5 to 10 degrees in either direction can shift perceived vibrancy noticeably.

What hue angle should I use for warm neutral colors?

Warm neutrals typically use hues between 20 and 40 (orange-brown range) with very low saturation, around 8–15%. Hues near 30 tend to read as warm beige or sand tones. For cooler neutrals, try 200–220 with equally low saturation to get blue-grays similar to Tailwind's Slate palette.