About

Choosing colors by intuition leads to uneven perceptual spacing and hue clumping. This generator distributes n colors along a specified arc of the HSL color wheel, guaranteeing uniform angular separation of θ_end − θ_startn − 1 degrees between each swatch. The tool operates in HSL space because hue is perceptually linear at constant saturation S and lightness L, unlike RGB where "rainbow" interpolation produces muddy intermediates. Output is available in HEX, RGB, and HSL notation. Note: perceptual uniformity is approximate. HSL does not account for human vision nonlinearities the way CIELAB does. For screen-based design work at moderate saturation, the deviation is negligible.

Formulas

Each color C_i is computed by linearly interpolating hue across the selected arc of the color wheel.

H_i = H_start + i ⋅ H_end − H_startn − 1 (mod 360)

Where H_i is the hue in degrees for the i-th swatch (i = 0 … n−1), H_start and H_end define the arc endpoints, and n is the total number of colors requested.

HSL to RGB conversion follows the standard algorithm. Given H ∈ [0, 360), S ∈ [0, 1], L ∈ [0, 1]:

C = (1 − |2L − 1|) ⋅ S

X = C ⋅ (1 − |(H ÷ 60) mod 2 − 1|)

m = L − C2

Where C = chroma, X = intermediate value, m = lightness offset. Final RGB channels are (R₁+m, G₁+m, B₁+m) scaled to [0, 255].

Reference Data

Hue Range	Name	Approx. Hue °	Hex Example	Common Use
0 - 15	Red	0°	#FF4040	Alerts, energy, urgency
15 - 45	Orange	30°	#FF8C00	Warmth, creativity
45 - 70	Yellow	60°	#FFD700	Optimism, caution
70 - 90	Chartreuse	80°	#ADFF2F	Nature, freshness
90 - 150	Green	120°	#32CD32	Growth, success
150 - 170	Spring Green	160°	#00FA9A	Vibrance, digital
170 - 200	Cyan	180°	#00CED1	Tech, calm, water
200 - 240	Blue	220°	#4169E1	Trust, depth, sky
240 - 270	Indigo	255°	#6A5ACD	Luxury, mystery
270 - 290	Violet	280°	#9370DB	Creativity, royalty
290 - 330	Magenta	310°	#FF00FF	Playfulness, energy
330 - 360	Rose	345°	#FF69B4	Romance, femininity
0 - 360	Full Spectrum	All	-	Rainbow, data viz
0 - 60	Warm Range	Red→Yellow	-	Heat maps, autumn
180 - 270	Cool Range	Cyan→Violet	-	Ocean, winter, tech

Frequently Asked Questions

HSL hue spacing is geometrically uniform but not perceptually uniform. Human vision is more sensitive to differences in green-cyan range (~120° - 180°) than in blue-violet (~240° - 280°). For perceptually equidistant palettes, you would need CIELAB or OKLCH color spaces. This tool uses HSL because it is sufficient for most UI and data-visualization tasks and requires no perceptual lookup tables.

The generator wraps around the 360° boundary. For example, setting start to 300° and end to 60° produces a sweep through magenta → red → orange → yellow, crossing the 0°/360° boundary. The arc length is calculated as (60 − 300 + 360) mod 360 = 120°, and colors are distributed evenly across that 120° arc.

At S = 100% and L = 50%, you get the purest, most vivid spectrum. Reducing saturation pushes colors toward gray. Increasing lightness above 50% washes them toward white; decreasing below 50% darkens toward black. For print-safe palettes, keep L between 40% and 60%.

Rainbow palettes are problematic for colorblind users (protanopia, deuteranopia). Approximately 8% of males have red-green color vision deficiency, which collapses distinctions in the 0° - 120° hue range. For accessible charts, limit your palette to 5-7 colors and verify contrast using a colorblind simulation tool. Consider pairing hue differences with luminance differences.

Practically, humans can distinguish about 20-30 hues in a full 360° sweep at constant saturation and lightness. Requesting more than 30 colors will produce swatches that appear nearly identical to neighbors. For data visualization, research recommends no more than 12 categorical colors. The tool allows up to 50 for gradient and decorative uses.

HEX (#FF5733) is standard for CSS and design tools. RGB rgb(255, 87, 51) is used in Canvas APIs and some programming contexts. HSL hsl(14, 100%, 60%) is ideal when you want to manually adjust lightness or saturation later, since the hue component remains readable. All three are CSS-valid and produce identical rendered colors.