Random Colour Generator

A random colour generator produces unpredictable colours for use in design, development, illustration, data visualisation, education, and play. By rolling a fresh value each time it is called, it removes the bias of any individual eye and gives an unbiased sample of the colour space, a quick way to escape the gravitational pull of the same handful of blues and greys that most screen-based work drifts toward. This page explains how the tool works, what each mode and output format actually means, and how to fold randomly generated colours into a deliberate design.

How to Use the Random Colour Generator

1. Pick a count, 1, 5, 10, 20, or 50 colours per roll.
2. Pick an output format, HEX (#RRGGBB), RGB (rgb(R, G, B)), or HSL (hsl(H, S%, L%)).
3. Pick a style mode, Full random, Pastel, Vibrant, or Dark.
4. Click Generate colours. A grid of swatches appears with the chosen format printed on each one.
5. Click any swatch to copy its value to the clipboard. A "Copied!" confirmation briefly replaces the label.
6. Press Generate colours again to roll a new set; the entire grid refreshes in place.

Every operation runs in the browser. Nothing is sent to a server, nothing is stored between sessions, and the swatches regenerate instantly because all the math is local.

The Colour Models

A colour model is just a way of writing a colour as a tuple of numbers. The three formats this tool supports are the three the W3C CSS Colour Module uses for screen work, and each has its own strengths.

HEX is the six-digit hexadecimal form most familiar from HTML and CSS: #RRGGBB. Each pair of characters is the base-16 representation of one of the three channels (red, green, blue) on a 0 to 255 scale. #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue, and #FFFFFF is white. The format is compact, unambiguous, and what most design tools paste into a stylesheet by default. The CSS Colour Module Level 4 specification also defines an eight-digit form #RRGGBBAA that adds an alpha channel, but this tool sticks to the six-digit opaque version because it is what every consumer of colour values expects to see.

RGB is the same three channels, written as a CSS function: rgb(255, 0, 0). It is the natural form for screen pixels, canvas drawing APIs (ctx.fillStyle, the Web Animations API), image-processing code, and any tool that thinks in terms of light-emitting devices. The commas and parentheses make it slightly more verbose than HEX but easier for humans to scan.

HSL describes the same colour differently. H is the hue as a degree on the colour wheel (0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta, 360° wraps back to red). S is saturation as a percentage (0% is grey, 100% is full colour). L is lightness as a percentage (0% is black, 100% is white, 50% is the "pure" form of the hue). Designers and design-system authors tend to prefer HSL because sweeping lightness up or down produces a clean tint-and-shade scale without the channel-by-channel arithmetic HEX and RGB demand. The CSS Colour Module Level 4 hue is a continuous value, so the tool rounds to the nearest integer degree when printing.

The Style Modes

Full random rolls each of the three RGB channels independently from the full 0 to 255 range. The result is a flat distribution over the RGB cube: equal probability of landing near black, near white, in the muddy middle, or in any saturated hue. Most outputs are mid-saturation muddier tones because the human eye interprets randomly mixed channels that way; pure reds, greens, and blues are surprisingly rare. This mode is the honest one, it shows you what random really looks like.

Pastel generates colours with high lightness (70 to 90%) and moderate saturation (30 to 60%). Pastels read as soft, friendly, and low-contrast. They are popular in children's products, health and wellness branding, bakery and stationery design, and anywhere a calmer palette is wanted. Because the lightness window is wide, pastel outputs can drift toward near-white at the high end; if you need them all clearly visible, sample more colours and pick the ones that sit in the middle of the lightness range.

Vibrant generates colours with full saturation (90 to 100%) and mid lightness (45 to 55%). These are the loudest values the RGB space can produce, the sort of colours that catch it on a packaging shelf or a billboard. They are perfect for hero sections, call-to-action buttons, and any place where a colour needs to survive being shrunk down to a 16-pixel icon. They pair badly with body text because most of them cannot reach WCAG AA contrast against white or black; pair vibrant accents with a neutral text colour and use them sparingly.

Dark generates colours with low lightness (15 to 30%) and moderate saturation (30 to 70%). These are the tones of night-mode interfaces, premium product packaging, and moody photographic grading. Like pastels, they need careful handling for text contrast, dark-mode design typically uses dark-mode text colours, not dark-mode swatches as the text colour itself.

The Algorithm

The full-random path picks three integers from 0 to 255 inclusive using crypto.getRandomValues() when available. The pastel, vibrant, and dark paths use HSL because it is easier to keep colours inside a desired perceptual range when lightness and saturation are direct axes. The hue is rolled from 0 to 359 (the CSS range is 0 to 360 but 360 wraps to 0), the saturation and lightness are rolled inside the chosen range, and the resulting HSL triple is converted back to RGB through the standard CSS Colour Module Level 4 helper function:

f(n) = L - a · max(-1, min(k(n) - 3, min(9 - k(n), 1)))
k(n) = (n + H / 30) mod 12
a = S · min(L, 1 - L)

where n is 0 for red, 8 for green, and 4 for blue. The conversion is the same one Chrome, Safari, and Firefox use internally to render HSL, so what the tool prints matches what the browser will draw.

For the displayed text on each swatch, the tool computes the relative luminance L = 0.2126·R + 0.7152·G + 0.0722·B after sRGB-linearisation, and uses white text if L is below 0.5 and black text otherwise. This keeps the value label legible across the whole palette without any per-swatch colour picking.

Worked Example

Suppose the tool rolls the HSL triple (127, 45, 62). That is hue 127° (a green between pure green at 120° and cyan at 180°), saturation 45% (a muted version, not a pop), and lightness 62% (clearly past the mid-point, so the swatch will look soft). Converting with the helper above gives roughly rgb(86, 200, 152), a sage green. As HEX that is #56C898, upper-cased to #56C898 because hex values are case-insensitive but the all-caps form is the convention in most design tools.

If the same colour had rolled out of the Full Random mode, it could equally well have been #37A4FF or #FFC68C, there is no guarantee, only a flat distribution. If the same roll had been HSL-printed instead, it would show as hsl(152, 53%, 62%), slight rounding differences in the conversion. All three formats describe the same colour.

Where Random Colours Show Up

Design inspiration. When the brief is "something fresh" but the team has been staring at the same three brand colours for a year, a roll of twenty random pastels can surface a hue no one had considered. Most will be wrong; one or two will spark a direction.

Data visualisation. Categorical palettes need to be distinguishable at a glance. Generating a long list of vibrant random colours and pruning the ones that are too similar gives a quick palette for charts, maps, and dashboards. The most common refinement is to discard any two colours whose WCAG contrast against white is too close to each other, leaving a set of visibly distinct hues.

Placeholder content. Mock-ups and wireframes look better with believable colour than with the default black-on-white. Random dark-mode pastels on grey panels give a finished feel without distracting from the layout work.

Education. When teaching colour theory, a random generator is a useful counter-example: it shows students how rare it is to roll a "nice" colour, which is exactly why the design discipline of choosing a palette exists.

Games and play. Random colour generators are the engine behind "guess the hex", accessibility contrast drills, and any number of small browser toys.

Generative art. Random colour palettes seed endless generative pieces. Constrain the roll to a mode (all pastels, all dark) and you get a coherent-feeling piece without any hand-tuning.

Common Mistakes

Treating full-random as a finished palette. The full-random mode is a sample of the RGB cube, not a designed palette. Most outputs will not coexist gracefully. Use the mode to surface options, then pick.

Confusing hue diversity with palette quality. A set of fifty random colours at maximum saturation will give you a kindergarten-box of candy colours, not a harmonious scheme. Design systems are usually built from one or two hues plus tints, shades, and neutrals, random generation helps with the tint scale, not with the harmony.

Ignoring contrast. A swatch that looks beautiful in isolation may be illegible against the colour you actually want to use for text. Always run final text-background combinations through a contrast checker rather than trusting the eye on a small swatch.

Holding onto "the right" colour. The point of rolling a fresh set is to see new options. If a single roll looks 90% right, regenerating and cherry-picking from the next roll often produces a more interesting result than tweaking the first one.

Frequently Asked Questions

How many colours should I generate at once? For inspiration, 20 to 50 at a time is usually the sweet spot, enough variety to spark ideas without being overwhelming. For a real palette, you usually want 3 to 5 well-chosen colours, not 50 random ones. Use the tool to surface options, then curate.

Should I use HEX, RGB, or HSL? HEX is the safest default because it is what CSS, SVG, and almost every design tool expect. RGB is convenient when you are writing canvas or image-processing code. HSL is the right choice when you want to manipulate lightness or saturation directly, for example, generating a 10-step tint scale by holding the hue constant and sweeping lightness from 10% to 90%.

Are the colours truly random? Yes. The tool uses the browser's crypto.getRandomValues() API when available, which is the same cryptographically strong random source used for security-sensitive applications. On the rare environment where that API is missing, it falls back to Math.random(). Either way, the output is unpredictable and unbiased across the chosen range.

Can I generate a colour from a specific range? The pastel, vibrant, and dark modes restrict the lightness and saturation ranges, which is the most common constraint. For more specific constraints (only warm hues, only blues), chain this tool with the colour converter to filter or convert the output. There is no built-in "only blues" mode because blue is a wide band of the wheel and the most useful definition varies by project.

Are the colours safe for accessibility? Some are, some are not. Use the contrast ratio checker to verify any foreground-background pair before shipping. As a rule of thumb: full-random colours are almost never accessible by themselves, pastels usually need a dark text colour, vibrants are best reserved for accents rather than body text, and dark-mode colours work well as backgrounds with light text.

Does the tool work offline? Yes, once the page has loaded. All the colour math runs in your browser, and the swatches regenerate instantly without a network round-trip.

Can I export the colours? Clicking each swatch copies its formatted value to the clipboard. For a bulk export, use your browser's copy-and-paste or a small snippet of JavaScript to walk the page; the values are all rendered as plain text inside the buttons.

Also try these free tools:

• Colour Converter
• Colour Palette Generator
• Contrast Ratio Checker
• Colour Picker

Extended Reference Notes

Random colour generation is a generator, not a calculator, the output is rarely "wrong" but can be subtly off in tone, scope, or specificity. The notes below cover how to get useful output and how to combine it with other sources.

Working with generator output

A random roll is a starting population, not a finished one. Treat the grid like a sketch: pull the colours that match your intent, ignore the rest, and re-roll when the population is too thin. The cost of re-rolling is near zero.

Quality signals to look for

When rolling for inspiration, look for two or three colours that hold up together in a quick sketch. The eye is faster than any rule book, if three random colours look right side by side, they probably will in the finished piece.

Iterating on inputs

The mode is the biggest lever. Vibrant turns a population of muddy tones into saturated accents. Pastel turns the same hue range into soft, low-contrast surfaces. Dark inverts the lightness curve. Pick the mode first, then iterate on the count.

Common mistakes

Treating the output as a finished palette is the most common mistake. Ignoring contrast, a colour that looks great against white in a swatch can fail WCAG AA against a tinted background, is the second. Over-relying on random generation when the brief calls for a designed system is the third.

When generators are the wrong tool

For "match this brand colour" or "extend this palette by one complementary hue", use the colour palette generator instead. For "verify this text-background contrast", use the contrast ratio checker. Random is for open-ended cases: inspiration, placeholders, generative art.

A simple iteration loop

Roll 20 colours. Cherry-pick two or three that catch your eye. Roll 20 more with the same mode. Pull in anything that improves on your picks. Repeat twice more.

Combining generator output with other sources

Generate tints and shades with this tool, harmonic relationships with the colour palette generator, validate contrast with the contrast ratio checker, and convert between HEX, RGB, HSL, and HSV with the colour converter. The four together cover the lifecycle from inspiration to production-ready palette.