Loading page
About this tool
Generate random colours in HEX, RGB and HSL — pastel, vivid, dark, warm, cool, grey or a custom hue range — lock favourites and export CSS, JSON or PNG.
This Random Color Generator creates between 1 and 50 colours at a time. In Any colour mode each red, green and blue channel is an unbiased random integer from 0 to 255, drawn with your browser's crypto.getRandomValues and rejection sampling, so all 16,777,216 colours are equally likely. The other modes pick hue, saturation and lightness uniformly inside a range: pastel, vivid, dark, light, warm, cool, greyscale, or a custom hue, saturation and lightness range you set. Every swatch shows HEX, RGB and HSL, plus black or white text chosen by WCAG contrast ratio. Lock the colours you like and reroll the rest, then export the palette as CSS or SCSS variables, JSON, a plain list or a PNG image.
Open Random Color Generator on AltFTool — it loads instantly in your browser.
Under Colour type, choose Any colour, Pastel, Vivid, Dark, Light, Warm, Cool, Greyscale or Custom range (with hue, saturation and lightness sliders).
Set the Number of colours from 1 to 50 and pick Show as HEX, RGB or HSL.
Press Generate or the Space bar; lock swatches you like with the padlock or keys 1–9, then press Reroll unlocked.
In Export palette, choose CSS variables, SCSS variables, JSON or Plain list and press Copy, download the file, or save a PNG of the swatches.
Channels and HSL values come from crypto.getRandomValues with rejection sampling, so no colour or hue is favoured over another.
Any, pastel, vivid, dark, light, warm, cool and greyscale, or set your own hue, saturation and lightness range, wrapping through red if you like.
Lock any swatch with a click or the number keys 1–9, press Space, and only the unlocked colours change.
HEX, RGB or HSL on every swatch, readable contrast text with its ratio, and export to CSS, SCSS, JSON, a text list or PNG.
| Colour type | Hue | Saturation | Lightness |
|---|---|---|---|
| Any colour | Uniform over all 16,777,216 RGB colours | — | — |
| Pastel | 0–359° | 40–80% | 80–90% |
| Vivid | 0–359° | 85–100% | 45–60% |
| Dark | 0–359° | 30–90% | 12–30% |
| Light | 0–359° | 30–90% | 75–92% |
| Warm | 330–60° (through red) | 55–100% | 40–65% |
| Cool | 160–260° | 40–95% | 35–65% |
| Greyscale | — | 0% | R = G = B, 0–255 |
| Custom range | Your choice | Your choice | Your choice |
HSL values are converted to RGB and rounded to whole numbers, so a displayed HSL value can differ from the drawn one by about 1.
A colour on screen is three numbers from 0 to 255 for red, green and blue. In Any colour mode, the tool draws each number uniformly at random, giving one of 16,777,216 colours. Other modes draw hue, saturation and lightness inside a range and convert the result to RGB and HEX.
With 8 bits per channel there are 256 × 256 × 256 = 16,777,216 RGB colours, the full range of a standard six-digit HEX code. Greyscale mode has only 256 possibilities, since red, green and blue are always equal, from #000000 black to #FFFFFF white.
Pastels are pale, soft colours: high lightness with moderate saturation. In this tool, Pastel mode picks any hue with saturation between 40% and 80% and lightness between 80% and 90%. Vivid mode does the opposite, with saturation of 85–100% and mid lightness, for bold, punchy colours.
Warm colours sit around red, orange and yellow and feel energetic; cool colours sit around green, blue and violet and feel calm. Warm mode uses hues from 330° through 0° to 60°, and Cool mode uses hues from 160° to 260° on the colour wheel.
They describe the same colour in different ways. HEX writes red, green and blue as two hexadecimal digits each, like #1663D9. RGB writes them as decimal numbers, rgb(22, 99, 217). HSL gives hue in degrees plus saturation and lightness percentages, which is easier to adjust by hand.
The tool calculates the WCAG contrast ratio of the swatch against black and against white and uses whichever is higher. The ratio is shown on the swatch: 4.5:1 or more meets WCAG AA for normal text, 3:1 meets AA for large text, and 7:1 meets AAA.
Click the padlock on a swatch, or press its number key from 1 to 9, to lock it. Locked swatches get an outline and stay put when you press Space or Reroll unlocked. Use Unlock all to start fresh, or restore any earlier palette from History.
Paste the :root block into your stylesheet, then use the colours anywhere with var(--color-1), var(--color-2) and so on. The SCSS export gives $color-1 style variables instead. The JSON export lists each colour's HEX, RGB and HSL for scripts or design tokens.
Yes. Choose Custom range and set Hue from and Hue to, plus minimum and maximum saturation and lightness. If Hue to is lower than Hue from, the range wraps through red, so 300° to 30° gives magentas, reds and oranges. A gradient bar previews the range.
Random colours are a quick way to discover combinations you would not pick yourself, but a brand palette also needs enough contrast for text and consistent lightness. Lock the hues you like, check the contrast ratio on each swatch, and test the colours together on real content before committing.