Random · Color
Random color generator.
Generate random colours and copy the hex code, RGB or HSL value. Pick any colour, or a pastel, vivid, dark or light style. Each swatch shows whether white or black text reads better on it.
Settings
Result
Press Generate colors.
How the random color generator works
In Any colour mode the tool draws the red, green and blue channels independently, each as a whole number from 0 to 255. That gives 256 × 256 × 256 = 16,777,216 possible colours, every one equally likely. The hex code is those three numbers in base 16, written as #RRGGBB, the notation CSS defines for sRGB colours. Because RGB is uniform, fully random colours often look muddy or mid-tone.
The other styles pick a random hue (0 to 359 degrees) and then a saturation and lightness inside a range, and convert that HSL colour to RGB with the algorithm from the CSS Color Module. The ranges are:
- Pastel: saturation 55–85%, lightness 80–90%.
- Vivid: saturation 80–100%, lightness 45–60%.
- Dark: saturation 30–90%, lightness 12–30%.
- Light: saturation 30–90%, lightness 75–95%.
The HSL values shown on each swatch are converted back from the final RGB and rounded, so they can differ by a point from the range used to make the colour.
Text contrast on each swatch
Each swatch lists whether white or black text has the higher contrast on it, and the ratio. The ratio uses the WCAG definition: (L1 + 0.05) / (L2 + 0.05), where L is the relative luminance of the lighter and darker colour. Black on white is 21:1, the maximum. WCAG 2 asks for at least 4.5:1 for normal-size text and 3:1 for large text at level AA. The tool reports the higher of its two options, so you can see at a glance whether a colour could carry text at all. For a specific pair of colours, use the contrast checker.
Using the colours
Click a swatch to copy its hex code, or use Copy all hex codes for the whole batch. Paste the value straight into CSS (color: #3FA7D6;), a design tool or a spreadsheet. Random colours are a starting point for ideas, avatars, chart series and placeholder art. They are not a harmonious palette. For colours that work together, start from one you like and use the palette generator.
Frequently asked questions
How do I generate a random hex color code?
Press Generate colors. Each swatch shows its hex code, such as #3FA7D6. Click a swatch to copy the code.
How many random colors are possible?
In Any colour mode there are 16,777,216 (256 cubed) RGB colours and each is equally likely. The pastel, vivid, dark and light styles draw from smaller ranges.
What is the difference between hex, RGB and HSL?
They describe the same colour three ways. Hex (#RRGGBB) is red, green and blue in base 16. RGB lists the same three channels as 0 to 255. HSL gives hue in degrees, then saturation and lightness as percentages.
How does it choose between white and black text?
It calculates the WCAG contrast ratio of the colour against white and against black and shows whichever is higher, with the ratio. WCAG AA asks for at least 4.5:1 for normal-size text.
Why do fully random colors often look dull?
Uniform random RGB values tend to average out near the middle of the range. Use the Pastel, Vivid, Dark or Light styles for more distinctive results.
Can I get a matching palette?
Not from this tool, which draws independent colours. Pick one colour you like and build harmonies from it with the palette generator.
Sources
Checked
- MDN: Crypto.getRandomValues()
- W3C: CSS Color Module Level 4
- MDN: CSS hex-color
- W3C: WCAG 2.2, contrast ratio and relative luminance definitions
Hexadecimal #RRGGBB notation and the HSL-to-sRGB conversion follow the W3C CSS Color Module Level 4. Contrast ratio and relative luminance follow the WCAG 2.2 definitions. The conversions and the black-on-white 21:1 check are unit-tested. Everything runs in your browser. Nothing you enter or generate is sent anywhere or stored.
Scope
Colours are shown as sRGB values and may look different on different screens. Contrast figures are a text-readability guide, not a full accessibility audit.