Random Color Generator
Get random colors with their HEX, RGB, or HSL codes in one click. Choose bright, pastel, dark, or muted colors, keep them in one hue like blue or green, and lock the ones you like while you generate the rest again.
What the random color generator does
It picks colors at random and shows each one as a swatch with its color code. With no style or hue chosen, any of the 16,777,216 colors a screen can show is equally likely, from pure black to pure white.
Pure chance gives a lot of muddy colors, so you can narrow it down. A color style limits how strong and how light the colors are, and a hue keeps them in one color family. Lock any color you want to keep, and only the others change when you generate again.
Why use our random color generator
- ·Free. No signup, no paywall, and no limit on how often you generate.
- ·Colors you can use. Pick bright, pastel, dark, muted, or gray colors, in any hue or just one.
- ·Lock and generate again. Keep the colors you like and swap out the rest.
- ·Ready to paste. Copy HEX, RGB, or HSL codes one at a time, as a list, or as CSS variables.
- ·Private. Colors are made on your device. Nothing is sent to a server.
How to generate random colors
- 1
Choose how many colors you want
Set Number of colors to any amount from 1 to 50. A set of random colors appears as soon as the page loads, so you can start copying right away.
- 2
Pick a color style and hue
Choose a Color style such as Bright, Pastel, or Dark, and a Hue such as Blue or Green to keep every color in one family. Changing either one gives you new colors straight away.
- 3
Lock the colors you like
Click the lock icon under a color to keep it. Generate new colors then replaces only the unlocked ones, so you can build up a set you like one color at a time.
- 4
Copy the color codes
Choose HEX, RGB, or HSL under Color code. Copy one color with the button next to it, copy every color as a list, or copy them all as CSS variables.
Random color generator options
Color style and Hue work together. The style sets how strong (saturation) and how light (lightness) each color is, and the hue sets which part of the color wheel it comes from. Every value inside a range is equally likely.
Color styles
| Style | What you get | Saturation | Lightness |
|---|---|---|---|
| Any color | With Any hue, every possible color, including near-black, near-white, and grays (these ranges are not used). With a hue picked, a wide range of that hue. | 25% to 100% | 20% to 80% |
| Bright | Strong, saturated colors, like a highlighter or a sports logo. | 80% to 100% | 45% to 60% |
| Pastel | Soft, light colors, like baby blue, mint, and blush pink. | 50% to 90% | 80% to 90% |
| Dark | Deep colors such as navy, forest green, and burgundy. | 40% to 90% | 12% to 28% |
| Muted | Dusty, grayish colors such as sage, slate, and dusty rose. | 15% to 40% | 35% to 65% |
| Grays only | Black, white, and the 254 grays between them. Hue is not used. | 0% | 0% to 100% |
The HSL code you copy is worked out from the final color, so it can be 1% or 1° away from these ranges because of rounding.
Hues
| Hue | Hue angle in HSL |
|---|---|
| Red | 345° to 15° |
| Orange | 15° to 45° |
| Yellow | 45° to 70° |
| Green | 70° to 160° |
| Cyan and teal | 160° to 195° |
| Blue | 195° to 255° |
| Purple | 255° to 290° |
| Pink and magenta | 290° to 345° |
Each range starts at the first angle and stops just before the second, so the eight hues cover the whole wheel with no gaps. Red wraps around 0°.
How to use HEX, RGB, and HSL color codes
HEX, RGB, and HSL are three ways to write the same color. Pick the one your app or code expects under Color code before you copy.
- ·CSS. All three work as a value, for example
color: #3B82F6;orbackground: hsl(217, 91%, 60%);. Copy as CSS variables gives you a:rootblock, and you use each color asvar(--color-1). - ·Tailwind CSS. Put a HEX code in square brackets, such as
bg-[#3B82F6]. - ·Design apps. Figma, Canva, and Photoshop all have a HEX field in their color picker. Paste the HEX code there.
- ·Game engines and 3D apps. Many expect red, green, and blue from 0 to 1 instead of 0 to 255. Paste the HEX code into the HEX to RGB converter to get those values.
How to make a color palette from random colors
Colors picked by pure chance rarely look good together, because their strength and lightness are all over the place. These steps get you to a set that matches much faster.
- ·Use one style for the whole set. Colors with similar saturation and lightness look like they belong together. Pastel and Muted sets are the easiest to match.
- ·Start from one color you like. Lock it, then generate again until the others fit. Lock each new color that works, and keep going until the whole set is locked.
- ·Pick a hue for shades of one color. A single hue such as Blue gives a monochrome set that almost always works, for example for a chart or a brand with one main color.
- ·Want brown, tan, or olive? There is no Brown hue, because brown is dark orange. Set Hue to Orange and Color style to Dark or Muted for browns and tans, or Yellow and Dark for olives.
- ·Check text before you use a color as a background. The Aa on each swatch shows whether white or black text reads better. For body text, WCAG asks for a contrast ratio of at least 4.5:1. The HEX to RGB converter shows the exact ratio.
When to use a random color generator
- ·Designers. Find a starting point for a logo, a poster, or a website color scheme when you do not know where to begin. Lock one color you like and keep generating until the rest fit with it.
- ·Developers. Get placeholder colors for charts, avatars, tags, or test data. Copy as CSS variables gives you a ready-made :root block to paste into a stylesheet.
- ·Artists and drawing challenges. Set Number of colors to 1, 3, or 5 and draw something using only those colors. Pastel or Muted sets are a good place to start.
- ·Games and classrooms. Pick a random color for a party game, a team, or a class activity. A single large color is easy to show on a projector or a shared screen.
Random color generator questions
- How do I generate a random color?
- Open the page and random colors appear right away. Click Generate new colors to get a new set, or set Number of colors to 1 if you only want one color. Each color shows its code and a copy button.
- How do I get a random HEX color code?
- Leave Color code set to HEX and copy the code under any color, such as #3B82F6. Turn off Uppercase HEX if you prefer lowercase codes like #3b82f6. Both work the same in CSS and design apps.
- How do I keep a color I like?
- Click the lock icon under it. Locked colors stay in place when you click Generate new colors or change the style or hue, and only the unlocked colors change. Click the icon again, or Unlock all, to release them.
- Can I get random colors of one shade, like random blue colors?
- Yes. Set Hue to Blue, or to any other color family, and every color will fall in that part of the color wheel. Combine it with a style, for example Pastel and Pink for soft pinks, or Dark and Green for forest greens.
- What do Bright, Pastel, Dark, and Muted mean?
- Each style picks saturation and lightness from a fixed range. Bright colors are strong and saturated, Pastel colors are soft and light, Dark colors are deep, and Muted colors are grayish. The table on this page lists the exact ranges.
- Why do some dark orange or yellow colors look brown or olive?
- Brown is dark orange, and olive is dark yellow. When the lightness is low, those hues stop looking orange or yellow. There is no Brown option, so to get browns, set Hue to Orange and Color style to Dark or Muted.
- What is the difference between HEX, RGB, and HSL?
- They are three ways to write the same color. HEX writes the red, green, and blue amounts as a six-digit code like #3B82F6. RGB writes them as numbers from 0 to 255, like rgb(59, 130, 246). HSL writes the color as a hue angle, a saturation percentage, and a lightness percentage, like hsl(217, 91%, 60%).
- How do I use the colors in CSS?
- Copy any single code and paste it as a value, such as color: #3B82F6;. To use the whole set, click Copy as CSS variables. You get a :root block with --color-1, --color-2, and so on, which you use as var(--color-1).
- Does the generator check whether text is readable on the colors?
- Each color shows the letters Aa in white or black, whichever has more contrast on that color. It does not show the exact contrast ratio. Paste the code into the HEX to RGB converter to see the ratio for white and black text.
- Are the colors really random?
- Yes. Every pick uses your browser's secure random number generator, crypto.getRandomValues(). With Any color and Any hue, red, green, and blue are each picked from 0 to 255, so all 16,777,216 colors are equally likely.
- Is the random color generator free?
- Yes. It is free with no signup, and it runs in your browser, so nothing is sent to a server. You can make up to 50 colors at a time and generate as often as you like. Colors are not saved, so copy them before you leave the page.