Random Color Generator
A random color generator picks a color code with equal chances: here one of the 16,777,216 six-digit hex codes, or one of the 148 CSS named colors such as tomato and steelblue. Press Generate colors, tick hue families to stay within reds, blues or grays, and get each color as hex, RGB or HSL.
Result
- 01 springgreen #00ff7f
- 02 slategrey #708090
- 03 tomato #ff6347
- 04 orchid #da70d6
How do I make a random palette?
- Choose CSS named colors for colors with a name, or Any hex code for the full range.
- Tick hue families to keep the palette warm, cool or gray; leave them all clear for anything.
- Press Generate colors and copy the codes as hex, RGB or HSL.
The sample above draws 4 named colors with seed C0HR-5HX8-VT3M: springgreen (#00ff7f), slategrey (#708090), tomato (#ff6347), orchid (#da70d6). Each swatch carries its name in black or white, whichever stands out more on that color. To draw from colors of your own, such as team colors or paint names, paste your own list into the list randomizer.
Any hex code: 16,777,216 colors
A hex code such as #ff6347 is three bytes, red, green and blue, each from 00 to ff, so there are 256 × 256 × 256 = 16,777,216 codes. Any hex code mode draws a whole number below 16,777,216 without modulo bias and writes it as six hex digits, so every code from #000000 to #ffffff has the same chance. With hue families ticked, codes outside them are thrown back and drawn again until one fits, which keeps the choice uniform among the codes that remain. Without repeats, a code that already came up is drawn again as well.
The 148 CSS named colors
CSS Color Module Level 4 defines 148 color keywords, from aliceblue to yellowgreen. The spec traces 16 of them (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow) to the VGA palette and most of the rest to the X11 color list. Some keywords are spellings of the same color, so the 148 names cover 139 different hex values:
- aqua = cyan: #00ffff
- darkgray = darkgrey: #a9a9a9
- darkslategray = darkslategrey: #2f4f4f
- dimgray = dimgrey: #696969
- fuchsia = magenta: #ff00ff
- gray = grey: #808080
- lightgray = lightgrey: #d3d3d3
- lightslategray = lightslategrey: #778899
- slategray = slategrey: #708090
The names do not follow one system. darkgray has a lightness of 66%, lighter than gray at 50%, and the keyword purple sits at a hue of 300°, between blue and red. Drawing from the named colors picks a keyword, so a color with two names is twice as likely as a color with one.
Hue families, worked out from the hex value
The hue family of a color is computed, not chosen by hand: the hex value is converted to HSL and the hue angle decides the band. A color with saturation under 10%, or lightness under 6% or over 95%, counts as white, gray or black whatever its hue. That is why snow and ivory sit with the neutrals, and why pink, at a hue of 350°, falls in the Red band. Ticking one family gives random shades of that hue, light and dark, rather than one fixed color.
| Family | Hue angle | Named colors |
|---|---|---|
| Red | 345° to 15° | 14 |
| Orange | 15° to 45° | 25 |
| Yellow | 45° to 70° | 11 |
| Green | 70° to 165° | 20 |
| Cyan | 165° to 195° | 15 |
| Blue | 195° to 255° | 21 |
| Violet | 255° to 290° | 7 |
| Magenta | 290° to 345° | 12 |
| White, gray, black | any (low saturation, very dark or very light) | 23 |
Readable text on every swatch
Each swatch is labeled in black or white, whichever has the higher contrast ratio against it. The ratio uses relative luminance, in which green light counts most and blue light least, as it does in how bright a color looks, and compares the lighter color with the darker one: (L1 + 0.05) / (L2 + 0.05). Black text wins on most of the named colors; white text wins on 32 of 148, the dark ones such as navy and maroon. For body text, MDN’s guide to color contrast gives a minimum ratio of 4.5:1. In the sample, springgreen gets black text at 15.61:1, slategrey gets black text at 5.18:1, tomato gets black text at 7.13:1, orchid gets black text at 7.27:1.
Every named color, by hue family
Red (14)
- brown #a52a2a
- crimson #dc143c
- darkred #8b0000
- firebrick #b22222
- indianred #cd5c5c
- lightcoral #f08080
- lightpink #ffb6c1
- maroon #800000
- mistyrose #ffe4e1
- pink #ffc0cb
- red #ff0000
- rosybrown #bc8f8f
- salmon #fa8072
- tomato #ff6347
Orange (25)
- antiquewhite #faebd7
- bisque #ffe4c4
- blanchedalmond #ffebcd
- burlywood #deb887
- chocolate #d2691e
- coral #ff7f50
- darkgoldenrod #b8860b
- darkorange #ff8c00
- darksalmon #e9967a
- goldenrod #daa520
- lightsalmon #ffa07a
- linen #faf0e6
- moccasin #ffe4b5
- navajowhite #ffdead
- oldlace #fdf5e6
- orange #ffa500
- orangered #ff4500
- papayawhip #ffefd5
- peachpuff #ffdab9
- peru #cd853f
- saddlebrown #8b4513
- sandybrown #f4a460
- sienna #a0522d
- tan #d2b48c
- wheat #f5deb3
Yellow (11)
- beige #f5f5dc
- cornsilk #fff8dc
- darkkhaki #bdb76b
- gold #ffd700
- khaki #f0e68c
- lemonchiffon #fffacd
- lightgoldenrodyellow #fafad2
- lightyellow #ffffe0
- olive #808000
- palegoldenrod #eee8aa
- yellow #ffff00
Green (20)
- aquamarine #7fffd4
- chartreuse #7fff00
- darkgreen #006400
- darkolivegreen #556b2f
- darkseagreen #8fbc8f
- forestgreen #228b22
- green #008000
- greenyellow #adff2f
- lawngreen #7cfc00
- lightgreen #90ee90
- lime #00ff00
- limegreen #32cd32
- mediumaquamarine #66cdaa
- mediumseagreen #3cb371
- mediumspringgreen #00fa9a
- olivedrab #6b8e23
- palegreen #98fb98
- seagreen #2e8b57
- springgreen #00ff7f
- yellowgreen #9acd32
Cyan (15)
- aqua #00ffff
- cadetblue #5f9ea0
- cyan #00ffff
- darkcyan #008b8b
- darkslategray #2f4f4f
- darkslategrey #2f4f4f
- darkturquoise #00ced1
- lightblue #add8e6
- lightcyan #e0ffff
- lightseagreen #20b2aa
- mediumturquoise #48d1cc
- paleturquoise #afeeee
- powderblue #b0e0e6
- teal #008080
- turquoise #40e0d0
Blue (21)
- blue #0000ff
- cornflowerblue #6495ed
- darkblue #00008b
- darkslateblue #483d8b
- deepskyblue #00bfff
- dodgerblue #1e90ff
- lavender #e6e6fa
- lightskyblue #87cefa
- lightslategray #778899
- lightslategrey #778899
- lightsteelblue #b0c4de
- mediumblue #0000cd
- mediumslateblue #7b68ee
- midnightblue #191970
- navy #000080
- royalblue #4169e1
- skyblue #87ceeb
- slateblue #6a5acd
- slategray #708090
- slategrey #708090
- steelblue #4682b4
Violet (7)
- blueviolet #8a2be2
- darkorchid #9932cc
- darkviolet #9400d3
- indigo #4b0082
- mediumorchid #ba55d3
- mediumpurple #9370db
- rebeccapurple #663399
Magenta (12)
- darkmagenta #8b008b
- deeppink #ff1493
- fuchsia #ff00ff
- hotpink #ff69b4
- magenta #ff00ff
- mediumvioletred #c71585
- orchid #da70d6
- palevioletred #db7093
- plum #dda0dd
- purple #800080
- thistle #d8bfd8
- violet #ee82ee
White, gray, black (23)
- aliceblue #f0f8ff
- azure #f0ffff
- black #000000
- darkgray #a9a9a9
- darkgrey #a9a9a9
- dimgray #696969
- dimgrey #696969
- floralwhite #fffaf0
- gainsboro #dcdcdc
- ghostwhite #f8f8ff
- gray #808080
- grey #808080
- honeydew #f0fff0
- ivory #fffff0
- lavenderblush #fff0f5
- lightgray #d3d3d3
- lightgrey #d3d3d3
- mintcream #f5fffa
- seashell #fff5ee
- silver #c0c0c0
- snow #fffafa
- white #ffffff
- whitesmoke #f5f5f5
List checked against W3C CSS Working Group on .
Questions about random colors
How many colors can a random color generator produce?
A random color generator can produce 16,777,216 colors with Any hex code: every six-digit hex code from #000000 to #ffffff. With CSS named colors it draws from 148 keywords, which cover 139 different colors because some colors have two names, such as aqua and cyan.
How do I generate a random hex color?
A random hex color is a number from 0 to 16,777,215, drawn with equal chances and written as six hex digits. On the color generator, choose Any hex code and press Generate colors; set Write as to RGB or HSL to get the same color in that notation.
Can I get a random color in one hue, like blue?
Yes. The color generator keeps to the hue families you tick, such as Blue for random shades of blue. Families are worked out from each color’s hue angle, and with Any hex code the generator keeps drawing until a code falls in a ticked family.
Why is the label white on some colors?
On each color swatch the label is black or white, whichever has the higher contrast ratio against the color by the relative luminance formula. Of the 148 named colors, 32 get white text, mostly dark ones such as navy and maroon.