Skip to main content
Back to Colors generators

Colors

Rainbow Color Spectrum Generator

Used by developers, writers, and creators worldwide.

A rainbow color spectrum generator divides the full 360-degree hue wheel into equal steps, giving you a mathematically balanced palette every time. Set the count to match your exact number of chart categories or gradient stops, then dial saturation and lightness to shift the mood — high saturation near 80% for vivid UI colors, or drop it to 45% with lightness at 80% for soft pastels. No guesswork, no accidentally landing on three shades of green. The output is standard HSL, ready to paste into Figma, a D3.js color scale, or a CSS linear-gradient without any conversion. Works equally well for seven classic ROYGBIV steps or thirty-two fine-grained heatmap stops.

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 Number of Colors to match how many distinct hues your project needs.
  2. Adjust Saturation upward for vivid colors or downward for muted, pastel tones.
  3. Set Lightness between 45–60% for standard output, or higher for softer shades.
  4. Click Generate to produce the evenly distributed spectrum grid.
  5. Click any color swatch to copy its HSL value, then paste it into your design tool or code.

Use Cases

  • •Assigning visually distinct colors to 8 categories in a D3.js bar chart
  • •Building a CSS linear-gradient background with even full-spectrum hue coverage
  • •Generating pastel rainbow swatches for a children's app UI in Figma
  • •Creating color-coded phase markers on a project timeline in Notion or Miro
  • •Producing heatmap color stops for a data-dense analytics dashboard

Tips

  • →For exactly 7 classic ROYGBIV steps, set count to 7, saturation to 85%, and lightness to 52%.
  • →When using the palette in D3.js, feed the HSL strings directly into a scaleOrdinal domain — no conversion needed.
  • →Generating 20+ colors and using every other one gives you a half-spectrum set with more breathing room between hues.
  • →Combine a high-saturation rainbow spectrum with 30–40% opacity in your CSS for layered, translucent background effects.
  • →If two adjacent colors look too similar on screen, increase the count slightly then remove the duplicates manually — it redistributes the hue steps.
  • →For print work, generate the spectrum then convert each HSL value to CMYK in your design app; verify on a physical proof since hue accuracy varies by printer.

FAQ

how many colors should I generate for a chart legend

For most charts, 6 to 10 colors keeps the legend readable without overwhelming viewers. Beyond 12, individual hues become hard to distinguish at small sizes. Set the count input to match your exact number of data series so every generated color is actually used.

what saturation and lightness settings work best for dark mode UI

For dark backgrounds, try saturation around 70–85% and lightness between 55–65%. This keeps colors vivid enough to read against near-black surfaces without tipping into neon. Avoid lightness above 75% on dark backgrounds — colors start to look washed out and lose contrast against each other.

are rainbow palettes safe to use for data visualization

Yes, with one caveat: rainbow palettes work well for categorical data where you need distinct colors, but can mislead on sequential or quantitative data — like a population density map — because hue shifts don't imply magnitude. Use this generator for categorical charts, labels, and legends; prefer a single-hue scale for ordered data.