Click Generate to see color values.
Understanding Color Formats
A 24-bit screen color has 16,777,216 possible values, 256 levels each of red, green and blue, written as a six-digit HEX code such as #1980E6. This generator picks a random hue, saturation and lightness inside the tone and hue you choose, then shows the HEX, RGB and HSL values and the contrast ratio against white.
HEX (#RRGGBB) is the standard for web design. RGB (Red, Green, Blue, 0-255 each) is how screens create color. HSL (Hue 0-360deg, Saturation 0-100%, Lightness 0-100%) is the most intuitive for designers because you can adjust brightness and saturation independently from the hue.
Hue (H)
Saturation (S)
What Each Tone Setting Picks
The hue is chosen evenly around the color wheel (or within the hue filter you pick). Saturation and lightness are then chosen evenly within these limits:
| Tone | Saturation | Lightness |
|---|---|---|
| Any color | 20% to 100% | 20% to 85% |
| Light / Pastel | 30% to 70% | 70% to 95% |
| Dark / Deep | 40% to 90% | 10% to 40% |
| Vivid / Saturated | 75% to 100% | 40% to 65% |
| Neutral / Muted | 5% to 30% | 30% to 80% |
Even "Any color" skips near-black, near-white and plain grays, because those rarely make useful picks. For a pure gray, enter an HSL value with 0% saturation in the color converter. To build tints and shades of a color you like, open it in the color picker.
HSL to HEX: Worked Examples
Take hsl(210, 80%, 50%). The HSL formula gives red 25, green 128 and blue 230. In hexadecimal 25 is 19, 128 is 80 and 230 is E6, so the color is #1980E6, a clear medium blue.
| HSL | RGB | HEX | Contrast on white |
|---|---|---|---|
| hsl(0, 100%, 50%) | 255, 0, 0 | #FF0000 | 4.00:1 |
| hsl(60, 100%, 50%) | 255, 255, 0 | #FFFF00 | 1.07:1 |
| hsl(120, 100%, 25%) | 0, 128, 0 | #008000 | 5.14:1 |
| hsl(210, 80%, 50%) | 25, 128, 230 | #1980E6 | 3.98:1 |
| hsl(270, 50%, 40%) | 102, 51, 153 | #663399 | 8.41:1 |
Notice that pure red and pure yellow share 100% saturation and 50% lightness, yet yellow is almost invisible on white. HSL lightness is not the same as how bright a color looks.
Contrast Ratings Explained
The contrast row compares the color with a white background using the WCAG 2 formula, from 1:1 (no contrast) to 21:1 (black on white).
- AAA pass: 7:1 or more, readable for almost everyone.
- AA pass: 4.5:1 or more, the usual minimum for body text.
- AA large text only: 3:1 or more, acceptable for text at least 18 point, or 14 point bold.
- Fail: under 3:1, fine as a background or accent but not for text on white.
How random is it?
Each value comes from Math.random, the browser's built-in pseudorandom generator, which is plenty for design inspiration. The palette mode simply repeats the draw, so colors in a 5 or 10 color palette are independent and can land close together.