Random color generator
Random colors and codes for design and code.
Click a code to copy it. Click the lock to keep a color when you generate again.
- HEX, RGB or HSL codes
- Pastel and dark palettes
- Lock colors, reroll the rest
How to generate random colors
- Set how many colors and pick a code format.
- Choose a random, pastel or dark palette.
- Click a swatch to copy its code, or lock it before generating more.
HEX, RGB and HSL compared
All three formats describe the exact same color. Which one you need depends on where you are pasting it.
| Format | Looks like | Best for |
|---|---|---|
| HEX | #3B82F6 | CSS, design tools, quick sharing |
| RGB | rgb(59, 130, 246) | CSS, code that mixes or fades colors |
| HSL | hsl(217, 91%, 60%) | Adjusting a color by hand: hue, then how bold, then how light |
HSL is usually the easiest to tweak yourself, since sliding the lightness number lighter or darker keeps the same hue, something HEX and RGB make harder to do by eye.
Random, pastel and dark, by the numbers
Each mode picks from a different slice of the color wheel rather than just changing the hue.
| Mode | Saturation range | Lightness range |
|---|---|---|
| Random | 40 to 100% | 25 to 75% |
| Pastel | 35 to 60% | 75 to 88% |
| Dark | 35 to 70% | 12 to 28% |
Hue is always picked from the full 0 to 359 range in every mode, so pastel and dark still cover every color family, just lighter or darker.
What people use random colors for
- Quick design inspiration when you are stuck picking a brand or theme color.
- Placeholder colors for wireframes, charts and UI mockups before a real palette is chosen.
- Generating avatar backgrounds, tags or category colors in an app.
- Art and craft projects, like a random color prompt for a daily sketch.
Random color generator FAQ
What is the difference between the palettes?
Random covers the full color wheel. Pastel keeps lightness and saturation soft for gentle backgrounds. Dark keeps colors low in lightness for dark themes and contrast text.
How do I keep a color I like?
Click the lock icon on a swatch. Locked swatches keep their color the next time you generate, so you can reroll just the rest.
What is the difference between HEX, RGB and HSL?
HEX and RGB describe a color by its red, green and blue amounts. HSL describes it by hue, saturation and lightness, which is often easier to adjust by hand.
How do I copy a color code?
Click the code text under any swatch and it is copied to your clipboard right away.
What ranges do the palettes actually use?
Random picks any hue with saturation 40 to 100 percent and lightness 25 to 75 percent. Pastel narrows lightness to 75 to 88 percent. Dark narrows lightness to 12 to 28 percent, with saturation 35 to 70 percent so colors stay rich instead of muddy.
Will two random colors look good together?
Sometimes. This tool picks colors independently for variety and inspiration, it does not build a matched palette. For colors guaranteed to work together, generate several, lock the ones you like, and reroll the rest until the set feels right.
Can I generate only one color instead of a set?
Yes, set the count to 1 and click Generate for a single random color in your chosen format.
Where can I use a HEX or RGB code once I have it?
Paste a HEX code straight into CSS, Figma, Photoshop or almost any design tool. RGB and HSL values work the same way in CSS functions like rgb() and hsl().