Color Lab

Free Random Color Generator

A random color generator creates unpredictable colors and their exact HEX, RGB, and HSL codes. Build a palette, lock the colors you love, and shuffle the rest until your project feels right.

random color generatorrandom HEX colorscolor palette generator
Palette style

Lock a swatch to keep it during the next shuffle.

Best text: BlackRatio 6.70:1
Best text: BlackRatio 11.97:1
Best text: BlackRatio 12.69:1
Best text: BlackRatio 11.62:1
Best text: BlackRatio 4.96:1

CSS variables

:root {
  --color-1: #FF4D8D;
  --color-2: #FFB627;
  --color-3: #20E3B2;
  --color-4: #22D3EE;
  --color-5: #8B5CF6;
}

Kid-friendly design challenge

Try a mini web page with #FF4D8D as the background, #FFB627 for buttons, and #20E3B2 for playful details. Check the suggested text color on every swatch before you code it.

How it works

From random idea to usable CSS

Every color is generated in HSL, converted into exact browser-ready formats, and checked against both white and black text. The contrast hint helps you choose a readable starting point while you experiment.

  1. 1

    Choose a palette style

    Pick fully random, pastel, vivid, or earthy colors to set the overall mood.

  2. 2

    Choose the number of colors

    Build a palette with three to eight swatches for a project, game, or web page.

  3. 3

    Lock colors you like

    Lock any favorite swatch so it stays in place while the other colors change.

  4. 4

    Copy colors into your code

    Copy HEX, RGB, or HSL values one at a time, or copy the full CSS variable block.

Random color generator FAQs

What is a random color generator?

A random color generator creates unpredictable colors and gives you their exact HEX, RGB, and HSL values. It is useful for finding design inspiration, building palettes, and practicing CSS.

How do I keep one color while generating a new palette?

Select the lock button on any swatch you want to keep. The next generation changes only the unlocked colors, so you can refine a palette one color at a time.

Should I use HEX, RGB, or HSL in CSS?

All three formats work in modern CSS. HEX is compact, RGB is easy to match with color channels, and HSL makes hue, saturation, and lightness adjustments easier to understand.

How does the text contrast suggestion work?

Each swatch compares its contrast against white and black. The tool suggests the text color with the stronger contrast ratio, but you should still test important interfaces against WCAG requirements.

Keep creating

Related free tools

View all tools →

HTML Color Picker

Fine-tune a specific color and explore matching color relationships.

Color Name Finder

Find the nearest readable CSS name for any color value.

Pixel Art Maker

Put your new palette to work in a playful browser canvas.

Turn your palette into a real app

Zap Code helps kids describe, build, and remix real web projects while learning how HTML, CSS, and JavaScript work.

Start building free