Home › Generators & Text Tools › Random Color Generator

Random Color Generator

The Random Color Generator creates a fresh five-color palette in one click, with every color shown as a swatch in HEX, RGB, and HSL. Lock the colors you love, re-roll the rest, click any swatch to copy it, and check each color's contrast against white and black so your text stays readable. It is free and runs entirely in your browser.

How it works

Every color on a screen is made from red, green, and blue light. HEX writes those three amounts as a six-digit code after a hash sign — #2563EB means red 37, green 99, blue 235. RGB writes the same three numbers plainly, as rgb(37, 99, 235). HSL writes the same color a different way: hue is the position on the color wheel from 0 to 360 degrees, saturation is how strong the color is from 0 to 100 percent, and lightness is how light or dark it is from 0 to 100 percent. All three formats describe the same color, so you can copy whichever your design tool expects.

Press Generate palette and the tool picks five random colors. The palette style changes the range it picks from: Random uses the full range, Pastel picks light, soft colors with high lightness, Vivid picks strong, saturated colors, and Dark picks deep colors with low lightness. Each swatch shows its HEX code, its RGB values, and its contrast ratio against white text. Press the lock button under a swatch and that color is frozen — it stays put while the other four change on every new generate. Press the lock again to release it.

The contrast ratio tells you whether text is readable on a color. It runs from 1 : 1, for identical colors, up to 21 : 1, for black on white. The widely used accessibility standard asks for at least 4.5 : 1 for normal body text and 3 : 1 for large headings. This tool works out the ratio for each color against both white and black, so you can see at a glance which pairing to use: a dark blue works with white text, a pale yellow works with black text, and a mid-tone color may fail both and need a darker or lighter version.

Worked example

Suppose you need a palette for a small website and you press Generate palette once with the style set to Random.

Step 1: The tool draws five colors. One run gave #2563EB (a strong blue), #F59E0B (amber), #10B981 (green), #EC4899 (pink), and #8B5CF6 (purple).
Step 2: Take the blue, #2563EB. In RGB it is rgb(37, 99, 235), and in HSL it is about hsl(221°, 83%, 53%).
Step 3: Check its contrast. Against white text the ratio is about 5.2 : 1, which passes the 4.5 : 1 standard for normal text, so white headings read clearly on this blue.
Step 4: You like the blue and the amber, so you lock both swatches and press Generate again. The blue and amber stay, and the other three are replaced with fresh random colors.

The tool shows exactly this kind of result: five swatches with HEX, RGB, and contrast values, and the locked colors survive the next generate. Your own palette will be different — that is the point — but the formats, the locks, and the contrast numbers work the same way every time.

FAQ