Random colour generator
Nearest named colour: green
Calculated in your browser · nothing is uploaded
Draws colours from your browser’s cryptographic source, two to ten at a time, held inside a saturation and lightness band so they come out usable rather than merely random. A uniform draw from all 16,777,216 sRGB values returns mostly muddy near-greys; constraining the bands is what avoids that. The mood control switches which band: pastel, light, dark, muted or vivid each narrow it further.
How to use the random colour generator
Most of the RGB cube is not a colour anyone would choose. The 16,777,216 values fill a space whose interior is unsaturated, so a uniform draw returns a muddy near-grey far more often than anything usable, and it wanders in lightness besides, so two draws cannot sit beside each other. Constraining saturation and lightness fixes both, and it is also why these results look like they belong together even though every press is an independent draw. If what you actually want is uniform random RGB, for a test fixture or to demonstrate that point, this is not doing it, and it is worth knowing which of the two you are holding.
The draw itself comes from crypto.getRandomValues rather than Math.random. That is not a security claim, since nothing here needs to be unpredictable; it is just the better generator a browser offers, and it costs nothing to use it. Nothing is remembered between presses either, so a colour you like has to be copied before you generate again. Repeats are possible and vanishingly unlikely, which is not the same statement as impossible.
Where one colour lands matters more than people expect, and that is what the mood bands are for. Light draws the near-whites. A very light tint makes a better page ground than pure white, which glares in a dark room and gives a page no character; lighter grounds are also the easier ones to make accessible, because the lighter the background the more text colours clear a usable ratio against it. Dark draws between roughly 10 and 26 per cent lightness, the region a dark-mode ground sits in, and pure black is the wrong end of that range: #000000 under white text scores around 21:1, high enough to cause halation, the smearing effect that is worse for readers with astigmatism. Material Design settles near #121212 for that reason, and a little saturation in a dark ground reads as designed rather than as an absence of colour. Pure white text is the matching mistake at the other end, where a very light grey smears less. Pastel is the third band worth naming: high lightness with the saturation pulled down, which is what separates a pastel from a merely pale colour, and what makes it work behind content, carrying a hue without competing with anything set on top of it.
What people use it for
- Drawing a colour when you have no starting point
- Getting a random hex code to paste straight into CSS
- Drawing several usable colours at once without designing a set
- Picking a near-white page ground that is not pure white
- Picking a dark-mode ground that is not pure black
- Drawing a pastel to sit behind content
- Copying whatever came up as RGB, HSL or OKLCH
- Seeing the nearest named colour for a value you drew
Questions
The draw is, but the range is not. Uniform random RGB returns mostly muddy greys, which is rarely what anyone wants, so saturation and lightness are held in a band. The mood control narrows it further.
crypto.getRandomValues, not Math.random. Nothing here needs to be unpredictable, so that is not a security claim; it is simply the better generator a browser offers.
16,777,216: 256 values in each of three channels.
Because saturation and lightness are held in a band. That is deliberate. It is what makes several independent draws usable beside each other.
Each press is independent, so repeats are possible but vanishingly unlikely. Nothing is remembered, so copy a colour you want before generating again.
Set the mood. Pastel draws at high lightness with the saturation pulled down, light draws the near-whites, and dark draws between roughly 10 and 26 per cent lightness, which is the region a dark-mode ground sits in.
Essentially never; pastels are too light. Dark text on a pastel is the pairing that works, and it is the main thing pastels are good for: a background that carries hue without competing with the content on it.
A 21:1 contrast against white text causes halation, where the light text appears to smear. It is worse for readers with astigmatism. A very dark grey around #121212 reads better.
Not pure white either. A very light grey reduces the halation further.
Usually not. A little saturation in it reads as designed rather than as an absence of colour.
Pure white glares in a dark room. A very light tint reduces that and gives the page some character.
Generally yes. The lighter the background, the more text colours give usable contrast on it.
Saturation. A pastel keeps some; a light colour is quieter and closer to a tinted white.
Whichever is selected: hex, RGB, HSL or OKLCH. Hex is what most tools expect back.
Only by luck. The bands keep the draw usable, not the pairing; a set drawn at one lightness will have almost no contrast within it. Take any text-and-background pair to the contrast checker.
The palette generator, which spaces hues around the wheel deliberately and offers the classical schemes, rather than drawing each colour on its own.