Skip to main content
Back to Colors generators

Colors

Color Palette from Base Color

Used by developers, writers, and creators worldwide.

A color palette generator built around a single base hue removes the guesswork from color harmony. Set your base hue (0–360) and choose how many colors you need — the tool steps equal intervals around the color wheel so every swatch relates to the next without clashing. The math scales to your project: two colors gives you complements, three a triad, five spreads 72 degrees apart. Designers use this when building UI color tokens, brand guidelines, or data visualization schemes where perceptual distinction matters. Hex codes are ready to paste into CSS variables, Figma styles, or Illustrator swatches the moment the palette generates.

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 hue angle closest to your brand or target color (use 0=red, 120=green, 240=blue as landmarks).
  2. Set the Number of Colors field to match your project need — 3 for a simple brand palette, 5 for a UI token set, 6–8 for data visualization.
  3. Click Generate to produce the palette and review the evenly spaced swatches in the output grid.
  4. Click any individual swatch to copy its hex code, then paste it into your design tool, CSS file, or brand guidelines document.
  5. Regenerate repeatedly to explore slight saturation and lightness variations while keeping your hue relationships intact.

Use Cases

  • •Defining a 5-token UI color system and exporting hex codes into CSS custom properties
  • •Building a brand palette anchored to a logo's exact hue value in Figma
  • •Generating 6 perceptually distinct category colors for a D3.js dashboard chart
  • •Creating a cohesive swatch set for an icon library in Illustrator or Figma
  • •Prototyping triadic or complementary schemes for an editorial poster layout

Tips

  • →Anchor your base hue to your primary brand color's HSL hue value — most design tools display this in their color picker.
  • →For UI systems, generate a 5-color palette then assign roles before building: primary, secondary, accent, surface, and error.
  • →When building data charts, choose an odd count (5 or 7) — even distributions sometimes pair visually similar hues at opposite ends of the set.
  • →If generated colors feel too saturated for background use, reduce saturation by 20–30% in your design tool while keeping the hue relationships intact.
  • →Combine this generator with a shade/tint tool: generate the hue palette here, then create 3–5 lightness steps for each color to build a full design system.
  • →Test your palette on a gray background before committing — gray reveals how colors interact with neutrals, which is the most common real-world pairing in UI design.

FAQ

how does the generator spread colors from a single hue

It divides 360 degrees by your chosen color count and steps that interval forward from the base hue. Five colors starting at hue 210 land at 210, 282, 354, 66, and 138 — evenly spaced so every swatch is perceptually distinct regardless of where you start.

how many colors should I generate for a UI color system

Five is a reliable default: it gives you a primary, two supporting colors, and two accents while staying manageable. For data visualization with many categories, six to eight improves distinction. For simple branding — logo, heading, link — three colors is often cleaner and easier to apply consistently.

are the generated colors accessible for web use

The palette gives you a harmonious starting point, but WCAG contrast depends on how you pair colors against text or backgrounds. After generating, run your chosen combinations through a contrast checker like WebAIM. As a rule, avoid placing two mid-lightness palette colors directly against each other.