Random Color Generator
| Named color | HEX | The story |
|---|---|---|
| red | #FF0000 | the original web palette |
| teal | #008080 | the calm half-blue |
| gold | #FFD700 | not quite yellow |
| crimson | #DC143C | Harvard's argument-starter |
| rebeccapurple | #663399 | named for Rebecca Meyer, 2014 |
One button, three dialects: every draw lands as a HEX code, an RGB triple and an HSL triple - the same color in the three notations designers and CSS argue in - with a big swatch so your eyes get a vote and copy buttons for the value you need. HSL is the honest one: it draws in hue, saturation and lightness, so the dice land on colors rather than on dark grays.
The palette table below is the escape hatch from randomness: the web's named colors, from red to rebeccapurple, each with its HEX - the shortcuts every stylesheet reaches for before a random draw feels right. Whether you seed a design, test a theme, or just want tomorrow's accent color to be nobody's guess, the draw takes one click.
How to use
- Click draw - the swatch repaints and the HEX, RGB and HSL readouts update together; copy whichever your stylesheet speaks.
- Prefer punchy colors? The draw biases toward saturated and mid-light values in HSL space, so you get usable accents instead of near-black noise.
- Need a classic instead? Copy a named color from the table - CSS honors all of them, including the purple with a person's name in it.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
Notation, not color: HEX packs the red, green and blue bytes into one code (#3aa0e8), RGB lists them as numbers (58, 160, 232), and HSL describes the same color as hue, saturation and lightness (201, 80%, 57%). CSS accepts all three; humans argue about all three. HSL wins for tweaking - raise the lightness and you get the same color a step brighter, which RGB makes you compute.
Why do random RGB draws look gray and boring?
Because three independent dice usually land mid-range: red 120, green 130, blue 125 is a gray no matter how you roll it. This generator draws in HSL space instead - full hue range, saturation and lightness kept in the usable band - so every roll produces a color with an opinion. It is the difference between random bytes and random colors.
What is rebeccapurple?
CSS's named color #663399 - added to the standard in 2014 in memory of Rebecca Meyer, daughter of web pioneer Eric Meyer, who asked the community to honor her sixth birthday that way. It is the only named color chosen by public vote, and the table keeps it as the palette's most human entry.
How do I use these colors in CSS?
Any of the three notations works: color: #3aa0e8; or color: rgb(58 160 232); or color: hsl(201 80% 57%); - modern CSS even lets you skip the commas. Set the color once as a variable (--accent) and the whole theme follows; the copy buttons hand you the value already formatted for exactly that.
Are the draws truly random?
They use the browser's random source, uniform over hue and over the usable saturation-lightness band - fair dice, in other words, but a color scheme is a sequence, not a draw. Designers use one roll as a seed and then adjust HSL by hand; the table of named colors remains the fastest route when the job needs a color with a name and a history instead of one with a roll of the dice.