Color Palette Generator for Web Design
Generate color palettes for website and interface projects. Compare the swatches and copy color values into your design or stylesheet.
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
Generate color palettes for website and interface projects. Compare the swatches and copy color values into your design or stylesheet. A palette supplies colors, not an accessible interface by itself. Test the foreground and background pairs you actually use, including links, small text, controls, and focus states. The contrast checker is the next step after selecting a palette.
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.
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: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
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. Tool input is not sent to Toolk, 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.