Random Color Generator
Press the button to draw random colors, or choose a color rule — monochromatic, analogous, complementary, split-complementary, triadic or tetradic — to get a palette that holds together. Each color comes with HEX, RGB and HSL codes, contrast against white and black, a lock and a copy button. Free, no sign-up.
A rule fixes the hues relative to a random base hue on the RGB color wheel. “Any color” picks each color independently from all 16.7 million.
Colors are drawn with your browser’s cryptographic random number generator when you press the button. Lock a color to keep it; the rule then builds around the first locked color.
Your colors
- #0072B2
rgb(0 114 178)
hsl(201.6 100% 34.9%)Contrast with white 5.1:1 · Contrast with black 4.0:1
- #E69F00
rgb(230 159 0)
hsl(41.5 100% 45.1%)Contrast with white 2.2:1 · Contrast with black 9.3:1
- #009E73
rgb(0 158 115)
hsl(163.7 100% 31%)Contrast with white 3.4:1 · Contrast with black 6.1:1
- #D55E00
rgb(213 94 0)
hsl(26.5 100% 41.8%)Contrast with white 3.8:1 · Contrast with black 5.4:1
- #CC79A7
rgb(204 121 167)
hsl(326.7 44.9% 63.7%)Contrast with white 3.0:1 · Contrast with black 6.8:1
How to Use the Random Color Generator
- 1. Pick a rule. Any color draws each color independently. The other rules choose a random base hue and place the rest of the palette relative to it.
- 2. Choose how many colors. One to ten. With one color you have a random HEX color generator; with five you have a palette.
- 3. Press Generate colors. Nothing is drawn until you press the button, and each press is a fresh draw.
- 4. Lock what you like. A locked color stays through later draws. If you lock a chromatic color, the rule builds the new colors around its hue.
- 5. Copy. Copy a single HEX, RGB or HSL value, all the HEX codes, or the whole palette as CSS custom properties.
The Color Rules
Each rule works on the hue wheel of HSL, the same RGB-based wheel CSS uses: red at 0°, green at 120°, blue at 240°. Angles are measured from a base hue; saturation and lightness stay close to the base so the colors feel related.
| Rule | Hue offsets from the base | Good for |
|---|---|---|
| Monochromatic | 0° — same hue, lightness from dark to light | Calm, cohesive designs; sequential data |
| Analogous | 0°, +30°, −30°, +60°, −60° | Gentle transitions, backgrounds |
| Complementary | 0° and 180° | Strong contrast between two things |
| Split-complementary | 0°, +150°, +210° | Contrast with less tension |
| Triadic | 0°, +120°, +240° | Balanced, lively palettes |
| Tetradic (square) | 0°, +90°, +180°, +270° | Rich palettes; use one hue as dominant |
If you ask for more colors than a rule has hues, it cycles through the hues again and moves the lightness up and down in steps of 14 points so repeats stay distinct. Painters often use a red–yellow–blue (RYB) wheel, where the complement of red is green; on the RGB wheel used here it is cyan. The rules are guides for a starting point, not laws of good taste.
How the Colors Are Drawn
Randomness comes from your browser’s cryptographic generator (crypto.getRandomValues), which is unbiased and unpredictable, and it runs only when you press the button. In Any color mode the red, green and blue values are each a uniform whole number from 0 to 255, so every one of the 256³ = 16,777,216 sRGB colors is equally likely. Because uniform draws from the cube land mostly on mid-tones of modest saturation, fully random colors often look dull or muddy — a rule-based palette usually looks better.
One color, three notations
HEX: #0072b2
RGB: rgb(0 114 178)
HSL: hsl(201.6 100% 34.9%)
Using Random Colors Well
- Check contrast before you use a color for text. The contrast figures under each swatch are measured against white and black; use the Color Contrast Checker for any other pair. WCAG asks for 4.5:1 for normal text.
- Check colorblind safety. About 1 in 12 men have a color vision deficiency, and red–green pairs are the usual failure. Test the palette in the Color Blindness Simulator.
- For charts, prefer a designed palette. Random categorical colors can land close together. The Okabe–Ito palette, which this page starts with, is built for distinguishability.
- Convert between notations with the Color Converter when a tool wants OKLCH, HWB or CMYK.
- Random colors are good for placeholder content, test data, avatars, tag colors and brainstorming a direction — not for brand identity.
Frequently Asked Questions
- Is the random color generator truly random?
- It uses the Web Crypto API (
crypto.getRandomValues), a cryptographically strong source, rather thanMath.random. In Any color mode each channel is uniform, so no color is favored. In the rule modes the base hue is random and the other hues follow the rule exactly. - How many colors can it generate?
- In Any color mode, 16,777,216 — every combination of 256 red, 256 green and 256 blue values. The rule modes produce a smaller family of colors because saturation and lightness are kept in a pleasant range.
- What is the difference between analogous and complementary colors?
- Analogous colors sit next to each other on the hue wheel (within 60° here), so they blend smoothly. Complementary colors sit opposite each other (180° apart), so they contrast strongly. Split-complementary uses the two neighbors of the complement, which keeps the contrast with less clash.
- How do I get a random hex color code?
- Choose Any color, set the number of colors to 1, and press Generate colors. Press Copy HEX to copy the code, such as
#3fa9c4. Every press gives a new one. - Why do my locked colors stay when I generate again?
- That is what locking does: the color is kept in its slot while the other slots are redrawn. With a rule selected, the first locked color sets the base hue, so the new colors harmonize with it.
- Are these palettes accessible?
- Not automatically. A random palette has no guarantee of text contrast or of surviving color blindness. Use the contrast figures under each swatch as a first check, then test pairs in the Color Contrast Checker and the palette in the Color Blindness Simulator.