Random Color Generator - HEX, RGB & HSL Colors Online

How to use this tool

Choose mode. Select Single color or Palette mode.
Choose a style. Select Any for the full RGB cube, or choose a Pastel, Warm, Cool, or Vivid HSL envelope.
Set count (palette). For palette mode, choose how many colors to generate (1–20).
Generate. Click "Generate" to create random colors.
Copy values. Click the labeled Copy button next to HEX, RGB, or HSL to copy that value.

Generate random colors in HEX, RGB, and HSL

Click Generate to create a random color and instantly see its HEX, RGB, and HSL representations. Switch to Palette mode to generate up to 20 colors at once, great for brainstorming a color scheme or picking an accent color.

How colors are generated

In Any style, each color comes from three independent random byte values (0–255) for red, green, and blue using your browser's Web Crypto API. The bytes become HEX and HSL values. Other styles use Web Crypto to sample integer HSL values inside their stated envelopes, then convert those colors to 8-bit RGB and HEX. Colors are generated in this browser; there is no seed or server request.

Color format quick reference

HEX: The most common format for web design. A 6-digit base-16 string like #ff6b35 where each pair of digits encodes red, green, and blue (00–ff). RGB: Specifies each channel as a decimal number from 0 to 255, e.g. rgb(255, 107, 53). Used directly in CSS and canvas drawing. HSL: Hue (0–360°), Saturation (0–100%), Lightness (0–100%). More intuitive for adjusting colors programmatically: changing lightness makes a color lighter or darker without shifting the hue.

When to use random colors

Random color generators are handy for placeholder UI elements, generating test data with distinct visual identities, seeding a design mood board, or simply finding unexpected color combinations you wouldn't have chosen consciously. Copy a value and paste it directly into your CSS, design tool, or code editor.

Style and mood envelopes

Choose a style when you want a narrower set of colors. Pastel samples any hue with saturation from 30–60% and lightness from 70–90%. Warm samples hue 0–60°, saturation 30–100%, and lightness 20–80%; Cool uses hue 180–270° with the same saturation and lightness ranges. Vivid samples any hue with saturation 71–100% and lightness 40–60%. These HSL values are converted to RGB, so the displayed integer values can differ slightly from an ideal continuous color. The default Any style still samples the full RGB cube and can produce muted or muddy colors; the styles are available when you want more control for a mockup, test fixture, or mood board.

Pastel: light colors with moderate saturation for soft backgrounds or placeholder interfaces.
Warm and Cool: constrain hue to warm reds/oranges/yellows or cool cyans/blues/purples while retaining a useful range of saturation and lightness.
Vivid: high saturation and mid-range lightness for stronger accents.

Color harmony

Palette mode samples each color independently; it does not apply a color-harmony rule. Color wheels can still help when you are choosing relationships for a design. For a palette built around complementary, analogous, triadic, or split-complementary hues, continue with the Color Palette Generator.

Complementary: two hues directly opposite on the color wheel (180° apart). High contrast; use one as dominant and the other as accent.
Analogous: three or four hues adjacent on the wheel (±30°). Naturally harmonious; common in nature-inspired palettes.
Triadic: three hues evenly spaced at 120° intervals. Vibrant and balanced; often used in bold graphic design.
Split-complementary: a base hue plus the two hues adjacent to its complement. More nuanced than complementary with less tension.

Frequently asked questions

How are the colors generated?

Any style creates three random RGB bytes (0–255) with your browser's Web Crypto API. Pastel, Warm, Cool, and Vivid sample cryptographically random integer HSL values within their displayed ranges, then convert them to RGB and HEX. Generation happens in your browser without a seed or server request.

What do the color styles constrain?

Pastel uses saturation 30–60% and lightness 70–90%. Warm uses hue 0–60°, and Cool uses hue 180–270°; both use saturation 30–100% and lightness 20–80%. Vivid uses saturation 71–100% and lightness 40–60%. Any remains the full RGB cube.

What is a HEX color code?

A HEX color code is a 6-digit hexadecimal string like #1a2b3c that encodes red, green, and blue values. Two digits each represent red (#rr), green (#gg), and blue (#bb) in the range 00–ff.

What is HSL?

HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel (0–360), saturation is how vivid the color is (0–100%), and lightness indicates how bright or dark it is (0–100%).

Can I copy the color values?

Yes. Each swatch has Copy buttons for its HEX, RGB, and HSL values. In palette mode, Copy all HEX copies the HEX values as a newline-separated list.

How many colors can I generate at once?

You can generate 1 to 20 colors at once using the palette mode.