Design

Random Color Generator

Generate a random colour with its HEX, RGB and HSL values, copy the hex, and shuffle a fresh palette.

What the random color generator does

This random color generator picks a colour entirely at random and shows you its value in the three formats you actually need: HEX for CSS and design tools, RGB for screens and image editors, and HSL for reasoning about hue, saturation and lightness. A large swatch fills with the colour so you can judge it instantly, and a five-colour palette gives you a quick set of complementary options to draw from.

It is a fast way to break designer's block, find a starting accent for a website or slide deck, seed placeholder colours while prototyping, or simply explore the colour space when you are not sure what you want.

How to use it

Press Generate colour to draw a new random colour — the swatch, the HEX, RGB and HSL rows, and the palette all refresh together. Use Copy hex to put the main colour's hex code straight on your clipboard, ready to paste into your stylesheet or design app. In the palette row, click any of the five smaller swatches to copy that swatch's hex instead.

Notes on formats and contrast

HEX and RGB describe the exact same colour in different notation — #16a34a is simply rgb(22, 163, 74) written in base 16. HSL restates it as a hue angle plus saturation and lightness percentages, which is often easier when you want to nudge a colour lighter or more vivid. The label on each palette swatch automatically switches between dark and light text so it stays readable against its background. Everything runs locally in your browser.

HEX, RGB, RGBA and HSL — when to use each

HEX (#FF5733) — the most common format in CSS and design tools; compact and easy to copy and paste.
RGB (rgb(255, 87, 51)) — useful when you need to read or adjust the red, green and blue channels individually in code.
RGBA — the same as RGB with an added alpha (transparency) channel, e.g. rgba(255, 87, 51, 0.5) for 50% opacity over whatever sits behind it.
HSL (hsl(9, 100%, 60%)) — the most intuitive when a human wants to nudge a colour's hue, saturation or lightness independently, which is ideal for building a palette.

Ways to use a random colour generator

Random colours are a fast cure for a blank page. Use one as a starting accent for a website, slide deck or logo exploration; seed placeholder colours while prototyping so every element is not the same grey; pick a surprise background for a poster or profile; or run through dozens of options to break out of your usual palette. Because each colour comes with its exact HEX, RGB and HSL values, whatever you land on is ready to drop straight into your stylesheet or design app.

Turning a random colour into a palette

A single random colour is a seed, not a finished scheme. The five-swatch palette gives you an instant set to sample from, but the most reliable way to build a harmonious palette by hand is to take one generated colour, read its HSL, and keep the saturation and lightness while shifting only the hue — roughly 30° apart for neighbours that blend, or 180° apart for a complementary contrast. HSL makes that easy because hue is a single number you can add to or subtract from.

What makes a colour readable

Not every random colour is a good background for text. Readability comes down to contrast between the text and what sits behind it, and a quick way to gauge it is perceived brightness — greens and yellows read as much lighter than blues and reds at the same numeric value. That is why the palette labels here flip to dark text on light swatches and light text on dark ones automatically. If you plan to put words on a generated colour, lean on the HSL lightness value: below about 50% usually needs light text, and above it usually needs dark.

Frequently asked questions

How do I copy the colour code?

Press Copy hex to copy the main colour, or click any of the five palette swatches to copy that swatch's hex. A short confirmation appears once it is on your clipboard.

What is the difference between HEX, RGB and HSL?

They all describe the same colour. HEX is base-16 shorthand used in CSS, RGB lists the red, green and blue channels from 0–255, and HSL expresses hue, saturation and lightness, which is handy for fine-tuning.

Can I generate a whole palette at once?

Yes. Every time you generate a colour, the five-swatch palette refreshes with a fresh set of random colours you can sample from.

Are the colours saved anywhere?

No. The generator runs entirely in your browser, so nothing is uploaded, logged or stored.

What is RGBA and how is it different from RGB?

RGBA is RGB with a fourth value, alpha, controlling transparency from 0 (fully transparent) to 1 (fully opaque). Use it when you want a colour to let some of the background show through, such as rgba(22, 163, 74, 0.5).

How do I get colours that go well together?

Generate one colour you like, read its HSL, then keep the saturation and lightness and change only the hue — about 30° apart for colours that blend, or 180° apart for a bold complementary pairing. The palette row also gives you five fresh options each time.