Random Hex Color Generator (HEX, RGB & HSL Formats)

Random Hex Color Generator

Generate random colors and color palettes in one click. Pick a style like pastel, vivid, or dark, choose a color harmony, and lock the colors you like so they stay put while everything else changes. Each color shows its contrast with white and black text, and you can copy the whole palette as a list, CSS variables, SCSS, JSON, or Tailwind colors, or download it as a PNG.

How to use it

1. Choose a style, a harmony, and how many colors you want, then click Generate. You can also press G.
2. Click the lock on any color you want to keep. Locked colors stay the same when you generate again, and harmonies are built around the first locked color.
3. Click a color to copy its value, or use Copy all to copy the whole palette in the format you choose.

Your palette and settings are remembered in this browser, so they're still there when you come back.

Color styles

• Any color: completely random colors from all 16.7 million hex values.
• Light / pastel: soft, light colors for backgrounds and gentle designs.
• Dark / deep: rich, dark shades for dark themes, text, and contrast.
• Vivid / saturated: bright, bold colors for accents and calls to action.
• Muted / desaturated: subdued, grayish colors for calm, professional palettes.
• Warm tones: reds, oranges, and yellows.
• Cool tones: greens, blues, and purples.
• Neutral / grayscale: grays from near black to near white, with a hint of color.

Color harmonies

• Analogous: neighboring hues on the color wheel, for smooth, related palettes.
• Complementary: a hue paired with its opposite, for strong contrast.
• Triadic: three hues evenly spaced around the wheel, for balanced, colorful palettes.
• Monochrome: one hue in a range of light to dark shades.

Contrast ratings

Every color shows whether white or black text is easier to read on it, along with the contrast ratio and its WCAG rating. A ratio of at least 4.5:1 meets the AA standard for normal text, 3:1 meets it for large text, and 7:1 meets the stricter AAA standard. Use these ratings to pick button, banner, and background colors that stay readable.

HEX, RGB, and HSL

All three formats describe the same colors. HEX, like #228fcb, is the most common in CSS and design tools. RGB, like rgb(34, 143, 203), gives the red, green, and blue values from 0 to 255. HSL, like hsl(201, 71%, 46%), gives hue, saturation, and lightness, which makes it easy to adjust a color by hand. Switching formats doesn't change your palette.

Exporting a palette

Choose a format next to Copy all. CSS variables come out ready to paste into a stylesheet:

:root {
  --color-1: #228fcb;
  --color-2: #f4a259;
  --color-3: #5b8e7d;
}

SCSS gives you $color-1 style variables, JSON gives you an array of values, and Tailwind gives you a colors object you can paste into your Tailwind config. Download PNG saves an image of the palette with each color's value, which is handy for sharing with clients or adding to a mood board.

Frequently asked questions

Are the colors truly random?

Yes. Colors are picked with your browser's secure random number generator, within the limits of the style and harmony you choose.

How many colors can I generate at once?

Up to 48. Changing the number adds or removes colors without changing the ones already there.

Will my palette be saved?

Your current palette, locks, and settings are saved in this browser, so they're still there when you return on the same device. Nothing is sent to a server.

Can I use these colors for free?

Yes. Colors can't be owned, so you can use any color you generate in personal or commercial work.