Generate six fully random colors at once, each shown with its HEX, RGB, and HSL values — useful for design inspiration, placeholder palettes, mockups, or picking a fresh accent color when you are stuck. Click any swatch to copy its HEX code.
How it works
For each swatch the tool picks three random channel values — red, green and blue — each an integer from 0 to 255. The random numbers come from the browser’s Web Crypto API (crypto.getRandomValues), and the tool uses rejection sampling to discard values that would bias the result, so every value 0–255 is exactly equally likely.
The RGB triplet is then formatted three ways: as a two-digit-per-channel HEX string, as rgb(r, g, b), and as hsl(h, s%, l%) computed with the standard RGB-to-HSL conversion (max/min of the normalised channels give lightness and saturation; the dominant channel gives hue). The tool also computes each color’s perceived luminance to choose readable label text.
When to use each color format
Different tools and use cases prefer different formats, and all three are shown so you can reach for the right one without converting:
| Format | When to use it |
|---|---|
| HEX | Pasting into Figma, Sketch, Framer, or CSS; most common format in design handoffs |
| RGB | CSS color: rgb(...), Canvas drawing contexts, image processing code |
| HSL | When you want to programmatically tweak hue or saturation; easy to reason about in CSS variables |
HSL is particularly useful for building design systems: if you have a brand hue at 142°, you can generate lighter or darker shades by adjusting the lightness while keeping the hue and saturation constant.
Understanding the luminance-based label
The label text on each swatch switches between black and white depending on the swatch’s background. This is not random — the tool computes the perceived luminance of each color using the standard formula:
luminance = 0.299 × R + 0.587 × G + 0.114 × BThe coefficients reflect how sensitive human vision is to each channel: the eye is most sensitive to green and least sensitive to blue. Colors with luminance above a threshold get dark text; those below get light text.
Example
A generated swatch might be RGB (34, 197, 94). The tool shows it as:
- HEX:
#22C55E - RGB:
rgb(34, 197, 94) - HSL:
hsl(142, 71%, 45%)
Clicking the swatch copies #22C55E to your clipboard.
This particular green has a luminance of roughly 149 (out of 255), which puts it in the lighter range — so it gets a dark text label for readability. Colors like this are well-suited as accent colors on light backgrounds but may need a dark backdrop behind them for sufficient contrast in body text roles.
Colors are generated in your browser and never leave your device.