Random Color Generator — Generate Random Colors

About the random color generator

Our random color generator is a useful tool for designers, developers, and anyone who needs color inspiration. Each color is generated by randomly selecting red, green, and blue values between 0 and 255, giving you access to any of the 16.7 million possible colors. Copy colors in HEX for web design, RGB for programming, or HSL for easier color manipulation. Use the channel locking feature to explore variations — lock the hue to get different shades of the same color, or lock saturation to explore colors with similar vibrancy.

How Are Random Colors Generated?

Colors on screens are defined in the RGB color model: three independent channels — Red, Green, and Blue — each ranging from 0 to 255. A fully random color is generated by independently sampling each channel: r = Math.floor(Math.random() * 256), and the same for g and b. Combining three independent 8-bit values gives 256³ = 16,777,216 possible colors, which is every color that a standard display can render. The resulting RGB triplet is then converted to a 6-digit hexadecimal code (HEX) and to HSL (Hue, Saturation, Lightness) for use in different contexts.

The channel locking feature gives designers partial control over randomness. Locking the Hue channel fixes the color family and randomizes only how bright and vivid the color is — great for exploring shades of a chosen color. Locking Saturation keeps the vividness constant while varying the hue and lightness — useful when you need colors that all have the same level of visual intensity. Locking Lightness produces colors of a consistent brightness, which is especially valuable for accessibility work where maintaining sufficient contrast against backgrounds is important.

The HEX format (e.g. #A3F2B1) is the standard for web design and CSS. The RGB format (e.g. rgb(163, 242, 177)) is widely used in programming and image editing. The HSL format (e.g. hsl(131, 82%, 79%)) is often the most intuitive for designers because it separates the perceptual properties of the color — what color it is, how vivid it is, and how light or dark it is — into three independently adjustable values.

Worked Example: Designer Color Palette Discovery

A web designer is starting a new brand identity project and needs a color palette. Rather than beginning with a predetermined color family and risk anchoring to the obvious choice, she uses the random color generator to explore the full 16.7 million color space. She generates colors rapidly using the Space bar, watching the large swatch update. When she spots a color that triggers an interesting reaction — a muted teal around #4A9B8E — she copies the HEX value and pauses.

She then locks the Hue channel (fixing the color family to teal) and generates 10 more colors to explore variations in saturation and lightness. This produces a range from nearly white pastels to deep jewel tones — all within the same hue family. She selects three that work together at different brightness levels, giving her a monochromatic accent palette. The palette generation button then creates 5 fully random colors she uses to identify complementary accent colors.

Other use cases: a game developer generates random colors for procedurally generated world environments; a data visualisation engineer uses the tool to quickly produce distinct colors for chart series; a generative art creator uses random HEX codes as inputs to an algorithm; a teacher uses random color generation to demonstrate RGB color mixing to students; an interior designer generates random accent colors to break out of habitual choices and find unexpected combinations that work.

Key Factors in Random Color Generation

Color space and channel independence — RGB colors are generated by sampling three independent channels. Because each channel is sampled independently, the full 16.7 million color space is accessible with perfectly equal probability for every possible color — from pure white (#FFFFFF) to pure black (#000000) and every color in between.
HSL channel locking — Locking the Hue channel restricts generation to a single color family. Locking Saturation produces colors of consistent vividness. Locking Lightness produces colors of consistent brightness. Locking two channels simultaneously explores the full range of the unlocked channel, which is powerful for generating accessible, harmonious color sets.
HEX vs RGB vs HSL format — HEX is the standard for CSS and web design. RGB is standard in most image editors and programming libraries. HSL is the most intuitive for manual colour adjustment. This tool provides all three simultaneously so you can copy whichever format your workflow requires.
Palette generation — Generating 5 colors simultaneously provides a wider exploration canvas than single-color generation. Viewing multiple colors together allows you to immediately assess how they interact — whether they clash, complement, or form a cohesive palette — in a way that sequential single-color generation does not.
Color history — The scrollable history of recent colors means you never permanently lose a color you generated earlier in a session. If an interesting color scrolls out of view while you continue exploring, the history lets you scroll back and retrieve it without starting over.

Frequently Asked Questions

How is a random color generated?

A random color is generated by picking three random values (red, green, blue) each between 0 and 255. The formula is r = Math.floor(Math.random() * 256), and the same for g and b. These three values together define any of the 16.7 million possible RGB colors.

What is a HEX color code?

A HEX color code is a 6-digit hexadecimal representation of a color, preceded by #. Each pair of digits represents the red, green, and blue values (00–FF). For example, #FF0000 is pure red, #00FF00 is green, and #0000FF is blue. HEX codes are widely used in web design and CSS.

What is the difference between RGB and HSL?

RGB (Red, Green, Blue) defines color by mixing three primary light colors. HSL (Hue, Saturation, Lightness) defines color more intuitively: hue is the color type (0–360 degrees on the color wheel), saturation is how vivid it is (0–100%), and lightness is how bright it is (0–100%). HSL is often easier to work with when adjusting colors.

Can I generate a random color palette?

Yes. Click "Generate palette of 5 colors" to create five random colors at once. Each color is shown as a swatch you can click to copy its HEX code. Use this for quickly exploring color combinations for design projects.

How do I use a random color in CSS?

Copy the HEX value (e.g. #A3F2B1) and use it in CSS as background-color: #A3F2B1; or color: #A3F2B1;. You can also use the RGB value directly: background-color: rgb(163, 242, 177); or the HSL value: background-color: hsl(131, 82%, 79%);