Random Color Generator

How the generator builds colors

This tool works in the HSL color model — Hue, Saturation, Lightness — because HSL maps to how people actually think about color, far better than raw RGB does. Hue is an angle from 0 to 360 degrees around the color wheel (0 is red, 120 is green, 240 is blue); saturation is 0 to 100 percent, running from gray to vivid; lightness is 0 to 100 percent, running from black to white. To generate a color the tool picks a random value within the range you set for each of these three axes, then converts the result to a hex code for display. Because you control the ranges, "random" never has to mean "garish" — you decide the territory the randomness is allowed to explore.

Why HSL constraints matter

Constraining the three ranges is what turns noise into a usable palette. Narrowing each axis pins the output to a consistent mood:

The default ranges (saturation 40–90, lightness 30–70) deliberately avoid both washed-out and near-black results, which is why fresh shuffles tend to look balanced out of the box.

Color harmony, with the actual math

When you choose a harmony other than "Random", the tool picks one base hue and then places the other colors at fixed angular offsets around the wheel, so the palette is mathematically related rather than arbitrary:

• Complementary adds the opposite hue, base + 180° — maximum contrast, good for accents.
• Analogous steps in 30-degree increments (base + 30°, +60°…) — neighbouring hues that feel calm and cohesive.
• Triadic uses three hues 120 degrees apart — balanced and lively.
• Split-complementary uses base + 150° and base + 210° — the contrast of complementary with less tension.
• Tetradic uses four hues 90 degrees apart — a rich, four-color scheme.

Within a harmony, only the hues are fixed; saturation and lightness are still drawn randomly from your ranges, so every shuffle gives a new variation on the same relationship.

A worked example

Set Palette mode with 3 colors, choose Triadic, and shuffle. The tool picks a random base hue inside your hue range — say 210 (a blue) — then adds 120 and 240 degrees to get 330 (magenta) and 90 (yellow-green). Each of those three hues gets a random saturation and lightness from your ranges, producing three coordinated swatches like #3d7fd6, #d63d9e, and #7fd63d. Lock the blue you like by clicking its padlock, then shuffle again — the blue stays put while the other two regenerate around it, letting you build a scheme around one fixed brand color.

Locking, history, and export

Clicking a swatch's padlock freezes that color; on the next shuffle every unlocked swatch gets a new value while locked ones are preserved. The History panel keeps your last 20 palettes as clickable thumbnail strips, and because it is saved to your browser's localStorage, those palettes survive a page reload. When you are happy, export in whichever format your project needs:

• HEX list — one #rrggbb per line.
• Hex array — a JavaScript/TypeScript array like ["#3d7fd6", …].
• RGB — rgb(61, 127, 214) lines.
• HSL — hsl(210, 65%, 54%) lines.
• CSS custom properties — --color-1: #3d7fd6; ready to drop into a stylesheet.

Single color versus palette mode

Switch to Single Color mode when you need just one value — a background tint, a placeholder, a quick reference — and the generator shows one large swatch with its HEX, RGB, and HSL values together, so you can copy whichever format your context expects without a separate conversion step. Palette mode generates between 2 and 10 colors at once and is where the harmony and locking features earn their keep. The two modes share the same HSL constraints, so a saturation and lightness range you dialled in for a single accent color carries straight over when you expand to a full palette.

Tips and common mistakes

• Press Space to shuffle. It is faster than clicking when you are hunting for a starting point.
• Don't ignore contrast. A harmonious palette is not automatically accessible — check text-on-background pairs against WCAG contrast ratios separately before shipping.
• Constrain lightness for backgrounds. Very light or very dark page backgrounds need a tighter lightness range than accent colors.
• Lock before you shuffle. If you find one perfect color, lock it first, or the next shuffle will replace it.

All color generation, conversion, and history run entirely in your browser; nothing is sent to a server.