Random Color Generator Online — Free Hex, RGB, HSL Tool

Generate random colors and palettes — single colors or 5-color palettes (analogous, complementary, triadic, monochromatic) — with hex, RGB, and HSL values. Free, browser-based.

Secure (Web Crypto)

Click Generate to create a color or palette.

What is a Random Color Generator?

A random color generator picks a color (or set of related colors) at random and shows the values you need: hex (#FF6A00), RGB (rgb(255, 106, 0)), and HSL (hsl(25, 100%, 50%)). The OpenFormatter tool also produces 5-color palettes using classical color-theory relationships — analogous, complementary, triadic, and monochromatic — so the colors look intentional, not chaotic.

All generation runs in your browser. No API call, no signup, no rate limit. Toggle Secure mode to use the Web Crypto CSPRNG when randomness must be unpredictable.

How to generate random colors — 4 steps

Pick a mode. Single for one color; one of the four palette modes for a 5-color set built around a random base hue.
(Optional) Secure mode. Toggle on for crypto-grade randomness instead of Math.random().
Generate. Click Generate. The tool renders swatches with hex, RGB, and HSL values.
Copy a value. Click any value (hex, RGB, HSL) to copy it to the clipboard. Paste into Figma, CSS variables, or design tokens.

Sample output

Mode: Triadic   Base hue: 220

#3B6FCC   rgb(59, 111, 204)    hsl(220, 60%, 52%)
#5C5CCC   rgb(92, 92, 204)     hsl(240, 53%, 58%)
#CC6F3B   rgb(204, 111, 59)    hsl(20, 60%, 52%)
#CC9C3B   rgb(204, 156, 59)    hsl(40, 60%, 52%)
#3BCC6F   rgb(59, 204, 111)    hsl(140, 60%, 52%)

Five Palette Modes

Single color, plus four 5-color palette modes — analogous, complementary, triadic, monochromatic — built around a random base hue.

Hex, RGB, HSL

Every color shows hex, rgb(), and hsl() values. Click any value to copy. HSL is generated natively for easy lightness tweaking.

Secure Mode

Toggle Secure to drive the generator with crypto.getRandomValues — useful for draws, NFT-style mints, and unpredictable design exploration.

Common use cases

check_circleBrainstorming brand color palettes during early identity design
check_circleFilling Figma, Sketch, and Tailwind config with placeholder swatches
check_circleGenerating distinct colors for chart series, tags, and category labels
check_circlePicking base colors for marketing graphics, social posts, and slide decks
check_circleProducing avatar background colors keyed to user IDs
check_circleExploring complementary and triadic schemes during landing-page design
check_circleGenerating CSS custom properties for design-system tokens
check_circleSeeding mood-board exploration before formal palette refinement

Hex, RGB, HSL — and why HSL wins for design

Hex and RGB encode the same red/green/blue numbers — hex in base 16, RGB in base 10. Both are universal but neither is friendly to manipulate: making a brand color "a little darker" in hex requires three independent arithmetic operations. HSL (Hue, Saturation, Lightness) is a designer-friendly model — bump the L value down 10% and the color is darker, predictably. Modern CSS supports hsl() natively, and design systems built on HSL (or its newer cousin oklch()) are far easier to theme. The generator emits all three so you can paste whichever your tooling prefers.

More design-time generators

Filling a mockup also needs body copy, slugs, and test passwords. OpenFormatter has the rest.

Lorem Ipsum Generator Slug Generator Random Number Generator

Frequently Asked Questions

How is the randomness generated?

By default the tool uses Math.random() to pick a base hue (0–360), saturation (50–90%), and lightness (40–70%). Toggle Secure mode to use crypto.getRandomValues for unpredictable results — useful when randomness is part of a draw or when reproducibility could be exploited.

What is a color palette?

A palette is a set of colors that look intentional together. The tool generates 5-color palettes from one base hue using classical color-theory relationships: analogous (neighbouring hues), complementary (opposite hues), triadic (evenly spaced thirds), or monochromatic (one hue, varying lightness).

What is the difference between analogous and complementary palettes?

Analogous palettes use hues within ~60° of each other on the color wheel — they feel calm and harmonious (think autumn leaves). Complementary palettes pair hues 180° apart — they feel high-contrast and energetic (think red-and-green Christmas, or blue-and-orange movie posters).

Are the generated colors WCAG-accessible?

No guarantee. Random colors do not consider contrast against text. For body copy aim for at least 4.5:1 contrast (WCAG AA) and 7:1 for AAA. Use the generator to find candidate colors, then validate pairs in a contrast checker before using them in production.

How do I check contrast for a generated color?

Paste the hex value into a free contrast tool such as WebAIM's contrast checker or Chrome DevTools (which shows contrast in the Inspect Element color picker). Aim for 4.5:1 against the text it sits next to. Larger text (18pt+) only needs 3:1.

What is the difference between hex and RGB?

They are the same color in different notations. Hex like #FF6A00 is a 6-digit hexadecimal encoding of red, green, and blue (FF=255 red, 6A=106 green, 00=0 blue). RGB like rgb(255, 106, 0) writes the same numbers in decimal. Browsers and design tools accept both interchangeably.

When should I use HSL?

HSL is friendlier for design systems and theming. To produce a darker variant of a color, just lower the L; to make a more muted variant, lower the S. Doing the same with hex requires converting to RGB, doing arithmetic, then converting back. CSS supports hsl() natively in every modern browser.

Can I use this to find brand colors?

Yes — for inspiration. Generate palettes until you spot a base hue that fits the brand, then refine the saturation and lightness manually in a design tool. For a finished brand palette also consider semantic neutrals (greys, off-whites) and verify accessibility against your typography.