Rainbow color palettes

Where rainbow palettes work

• Chart series, map legends and calendar categories
• Pride, festival and community event branding
• Children's education apps and classroom materials

What you get in this collection, and what is missing

The 122 rainbow palettes here are almost all hue. Average saturation is around 80%, only 2 of 488 swatches are near-neutral, and just 9 are very dark. That means nearly every palette needs a text color and a background brought in from outside.

Two kinds of palette dominate. Full-strength sets like #FF6B6B, #FFD93D, #6BCB77, #4D96FF cover the spectrum at similar brightness. Pastel rainbows like #FFB3B3, #FFDBA4, #FFE9AE, #C1EFFF use the same hue order at high lightness and behave more like tinted surfaces.

Using a rainbow set for chart categories

Rainbow palettes are most useful as categorical colors: one hue per series, tag or team. Take the coral, yellow, green and blue set above. White text fails on all four fills (2.78:1, 1.38:1, 2.01:1 and 2.95:1). A near-black #1A1A1A passes on all four (6.27:1, 12.63:1, 8.65:1 and 5.90:1), so use dark labels inside bars and chips.

The colors are also closer in lightness than they look. Coral #FF6B6B against blue #4D96FF is 1.06:1, so the two are indistinguishable in grayscale print. Coral against green #6BCB77, the classic red-green confusion pair, is 1.38:1, so lightness will not separate them for readers with red-green color-vision deficiency either.

• Label series directly on the chart instead of relying on a legend.
• Keep spectral order in legends so position reinforces color.
• Vary marker shape or line dash when more than three series share a chart.

Pastel rainbow or full strength?

Use pastel rainbows for large areas: card backgrounds, tag fills, calendar events, with dark text on top. Use full-strength sets for small marks such as chart lines, dots and icons, where a large saturated block would compete with the content.

Pairing the colors

Pair a full-strength rainbow with white or near-white surfaces and one near-black for text. If you have both a pastel and a saturated version of the same hues, use the pastels for large fills and the saturated ones for lines, dots and icons.

Contrast and readability

Yellow is the outlier: white on #FFD93D is 1.38:1, while #1A1A1A on it is 12.63:1. Test each hue as a fill with the same text color, and never let hue be the only difference between two chart series or states.

Questions

What are the rainbow colors in HEX?

There is no official HEX set; the spectrum is continuous and each palette picks its own stops. A balanced four-color set from this page is #FF6B6B coral, #FFD93D yellow, #6BCB77 green and #4D96FF blue. For a seven-step red-to-violet sequence, pick stops at even hue intervals and keep their lightness similar.

How do I make a rainbow gradient in CSS?

List the colors as stops in hue order, for example linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff). In current browsers you can add an interpolation space, such as linear-gradient(90deg in oklch, ...), which keeps the transitions between hues from turning muddy in the middle.