Random Color Generator

Random Color Generator pick a surprise color random sRGB value generate hex swatch
Random Color Generator
HEX
#808080
RGB
rgb(128, 128, 128)
HSL
hsl(0, 0%, 50%)
CSS name
Loading…
Supplemental
Loading…

Get one unpredictable screen color

Select Generate random color for a new opaque sRGB swatch. The same color appears as HEX, RGB, and rounded HSL notation. Choose one format and copy it.

Advertisement

How each color is selected

The page asks Web Crypto for three random bytes. Those values become red, green, and blue channels from 0 through 255, creating one of 16,777,216 possible opaque sRGB colors. Each click makes a fresh independent selection; it does not avoid colors seen earlier in the session.

Three notations, one swatch

HEX writes each channel as a two-digit hexadecimal pair, such as #336699. RGB writes the equivalent decimal channels as rgb(51, 102, 153). HSL describes hue, saturation, and lightness derived from those same RGB values. HSL percentages are rounded for display, so converting the displayed HSL back may differ by a channel value.

Worked example

If the random bytes are 51, 102, and 153, the result is #336699 and rgb(51, 102, 153). Its derived notation is approximately hsl(210, 50%, 40%). The preview, HEX, and RGB values all describe the exact selected sRGB color; HSL is a convenient rounded description.

Random does not mean suitable

A surprise color can start a sketch, placeholder, game token, test fixture, or brainstorming session. It does not automatically work as a brand color or readable foreground. Check contrast against its actual background and review the full interface rather than treating a random draw as a design decision.

Limitations and privacy

Generation stays in this browser and makes no network request. The tool creates one opaque sRGB color only. It does not build palettes, add alpha, preserve history, test accessibility contrast, account for color-vision differences, manage wide-gamut displays, or convert reliably to print inks. The name labels come from finite catalogs and do not establish one universal human name. Display appearance also depends on the screen and its calibration.

Random Color FAQ

Can the same color appear twice?

Yes. Every draw is independent, so repeats are possible.

Does it use Math.random?

No. It draws the three channel bytes with the browser's Web Crypto API.

Is HSL more accurate than HEX?

No. HEX and RGB retain exact channels; displayed HSL is rounded for readability.

Related tools

Categories

Tags

How the color names are chosen

Exact CSS names come from the official W3C named-color table. The supplemental label comes from a reviewed 512-name subset of the MIT-licensed color-name-list project. When there is no exact match, the tool compares colors in OKLab and clearly marks the nearest catalog entry as “closest.” Supplemental names are descriptive labels, not CSS keywords or universal standards, and another catalog may choose a different name. Read the supplemental source license.