Random Color Generator
Get random colors in HEX, RGB or HSL, from pastel to vivid to dark.
Random Color Generator: the tool
Settings
Up to 50.
Result
Choose a style and press Generate. Press a color to copy its value.
Press Generate and get a row of random colors, ready to copy. Choose a style when you want colors that go together in feel, such as soft pastels or deep darks. It is a quick source of inspiration for design, art, games and placeholders, and everything runs in your browser.
How it works
A color is drawn in HSL, which stands for hue, saturation and lightness. The hue, the position on the color wheel from 0 to 359 degrees, is drawn from the whole wheel with equal chance. Saturation and lightness are drawn inside a range that depends on the style: pastel colors are lightly saturated and very light, vivid colors are strongly saturated at medium lightness, dark colors have low lightness, and muted colors are greyish. Every draw uses your browser's cryptographic random generator.
Each color is then converted to RGB, the three red, green and blue channels your screen uses, and to the HEX code, the same three channels written in base sixteen. Choose how to see the colors with Show as, and the swatch shows the value in the format you chose, and the HEX code under it when you do not. The text on each swatch is black or white, whichever reads better on that color.
A set never contains the same color twice. Pressing a swatch copies its value, and Copy all copies the whole row separated by commas. Randomness in HSL gives an even spread of hues but not an even spread to the eye, since people see some hues, such as greens, as covering more space than others.
How to use it
- Choose a style: any color, pastel, vivid, dark, light or muted.
- Enter how many colors you want, up to 50, and choose HEX, RGB or HSL.
- Press Generate colors. The swatches appear in a grid.
- Press a swatch to copy its value, or use Copy all to take the whole set.
Example
Five pastel colors drawn with a fixed sequence, with each color in the three formats. Your own colors will differ every time.
What was set
- Style
- pastel
- How many
- 5
What came out
- Color 1
- #C6F5DE · rgb(198, 245, 222) · hsl(150, 71%, 87%)
- Color 2
- #C2F9C5 · rgb(194, 249, 197) · hsl(123, 83%, 87%)
- Color 3
- #C5ECD2 · rgb(197, 236, 210) · hsl(139, 51%, 85%)
- Color 4
- #B2F5E1 · rgb(178, 245, 225) · hsl(162, 77%, 83%)
- Color 5
- #B5CFE3 · rgb(181, 207, 227) · hsl(206, 46%, 80%)
Good to know
- You can make from 1 to 50 colors at a time, and every color in a set is different.
- The tool does not check that colors work together or that text on them is accessible. If you need to compare contrast, test the pair in a contrast checker.
- Colors are shown as your screen renders them, and screens differ. A color that looks right on your display may look different on another one or in print.
Questions people ask
What do HEX, RGB and HSL mean?
They are three ways of writing the same color. HEX is a six-digit code such as #E4572E. RGB gives the amounts of red, green and blue from 0 to 255. HSL gives hue as an angle from 0 to 359, and saturation and lightness as percentages. CSS accepts all three.
How do the styles differ?
They limit saturation and lightness while keeping the hue free. Pastel colors are light and soft, vivid colors are bright and strong, dark colors are deep, light colors are pale, and muted colors are grey-leaning and calm. Any color allows the whole range.
Can I copy a single color?
Yes. Press a swatch and its value is copied in the format you chose. A short message confirms what was copied.
Are the colors truly random?
The hue, saturation and lightness of each color are drawn from the browser's cryptographic random generator, with every value in the range equally likely. The result is not an even spread to the eye, because color perception is not uniform.
Can I get a palette that matches a color I already have?
Not from this tool. It makes independent random colors. For harmonies built from a base color, use a palette tool that works from your starting color.