Random Color Generator with Hex, RGB and HSL Codes

Press Generate for a fresh set of random colors. Every swatch comes with its hex code, rgb() value and hsl() value on one line, ready to paste into CSS.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Fill in the settings to see your result here.

Your result appears here instantly — nothing is uploaded.

Quick answers

How do I get a random hex color?: Set How many colours to 1 and press Generate. The swatch label and the first value on the line is the hex code, for example #6778ad. Press Generate again for another one.
What is a hex color code?: A hex code is a # followed by six hexadecimal digits: two for red, two for green and two for blue, each from 00 to ff (0 to 255). #6ecfb3 means red 6e (110), green cf (207) and blue b3 (179).
How many hex colors are there?: 16,777,216. Each of the three channels, red, green and blue, has 256 possible levels, and 256 x 256 x 256 = 16,777,216. This tool draws from a narrower slice of them, because each style limits saturation and lightness.
Is a random RGB color the same as a random hex color?: Yes. Hex and RGB are two ways of writing the same three numbers. rgb(33, 19, 190) and #2113be are the identical color, so the tool prints both forms for every swatch along with its HSL value.
How do I generate a random pastel color?: Choose Pastel in the Style menu and press Generate. Pastel colors here have saturation between 45% and 70% and lightness between 78% and 88%, which gives soft tints such as #c4ede2 and #b4afee.
Can it generate pure black, white or gray?: No. Saturation never goes below 30% and lightness stays between 18% and 88% across the styles, so every result has a visible hue. Pure black (#000000), white (#ffffff) and neutral grays are outside the range on purpose.

About Random Color Generator

This random color generator gives you between 1 and 24 colors per press, shown as swatches and listed as text in three notations at once: a hex code such as #6ecfb3, the matching rgb(110, 207, 179) and the matching hsl(163, 50%, 62%). Four styles control the look. The default, Any colour, allows a wide band of saturation and lightness, Vivid keeps colors saturated, Pastel keeps them light and soft, and Dark keeps them deep. The colors are picked in HSL, with a random hue from the full 360 degree wheel, then converted to hex and RGB, so all three values on a line describe the same color. Six colors are already waiting when the page opens.

What each style produces: saturation and lightness ranges

Hue is always random from 0 to 359 degrees. The style only limits how saturated and how light the color can be.

Style	Saturation	Lightness	Looks like	Typical use
Any colour	30% to 95%	25% to 80%	Mixed: muted and bold, mid-dark to light	Exploring, test data, variety
Vivid	75% to 95%	45% to 58%	Bold, fully colored	Accents, buttons, chart series
Pastel	45% to 70%	78% to 88%	Soft, light tints	Backgrounds, tags, avatars
Dark	35% to 70%	18% to 32%	Deep, low-light shades	Dark theme panels, headers

Saturation and lightness are whole percentages picked evenly within each range.

Random color examples in hex, RGB and HSL

Real output from the tool, three colors per style. Your colors will differ on every press.

Any colour

How many colours 3, Style Any colour

#6ecfb3 rgb(110, 207, 179) hsl(163, 50%, 62%) | #394f84 rgb(57, 79, 132) hsl(222, 40%, 37%) | #2113be rgb(33, 19, 190) hsl(245, 82%, 41%)

Vivid

How many colours 3, Style Vivid

#2be9b3 rgb(43, 233, 179) hsl(163, 81%, 54%) | #1b54da rgb(27, 84, 218) hsl(222, 78%, 48%) | #1e0bef rgb(30, 11, 239) hsl(245, 91%, 49%)

Pastel

How many colours 3, Style Pastel

#c4ede2 rgb(196, 237, 226) hsl(163, 53%, 85%) | #b4c2e4 rgb(180, 194, 228) hsl(222, 48%, 80%) | #b4afee rgb(180, 175, 238) hsl(245, 65%, 81%)

Dark

How many colours 3, Style Dark

#256553 rgb(37, 101, 83) hsl(163, 46%, 27%) | #202d4b rgb(32, 45, 75) hsl(222, 40%, 21%) | #1b155b rgb(27, 21, 91) hsl(245, 63%, 22%)

These four sets share the hues 163, 222 and 245 degrees, which shows how one hue changes character from style to style.

Hex vs RGB vs HSL: which value to copy

Notation	Example	What the numbers mean	Good for
Hex	#394f84	Red, green and blue as two hex digits each (00 to ff)	CSS, design tools, brand guides
RGB	rgb(57, 79, 132)	Red, green and blue as 0 to 255	CSS, canvas and image code, LEDs
HSL	hsl(222, 40%, 37%)	Hue 0 to 359 degrees, saturation and lightness as percentages	Adjusting a color by hand: lighter, darker, more muted

All three examples are the same blue. The values can be pasted into a stylesheet exactly as shown.

Why the colors are picked in HSL instead of random hex digits

The obvious way to make a random hex code is to pick six random hex digits. That treats every one of the 16,777,216 codes equally, so a set can include dull grayish tones and colors so dark or so pale that they are hard to tell apart as swatches.

This tool picks three different numbers instead: a hue angle from 0 to 359, a saturation percentage and a lightness percentage. Hue decides which color it is (0 is red, 120 is green, 240 is blue), saturation decides how strong it is, and lightness decides how close it sits to black or white. Keeping saturation and lightness inside a band, and letting only the hue roam freely, is what makes a set of six swatches look like they belong together.

The hex and RGB values are then calculated from the HSL value. Because RGB channels are whole numbers, converting the hex code back to HSL in another program can give a result that differs by one percent here or there. The color on screen is the same.

Things to know before using random colors in a design

Each color in a set is picked independently. The tool does not build harmonies such as complementary or triadic schemes, and two swatches in one set can land on similar hues.
Random text and background pairs often fail accessibility checks. Body text needs a contrast ratio of at least 4.5:1 against its background under WCAG AA, so test any pair before shipping it.
Every Pastel swatch is light enough for black text to pass 4.5:1, and nearly every Dark swatch is deep enough for white text, although the lightest dark yellows, greens and cyans (lightness 29% and above) fall short. Vivid and Any colour results vary too much to assume either.
A set cannot be brought back once you press Generate again, and there is no option to lock a swatch. Copy the Values block when you see colors you want to keep.
The same hex code can look different on two screens, because displays vary in calibration and color gamut. The code itself is what stays constant.

How to use it

1
Set How many colours to the number of swatches you want, from 1 to 24.
2
Choose a Style: Any colour, Vivid, Pastel or Dark.
3
Press Generate. The Colours panel shows the swatches, each labeled with its hex code.
4
Copy the Values block. Each line holds one color as hex, rgb() and hsl(), in that order.
5
Press Generate again for a completely new set. Reset puts the settings back to six colors in the Any colour style and clears the results until you press Generate.

Common questions

How are the random colors chosen?

For each swatch the tool picks a hue from 0 to 359 degrees, then a saturation and a lightness inside the range for the chosen style, and converts that HSL value to a hex code and an RGB triplet. A new random starting value is used on every press of Generate.

How many colors can I generate at once?

From 1 to 24 per press. The default is six. Asking for more than 24 returns the message "Choose a count between 1 and 24." For a larger batch, generate several sets and copy each Values block.

Can I pick a random color from one hue, such as only blues?

No. The hue is always drawn from the whole wheel, and the Style menu only controls saturation and lightness. If you need variations of a single color, generate until a blue appears and then build tints and shades from it with a shades tool.

Can I copy just one color?

The copy button copies the whole Values block. Each color sits on its own line as hex, rgb() and hsl(), so set How many colours to 1 when you want a single line, or select the one value you need from the block.

Does it output RGBA, 8-digit hex or CMYK?

No. Output is 6-digit lowercase hex, rgb() and hsl(), all fully opaque. Add your own alpha value in CSS if you need transparency, and use a dedicated RGB to CMYK converter for print values.

Are the hex codes valid CSS?

Yes. Each code is a # and six lowercase hexadecimal digits, and the rgb() and hsl() values use the comma-separated syntax that every browser accepts. You can paste any of the three directly into a color or background property.

Are my colors saved or sent anywhere?

No. The colors are calculated in your browser and nothing is stored, so there is no history of earlier sets either. Anything you want to keep has to be copied out before the next press of Generate.