Random Color Generator

Press the button and get a random color with its HEX, RGB and HSL codes, an approximate name and a readability check. Want more than one? Set how many colors you need, choose a style like pastel or vivid, and lock the ones you like while the rest keep changing.

How to use the random color generator

1. Press Generate color or hit the spacebar. A new color appears instantly.
2. Click any code (HEX, RGB or HSL) to copy it.
3. Pick a style under Options: pastel, vivid, muted, dark, light, warm, cool or tinted grays.
4. Generate several colors by changing “How many colors?” and lock the ones you want to keep.
5. Export your colors as a list, CSV, JSON or CSS variables, or share a link to the exact colors.

Color styles explained

Most random color tools pick red, green and blue values at random, which gives a lot of muddy, similar-looking colors. We generate colors in OKLCH, a color space designed to match how people see lightness and saturation. That means a “pastel” setting really gives you soft, light colors, and “vivid” gives you the brightest color a screen can show at that hue.

• Pastel: very light with gentle saturation, for nurseries, spring designs and calm interfaces.
• Vivid / neon: maximum saturation, for posters, sports branding and attention-grabbing buttons.
• Muted: low saturation, mid lightness. Easy on the eyes and good for backgrounds.
• Dark and light: deep shades for dark mode, or pale tints for page backgrounds.
• Warm and cool: reds, oranges and yellows, or greens, blues and purples.
• Tinted grays: near-neutral grays with a hint of color, the kind designers use for text and borders.

The contrast check

Under every color you’ll see its contrast ratio against white text and black text, with a WCAG rating. AA means normal text is readable on that color (a ratio of at least 4.5 to 1). “AA large” means only large text passes (3 to 1). Use this to see quickly whether a random color can work as a button or background.

HEX vs RGB vs HSL

• HEX such as #3A7BD5 is the format most design tools and websites use.
• RGB such as rgb(58, 123, 213) lists red, green and blue from 0 to 255.
• HSL such as hsl(215, 65%, 53%) gives hue, saturation and lightness, which makes it easy to tweak a color by hand.

Ideas for random colors

• Start a logo or brand concept from a color you would never have chosen yourself.
• Give yourself a drawing challenge: use only the three colors you generate.
• Pick placeholder colors for charts, mockups and game prototypes.
• Choose a color of the day for a classroom activity or an outfit.

Need a full set of colors that work together? Try the random color palette generator.

How the randomness works

Every result comes from your browser’s built-in cryptographic random number generator (crypto.getRandomValues). We use rejection sampling, so every item has exactly the same chance of being picked, with no bias toward the start or end of the list. Nothing is sent to a server, and share links store the exact results so the person you send them to sees the same thing.

Frequently asked questions