Need a color for a mockup, a chart or a blank canvas, and would rather not pick one out of habit? This free random color generator draws colors from the full 24-bit range a screen can show and puts each one on a live swatch beside its code. Choose how many you want in Count — anything from 1 to 50 — tick the formats you need, and press Generate. The page opens on a single color in HEX, so the first result is one click away. HEX Code is ticked from the start, RGB Code and HSL Code sit beside it, and any combination of the three can be switched on at once. The gear button next to Generate opens Advanced Options, where you can limit the colors to one kind or range, rule out repeats and change how HEX is written.
Every color is made in your browser through the Web Crypto API (crypto.getRandomValues), which supplies cryptographically strong random bytes from your system's own source of randomness, rather than by a pseudo-random function such as Math.random(). A color on screen is three channels — red, green and blue — each a whole number from 0 to 255, and one random byte holds exactly 256 values. So each channel is simply one byte, with nothing in between: no remainder is taken, and no shade is favored by a conversion step. That makes all 16,777,216 colors the page can produce exactly equally likely, every time you press Generate. A narrower range in Advanced Options keeps that promise inside the range: colors are still drawn from the whole space and any that fall outside are set aside, so every color the range allows has the same chance. Your colors are never sent to our server, so we never see or log them, and once the page has loaded it keeps working with the connection switched off.
The three formats describe the same color in three ways. HEX Code is the six-digit form used across CSS and most design tools, like #0778ff; it is written in lower case with a leading #, and Uppercase and Without # in Advanced Options change that for tools that expect otherwise. RGB Code spells out the three channels, as in rgb(7, 120, 255), which suits code that works on each channel separately. HSL Code describes the color by hue, saturation and lightness, as in hsl(213, 100%, 51%), the easiest form to adjust by hand afterwards. All three paste straight into a stylesheet. They are not equally precise, though. HEX and RGB are exact; HSL is rounded. The page writes hue, saturation and lightness as whole numbers, and for about 89% of colors that rounded value does not convert back to exactly the same color: #646503 is shown as hsl(61, 94%, 20%), which converts back to #616303. The difference is never more than 5 steps in a channel and usually 1 or 2 — invisible on screen, but real if you store the HSL value and expect the original HEX back. Keep HEX or RGB as the value you save.
One color appears as a single chip in the middle of the result; several appear as a numbered list, one color per row, with the chosen formats side by side and a small contrast badge at the end. A list of more than three colors scrolls inside the box, and the arrow in its corner opens it to full height; the page remembers which way you left it. Click any code to copy just that code. The copy button at the end of a row copies every code for that color on one line, separated by spaces. Click the swatch itself and your browser's own color picker opens: choose a different color there and every code in that row is rewritten to match, in each format you have switched on, along with its badge. Copy All copies the whole batch, one color per line, and Save to File writes the same text to a plain .txt file; both follow any color you changed in the picker. History keeps your last 10 batches in this browser, exactly as they were generated, and Clear empties the result. Your settings, including those in Advanced Options, are remembered for the next visit.
Equally likely colors do not look evenly spread, and knowing what to expect saves pressing Generate for the wrong reason. Measured across the whole range, about 35% of colors are bright and saturated, with HSL saturation of at least 70% and lightness between 35% and 65%. Near-grays, with saturation under 20%, are only about 4%, and very dark colors (lightness under 20%) and very light ones (over 80%) are about 3% each. So a batch of ten from All colors will usually hold several strong colors and seldom a pastel or a charcoal. When you need a particular kind, choose it in Color type: Vivid keeps exactly that bright group, and Pastel, Dark, Muted and Grayscale do the same for theirs. Custom lets you set your own Hue, Saturation and Lightness ranges, and a hue range can run past 0, so 330 to 30 gives reds. The range is checked against the HSL code the page shows, so no code falls outside it, and if it holds too few colors for your Count, the page asks you to widen it rather than repeating colors. Repeats are otherwise possible but rare: tick No duplicates to rule them out, and without it the chance that two of 50 colors from the full range come out identical is about 1 in 13,700.
A random color is often wanted as a background, which raises the one question a swatch cannot answer by eye: will text on it be readable? The web accessibility guideline, WCAG, asks for a contrast ratio of at least 4.5:1 for normal text. Measured across every color this page can produce, black text reaches that on about 65% of them and white text on about 36%, and there is no color on which both fail: the better of the two always reaches at least 4.58:1. So for any random background, black or white text will pass, and the page shows you which. Every color carries a small badge that reads Aa in the better of the two, followed by its contrast ratio. The ratio is rounded down, so it never flatters a color, and it updates when you change the color in the picker. The badge compares only black and white text; for a brand color or any other text color, run the pair through a contrast checker.
Random is not the same thing as harmonious. Every color in a batch is drawn on its own, with no knowledge of the others, so the generator never builds a palette in the designer's sense — no complementary pairs, no analogous runs, no shared lightness. A narrower range changes the character of a batch, not that rule: pastels or a run of blues still arrive one by one, with nothing tying them together. That is the point of it: it gives you the color you would not have picked, which is what breaks a habit or a creative block. To turn a random find into something usable, keep the color you like and build around it, rather than pressing Generate until a whole set happens to agree. Hold its hue and step the lightness for tints and shades, or turn the hue by 180 degrees for a contrasting partner. HSL Code is the format that makes those moves arithmetic rather than guesswork.
Why choose this random color generator?
- Every color made in your browser with the Web Crypto API, nothing uploaded
- All 16,777,216 colors exactly equally likely, one random byte per channel
- HEX, RGB and HSL codes for the same color, in any combination
- Up to 50 colors at once, each on a live swatch with a text-contrast badge
- Vivid, Pastel, Dark, Muted and Grayscale, or your own hue, saturation and lightness range
- No duplicates when you need them, and HEX in upper case or without #
- Click a code to copy it, or change any color in your browser's color picker
- Copy All, Save to File and a History of your last 10 batches, kept in your browser
- Free and unlimited: no sign-up, no quota, nothing stored on our servers
Random colors earn their keep wherever a color is needed before anyone has decided on one. Designers use them to break a creative block and to find a starting point their usual palette would never have reached. Developers fill mockups, placeholders and avatars, give each series in a chart its own color while the real theme is still undecided, and test how an interface copes with backgrounds it was not designed for — a batch of 50 from All colors almost always includes at least one very dark or very light color, and Dark or Pastel aims the test at one end. Generative artists and game prototypers feed the values straight into code, where the RGB form drops into most graphics libraries. Teachers put the three formats side by side to show that one color can be written as a code, as three channels or as a position on a color wheel, and why the HSL version is rounded. And anyone labeling, tagging or color-coding a list gets distinct colors without agonizing over which.
A few honest limits are worth knowing. This is a generator, not a palette tool: it does not build color harmonies and does not keep one color fixed while the others change, and a narrower range gives colors of one kind, not colors chosen to go together. The contrast badge compares black and white text only. The page works in the sRGB colors a screen displays — HEX, RGB and HSL — with no transparency and no CMYK, Pantone, OKLCH or named CSS colors; for print, match the color in your print workflow rather than trusting a screen code. The same code can also look slightly different from one display to another, because screens are not calibrated alike. HSL values are rounded, as described above, and unless No duplicates is ticked, a batch is not checked for repeats. What the page does guarantee is narrower and exact: every one of its 16,777,216 colors, or every color inside the range you set, has the same chance on every press, drawn from your browser's cryptographic source and never sent to our server.