Color Palette Generator — Free Random Hex Color Schemes
Generate a 5-color palette of random hex codes, lock the ones you like, and copy each value with one click. Free and 100% in your browser.
Color Palette Generator workspace
How to use
- Press Spacebar or click "Generate New" to create a new palette.
- Click the Lock icon to keep a color you like while generating others.
- Click the Copy icon to copy the Hex code to your clipboard.
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 use the color palette generator
- 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.
Related color & design tools
Turn any palette hex into RGB, HSL & OKLCH
Color Contrast CheckerVerify WCAG AA/AAA contrast on a real pair
Color PickerHand-pick an exact hue, then lock it here
Color MixerBlend two palette colors with OKLCH precision
CSS Gradient GeneratorBuild linear, radial & conic gradients from your colors
Glassmorphism GeneratorFrosted-glass panels tinted with a palette color
Border Radius GeneratorShape the cards that carry your colors
CSS Filter GeneratorAdjust hue, brightness & saturation with filters
Guide: HEX, RGB, HSL & OKLCHHow CSS color formats relate and convert
All ToolsBrowse the full free toolk collection
Last updated: August 23, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Frequently asked questions
How does the lock feature work when rerolling?
Click the lock icon on any swatch to freeze it. The next Spacebar press or Generate New click re-randomizes only the unlocked slots, so you can anchor one or two colors you love and let the rest of the five-color scheme settle around them.
Are these palettes color-harmony based or fully random?
Fully random — each swatch is drawn independently from all 16,777,216 sRGB values with Math.random, not derived from a shared base hue. For deliberate harmonies, lock a keeper and reroll the others, or rotate hues yourself using the wheel angles in the table above.
Why does the swatch overlay text sometimes fail a contrast audit?
The overlay picks black or white using fast BT.601 luma with a 0.6 cutoff, which is not the WCAG test — mid-gray #808080 gets white text here while that pair scores only about 3.95:1, below the AA 4.5:1 minimum. Treat the overlay as a hint and verify real pairs separately.
Does generating palettes upload anything?
No. Colors are rolled locally in your browser and copied through the native clipboard, and Toolk's page analytics do not receive your palette. Nothing leaves your device, and rerolls keep working offline once loaded.
How should I validate a palette before shipping it?
Copy each candidate hex into the Color Contrast Checker at /tools/color-contrast-checker and test the actual text-on-background pairs your UI will ship — random schemes routinely mix mid-tones that sit below the WCAG AA threshold even when every swatch looks crisp.
Need a different tool?
Browse all 99 browser-based tools (99 currently marked free), or tell us what useful utility we should build next.