Colors
Rainbow Color Spectrum Generator
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.
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Set the Number of Colors to match how many distinct hues your project needs.
- Adjust Saturation upward for vivid colors or downward for muted, pastel tones.
- Set Lightness between 45–60% for standard output, or higher for softer shades.
- Click Generate to produce the evenly distributed spectrum grid.
- 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.
How do I create a rainbow gradient in CSS?
Pass the generated hues into a linear-gradient with evenly spaced stops, or use conic-gradient for a colour-wheel effect — for example background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f). The generator gives you a smooth, evenly distributed set of hex values, so you can drop them straight into the gradient stops and get a clean spectrum without hand-picking each colour.
Why do designers avoid rainbow scales for sequential data?
Rainbow (jet-style) scales are not perceptually uniform — equal steps in your data do not look like equal steps in colour, so they invent false boundaries and hide real ones, and several hues are indistinguishable to colour-blind viewers. For ordered data, perceptually uniform scales like viridis are safer. The generator is great for categorical legends and decorative spectrums; reserve sequential ramps for a uniform colormap instead.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.