How to use the random color generator
This tool picks a random color, shows its HEX, RGB and HSL codes, and builds a five-color palette you can partly lock. It is handy for design ideas or testing a layout against unfamiliar colors.
- Choose a Color style: Any color, Vivid, Pastel, Dark or Muted.
- Press Generate new color, or press Space. The swatch fills with the color, and the card lists its codes plus how well white and black text read on it.
- Press Copy HEX, Copy RGB or Copy HSL to put that code on your clipboard. Press Save to keep the color in your browser, and press it again to remove it.
- In the palette, pick a Palette style and press Shuffle palette. Press Lock under any swatch to keep it while the others change. Click a swatch to copy its HEX, or press Copy palette for all five.
How the colors are made
With Any color, the tool draws red, green and blue each from 0 to 255 using crypto.getRandomValues(), so each of the 16,777,216 possible sRGB colors is equally likely. The other styles draw hue, saturation and lightness inside set ranges and convert them to RGB with the CSS Color Module Level 4 HSL formula. Vivid uses 75 to 100% saturation and 45 to 60% lightness, Pastel uses 55 to 100% and 78 to 90%, Dark uses 30 to 80% and 10 to 28%, and Muted uses 15 to 40% and 35 to 65%.
Palettes pick a base hue and place the five swatches by a color harmony: analogous (within 40 degrees of the base), complementary (the opposite hue, 180 degrees away), triadic (120 degrees apart), split complementary (150 and 210 degrees) or monochrome (one hue). If a swatch is locked, the base hue comes from it, so new colors stay in harmony with it. The text contrast figures use the WCAG contrast ratio, where 4.5:1 is the minimum for normal-size body text.
Worked example
Say the card shows #2563EB. The three pairs of hex digits are 25, 63 and EB, which are 37, 99 and 235 in decimal, so the card reads rgb(37, 99, 235). Its lightness is (235 + 37) / 2 / 255 = 53%, its saturation is 83% and its hue is 221 degrees, so the HSL line reads hsl(221, 83%, 53%). The contrast line reads "White text 5.16:1 · Black text 4.06:1", which means white text passes the 4.5:1 minimum on this blue and black text does not.
Limits and edge cases
HSL values are rounded to whole numbers, so converting an HSL line back to RGB can land one step away from the original. Colors are sRGB on-screen values and can look different on a printed page or an uncalibrated display. Saved colors are kept in this browser's local storage, up to 24, so clearing site data or switching browsers removes them. To pick an exact color instead of a random one, use the color picker. For a palette built from colors you choose, try the color palette generator, and turn two colors into a blend with the gradient generator.
Frequently asked questions
How do I generate a random hex color code?
Press Generate new color. The tool picks three random numbers from 0 to 255 and writes each as two hex digits, so a draw of 37, 99 and 235 becomes #2563EB. Press Copy HEX to copy it.
Are the colors truly random?
In Any color style, yes. Each of the 16,777,216 sRGB colors is equally likely, using the browser's secure random number generator. Vivid, Pastel, Dark and Muted are deliberately limited ranges.
How do I keep one color and change the rest of the palette?
Press Lock under the swatch you want to keep, then press Shuffle palette. Locked swatches stay put and the other colors are built around the locked hue.
Where are my saved colors stored?
Only in this browser's local storage, up to 24 colors. They are not uploaded, and they will not appear on another device or browser.
Sources: W3C, CSS Color Module Level 4; W3C, WCAG 2.2 relative luminance; MDN Web Docs, Crypto.getRandomValues().