Soft website backgrounds
Pastels are gentle enough to sit behind text and cards without shouting.
5 colors / Pastel / any hue
Random Color Generator
Press Generate for a fresh random color or palette. Lock the ones you like, narrow things down by hue or style, and copy any color as HEX, RGB or HSL. Each swatch shows how readable white or black text is on top of it.
How to use the random color generator
- Choose how many colors. Pick 1 for a single random color, or up to 10 for a full palette. Changing the number keeps any colors you have locked.
- Pick a style and a hue if you want one. Leave both on Any for a completely random color. Pastel, Vivid, Muted, Dark and Light steer how bright and how saturated the colors are, and the hue buttons keep every color in one family such as green or purple.
- Press Generate. You can also press the Space bar. Every color that is not locked is replaced at once.
- Lock what you like. Tap the padlock on a swatch to keep it, then generate again to find colors that sit well beside it.
- Copy the code. Tap the swatch for its HEX code, or tap the HEX, RGB or HSL line to copy that format. Copy all HEX gives you one code per line, and Copy as CSS gives you ready-made custom properties for a stylesheet.
Palettes for common jobs
Press "Load this example" to set the options and generate straight away. Every press gives a different palette that fits the brief.
Dark mode surfaces
Deep, slightly tinted darks make good page and panel backgrounds. Blue keeps them cool.
5 colors / Dark / Blue
Bold brand accents
Vivid colors work for buttons, highlights and charts. Three is enough to start a brand.
3 colors / Vivid / any hue
Calm greens for a wellness feel
Muted greens are restful and look natural in photos, packaging and slides.
8 colors / Muted / Green
HEX, RGB and HSL: the same color three ways
Every color on this page is shown in all three formats. They describe exactly the same color, so use whichever your tool asks for. Here are two real examples.
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Royal blue | #2447D6 | rgb(36, 71, 214) | hsl(228, 71%, 49%) |
| Amber | #FFC23D | rgb(255, 194, 61) | hsl(41, 100%, 62%) |
HEX is a hash sign followed by six characters, two each for red, green and blue, written in base 16. It is the most common format in web design and easy to copy and paste.
RGB gives the same three channels as plain numbers from 0 to 255. It is handy when you work in code or in image editors that show channel values.
HSL describes a color by hue (an angle from 0 to 360 on the color wheel), saturation (how vivid, 0 to 100%) and lightness (how light or dark, 0 to 100%). It is the easiest format to adjust by hand: raise the lightness to get a tint, lower it to get a shade.
Reading the contrast numbers
Under each swatch you will see whether white or black text reads better on it, with the contrast ratio between them. Ratios run from 1:1 (no difference) to 21:1 (black on white), using the method in the Web Content Accessibility Guidelines.
| Ratio | Label | Good for |
|---|---|---|
| 7:1 or more | AAA | Body text, best legibility |
| 4.5:1 to 7:1 | AA | Normal body text |
| 3:1 to 4.5:1 | AA large | Large headings, icons, button outlines |
| Below 3:1 | Low | Decoration only, not text |
For example, amber #FFC23D with black text scores about 13:1, but with white text only about 1.6:1. That is why the better of white or black is shown for each swatch.
Tips for building a palette you will actually use
Treat random colors as a starting point. A random palette gives you combinations you would not have thought of. Keep the one or two that feel right, lock them, and keep generating until the others fit around them.
Use one color to lead. A common rule of thumb is about 60% a calm base color, 30% a secondary color and 10% a bright accent. Lock the base first, then hunt for an accent.
Narrow the hue to stay harmonious. A palette in one hue family with different styles or lightness almost always looks coordinated. Mixing every hue at full saturation rarely does.
Check text contrast before you commit. A color that looks great as a swatch can be unreadable as a button with a label. Use the ratio under each swatch, and aim for at least 4.5:1 for normal text.
Do not rely on color alone. Roughly 1 in 12 men has some form of color vision deficiency, so pair color with labels, icons or patterns when it carries meaning, such as red for errors.
How the colors are chosen
Random values come from crypto.getRandomValues, the secure random source built into your browser. With style and hue both on Any, the generator picks three random bytes, one each for red, green and blue, so every one of the 16,777,216 possible colors has exactly the same chance.
When you choose a style or hue, the generator picks a random hue, saturation and lightness inside the range for that choice, then converts the result to RGB. Those colors are random within the range, though they are not spread evenly across every RGB value.
Nothing is stored and nothing is sent anywhere. The colors, locks and settings exist only on this page until you close it.
Random color generator questions
How does the random color generator pick colors?
With style and hue on Any, it picks three random bytes from your browser's secure random source, one each for red, green and blue, so every one of the 16,777,216 possible colors is equally likely. With a style or hue chosen, it picks randomly inside that range instead.
How do I copy a color code?
Tap a swatch to copy its HEX code, or tap the HEX, RGB or HSL line under it to copy that format. Copy all HEX gives one code per line, and Copy as CSS gives ready-made custom properties.
What does the padlock do?
It keeps that color in place. Generate again and only the unlocked colors change, so you can build a palette around the ones you like. Unlock all releases every lock.
What is the difference between HEX, RGB and HSL?
They are three ways to write the same color. HEX and RGB both give the red, green and blue amounts, while HSL gives hue, saturation and lightness, which is easier to adjust by hand.
Can I get only pastel, dark or one hue of color?
Yes. Style narrows the brightness and saturation to Pastel, Vivid, Muted, Dark or Light, and Hue keeps every color in a family such as red, green, blue or purple. You can combine one of each.
What do the contrast numbers under each swatch mean?
They show whether white or black text is easier to read on that color, and the contrast ratio between them. Normal text should reach at least 4.5:1, and large text at least 3:1.
Are the colors guaranteed to be accessible?
No. A random color can be fine as a background and poor as a text color. Check the ratio shown under each swatch before using a pair for text, and do not rely on color alone to carry meaning.
Is anything stored or sent anywhere?
No. Colors, locks and settings stay in your browser tab and disappear when you close it.
Related tools
Random word generator
Random nouns, verbs, adjectives and adverbs, filtered by length or starting letter.
lanternRandom number generator
Any range, one number or many, with or without repeats.
1-100 → 57Wheel of names
Paste a list, spin the wheel and get a fair random winner. Remove winners as you go.
Hana