Random Color Generator
Generate truly random colors with a single click. Get instant HEX, RGB, and HSL codes for creative inspiration and quick prototyping.
How Random Generation Works
Random colors are generated using cryptographically random values:
``javascript
const randomColor = () => {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return #${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')};
};
`
Random Color Options
| Mode | Description |
|---|---|
| Truly random | Any color possible |
| Pastel | Light, soft colors |
| Vibrant | High saturation |
| Dark | Low lightness |
| Warm | Red/orange/yellow bias |
| Cool | Blue/green bias |
Use Cases
Inspiration: Break creative blocks- Prototyping: Quick placeholder colors
- Games: Random elements
- Testing: Various color scenarios
- Art: Generative design
JavaScript Implementation
`javascript
// Random HEX
const hex = '#' + Math.random().toString(16).slice(2, 8);
// Random RGB
const rgb = rgb(${r}, ${g}, ${b});
// Random pastel
const pastel = hsl(${Math.random()*360}, 70%, 80%);
`
Generate endless color inspiration with random colors.
Random Colours Are Rarely What You Want
A uniformly random RGB value gives you muddy mid-tones most of the time, because most
of the RGB cube is muddy. Randomising in HSL with constrained saturation and lightness
produces colours you would actually use:
`javascript
const pleasantRandom = () => {
const h = Math.floor(Math.random() * 360);
const s = 60 + Math.random() * 25; // 60-85%
const l = 45 + Math.random() * 20; // 45-65%
return hsl(${h} ${s}% ${l}%);
};
`
For assigning colours to a set of items — chart series, user avatars, tags — do not
randomise at all. Hash the item's ID to a hue and space hues by the golden angle (137.5°),
which keeps consecutive values far apart and makes the colour stable across reloads.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.