Generate a random color or a harmonised palette in one click. Five harmony modes (random, analogous, complementary, triadic, tetradic) and a 1–20 color count cover most real design needs. Uses crypto.getRandomValues for genuine randomness and constrains saturation/lightness so the output is always usable — no washed-out pastels, no eye-searing neon. If you already have an image you want colours from, the palette extractor pulls dominant hex values straight out of it.
How the randomness works
Under the hood the tool generates random HSL values within constrained ranges:
- Hue (H): 0 to 360° by default (full wheel)
- Saturation (S): 40 to 85% (rich but not extreme)
- Lightness (L): 40 to 65% (mid-tone — not too dark, not too light)
These defaults keep colors in the “useful design palette” zone. A fully random HSL (or RGB) would give too many near-white or near-black results; the constraints cut those out and guarantee that every swatch could plausibly be used in a real UI.
Conversion from HSL to hex follows the standard CSS Color Module Level 3 formula. RGB values are shown alongside the hex for convenience.
Harmony modes
The five modes differ in how hues relate to each other on the color wheel:
- Random: each color picked independently, no structural relationship.
- Analogous: all colors within ±30° of a base hue. Smooth and harmonious, like shades of a sunset or forest.
- Complementary: two opposite hues (180° apart), producing high-contrast pairs. Red/green, blue/orange, purple/yellow are classic complementary pairs.
- Triadic: three hues spaced 120° apart. Vibrant, balanced, and richer than complementary. The RGB primaries (red/green/blue) are a triadic set.
- Tetradic: four hues spaced 90° apart. Maximum variety, but also the hardest to balance without one color dominating.
For larger counts (>3 for triadic, >4 for tetradic), the tool repeats the pattern with slight jitter in saturation and lightness so you get variation rather than just repeating the same colors.
Example: UI palette
For a web UI, try analogous with 5 colors. You’ll get a family of closely related hues — useful for backgrounds, cards, subtle accents, and elements that need to feel cohesive. Pair one of them with a single complementary color for primary buttons and calls-to-action, and you have a full UI palette.
Example: brand colors
For a logo or brand palette, try triadic with 3 colors. You get three vibrant but balanced hues that work well together without competing. Many well-known brands use triadic or near-triadic color systems (think the Olympic rings, which are essentially tetradic plus black). If you already have a base color in mind rather than starting from random, the color harmony visualizer picks triadic partners deterministically around whatever hue you give it.
Example: illustration palette
For illustration or data visualisation, try tetradic with 4–6 colors. You get enough variety to make distinct categories visually separable, with the structural harmony that keeps everything looking like it belongs to the same palette. For charts, tetradic gives about the right number of categorical colors before things get hard to tell apart.
Why avoid pure random RGB?
A naive random RGB generator picks each of r, g, b from 0–255. That’s 16.7 million possible colors — but most of them are dark muddy browns, near-whites, or desaturated greys, none of which are particularly useful. The perceptual color space is much more uneven than the RGB cube. HSL maps more closely to how humans describe colors (hue name, colorfulness, brightness), so constraining saturation and lightness there cuts out the unusable zones without biasing the hue distribution.
What this tool does not do
It doesn’t save palettes. Each generation is throwaway; if you like one, copy the hex values before generating again. A future version could persist palettes to localStorage, but for now the tool is stateless.
It doesn’t apply accessibility-aware contrast. The saturation/lightness ranges produce visually pleasant mid-tones but don’t guarantee WCAG AA or AAA contrast for text-on-background use. Use a dedicated contrast checker to verify.
It doesn’t name the colors. “Sage green” or “dusty rose” are subjective; the tool just outputs hex, HSL, and RGB. For named-color palettes, use a design tool with a built-in color dictionary.
It doesn’t support custom range sliders in the UI. The ranges are fixed at the sensible defaults; adjusting them would require adding six more inputs. The calculator accepts custom ranges via its API if you need them programmatically.
It doesn’t generate gradients or color scales. “5 steps from red to blue” is a different operation — use a dedicated gradient generator. This tool produces discrete palettes, not continuous scales.