Does the tool run in my browser or upload my data?

Everything runs in your browser. Colors are picked client-side with Math.random and copied with the native clipboard API. No palette is sent to a server, so the tool keeps working offline after the page loads.

How do I generate a new color palette?

Press the Spacebar or click "Generate New" to roll a fresh palette. The tool builds 5 colors at a time. Any swatch you have locked stays put while the unlocked ones change.

How many colors does each palette have?

Exactly 5. Each swatch is an independent random 24-bit hex code drawn from the full 16,777,216-value RGB space (#000000 to #FFFFFF), not a harmony scheme calculated from a base hue.

How does the swatch decide between dark and white text?

It computes BT.601 perceived luma, (0.299*R + 0.587*G + 0.114*B) / 255, and shows dark text when that value is above 0.6, white text otherwise. This is a quick readability heuristic, not the WCAG contrast formula.

Are the generated palettes accessible?

Not automatically. Random colors can pair text and background below the WCAG AA 4.5:1 contrast ratio for normal text. Always verify a real text-on-background pair in the Color Contrast Checker before shipping.

Can I convert the hex codes to RGB or HSL?

Yes. Copy any hex value and paste it into the Color Converter to get RGB, HSL, and OKLCH equivalents. For example #4A90D9 is rgb(74, 144, 217) and hsl(211, 65%, 57%).

Color Palette Generator — Lock & Export Schemes

Q: Is this color palette generator free?

Yes. The generator is 100% free with no signup and no usage cap. Generated hex codes are just numbers, so you can use any palette in personal and commercial projects without attribution.

Q: How does the lock feature work?

Click the lock icon on a swatch to freeze it. On the next generation, locked colors are kept exactly and only unlocked slots are re-randomized, so you can build a scheme around a fixed brand color.

Color Palette Generator: Free Random Hex Color Schemes

A color palette generator builds a set of colors you can drop straight into a design. This one rolls 5 random hex codes at once. Press Spacebar or click Generate New to reroll, lock any swatch you want to keep, and click a code to copy it. It runs 100% in your browser — free, no upload.

How to generate a color palette

Press Spacebar or click Generate New to roll a fresh set of 5 random hex colors.
Hover a swatch and click the lock icon to freeze a color you like — it survives the next reroll.
Keep pressing Spacebar; only the unlocked slots change, so you can shape a scheme around one or two fixed colors.
Click the copy icon on any swatch to send its hex code to your clipboard.
Paste the hex into CSS (color/background-color), or into the Color Converter for RGB, HSL, and OKLCH.

What a hex color is and how this tool builds a palette

A hex color is a 24-bit RGB value written as #RRGGBB — two hex digits each for red, green, and blue, each channel ranging 0–255 (00–FF). That gives 256 × 256 × 256 = 16,777,216 possible colors, from #000000 (black) to #FFFFFF (white). The hex notation is defined in the MDN CSS <hex-color> reference.

This generator picks each of its 5 swatches independently with Math.floor(Math.random() * 16777215), then pads the result to six hex digits. It is a true random generator, not a harmony engine — it does not derive the other four colors from a base hue. To build a classic harmony instead, lock one color you like and reroll the rest, or pair this with a converter to nudge values by a fixed angle on the color wheel.

Each swatch also auto-picks readable overlay text. The tool computes BT.601 perceived luma — (0.299·R + 0.587·G + 0.114·B) / 255 — and shows dark text above 0.6, white text below. Those weights (green heaviest, blue lightest) mirror how the human eye judges brightness, the same idea behind the WCAG relative-luminance definition, though WCAG uses different coefficients and a gamma step.

Color harmonies and their wheel angles

Designers describe palettes by the geometric spacing of their hues on the 360° color wheel. Use these angles to turn a single base hue into a deliberate scheme — lock a color here, then rotate the others by the offsets below.

Harmony	Hue offset from base	Character
Analogous	±30°	Adjacent hues; calm, unified, low contrast
Complementary	+180°	Opposite hue; maximum contrast, high energy
Split-complementary	+150°, +210°	Strong contrast, less tension than complementary
Triadic	+120°, +240°	Three evenly spaced hues; vibrant and balanced
Tetradic (rectangle)	+60°, +180°, +240°	Two complementary pairs; richest, hardest to balance
Square	+90°, +180°, +270°	Four hues at even quarters; bold, very high variety
Monochromatic	0° (vary S / L)	One hue, different tints and shades; focused, clean

Worked examples: hex, RGB, HSL, and contrast

Hex → RGB → HSL

#4A90D9 → rgb(74, 144, 217) → hsl(211, 65%, 57%)

Split 4A=74, 90=144, D9=217, normalize each to 0–1, then take max/min to get lightness 57% and a hue of 211° (a confident blue).

Overlay text decision · #50C878

Luma = (0.299·80 + 0.587·200 + 0.114·120) / 255 = 0.608. Just over the 0.6 threshold, so this emerald gets dark overlay text.

Edge case · mid-gray #808080 fails WCAG

Gray #808080 has luma 0.502, so the tool puts white text on it. But white on #808080 scores only ~3.95:1 — below the WCAG AA 4.5:1 minimum for normal text. The swatch looks fine, yet that pairing would fail an audit. Always confirm a real text/background pair in the Color Contrast Checker.

WCAG contrast thresholds for color choices

Contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1/L2 are the relative luminances of the lighter and darker color. It ranges from 1:1 (identical) to 21:1 (black on white). These are the WCAG 2.2 minimums:

Content	AA minimum	AAA minimum
Normal text (< 18pt)	4.5:1	7:1
Large text (≥ 18pt, or 14pt bold)	3:1	4.5:1
UI components & graphics	3:1	—

The readability shortcut this tool takes — and where it breaks

The light/dark overlay uses BT.601 luma with a single 0.6 cutoff. That is fast and good enough for a quick label, but it is not the WCAG contrast test. WCAG linearizes each channel (the gamma step where values ≤ 0.03928 are divided by 12.92) and weights them 0.2126 R, 0.7152 G, 0.0722 B — far more green-heavy than BT.601’s 0.587. So a swatch can get clean-looking overlay text here and still fail a real audit.

The classic trap is pure blue #0000FF: BT.601 luma is just 0.114, so it reads "very dark" and gets white text — correct, since white on #0000FF clears 8:1. But yellow #FFFF00 (luma 0.886) gets dark text that also passes, while many mid-tone greens and grays sit right at the 0.6 line where the heuristic and the WCAG result disagree. Treat the overlay as a hint, never as proof of accessibility.

Runs 100% in your browser

Your palette never leaves your device. Colors are generated locally with Math.random and copied with your browser's native clipboard — no uploads, nothing leaves your device. I tested the tool by rerolling dozens of palettes, locking 1–4 swatches at a time to confirm only the unlocked slots change, copying every code, and checking the overlay-text rule against hand-computed luma for blue, yellow, emerald, and mid-gray. Generation stays instant on every Spacebar press.

Frequently asked questions

Is this color palette generator free?

Yes — 100% free with no signup. Hex codes are just numbers, so any palette you create is free to use in personal and commercial work without attribution.

Does the tool upload my data?

No. Colors are generated and copied entirely in your browser with JavaScript. Nothing is sent to a server, so the generator keeps working offline after the page loads.

How does the lock feature work?

Click the lock icon on a swatch to freeze it. On the next Spacebar press or Generate New, locked colors stay exactly the same and only the unlocked slots are re-randomized.

Are the palettes accessible by default?

Not automatically. Random colors can pair below the WCAG AA 4.5:1 ratio for normal text. Check any real text-on-background pair in the Color Contrast Checker before you ship.