Random Color Generator
Click the large color block to generate a new random color. Use the format buttons to switch between HEX, RGB, and HSL. Click any copy button to copy the value to your clipboard. Hit 'New palette' to regenerate the 5-color palette.
Random Palette
Click a swatch to copy its value
What Is a Random Color Generator?
A random color generator picks colors using a pseudo-random number generator (PRNG) to produce values across the full 24-bit color space — roughly 16.7 million possible colors. Each color is simultaneously expressed in three industry-standard formats: HEX, RGB, and HSL, so you can copy whichever format your project needs.
Color Format Explained
HEX (Hexadecimal)
The most common format for web design. A six-character string prefixed with #, where each pair of characters represents the red, green, and blue channels in base-16 (0–255 → 00–FF).
Formula:
#RRGGBB— e.g.,#3A7BD5
RGB (Red, Green, Blue)
Each channel is a decimal integer from 0 to 255. Used extensively in CSS and image processing.
Formula:
rgb(R, G, B)— e.g.,rgb(58, 123, 213)
HSL (Hue, Saturation, Lightness)
A more human-intuitive model. Hue is a degree on the color wheel (0–360°), Saturation is the intensity (0–100%), and Lightness is the brightness (0–100%).
Formula:
hsl(H, S%, L%)— e.g.,hsl(214, 63%, 53%)
Conversion: RGB to HSL
Given R, G, B normalized to the range 0–1:
L = (max + min) / 2
S = (max − min) / (2 − max − min) when L > 0.5, otherwise (max − min) / (max + min)
The Hue is calculated based on which channel (R, G, or B) is the maximum.
When to Use Each Format
| Format | Best For | Example |
|---|---|---|
| HEX | CSS stylesheets, HTML attributes, design tools | #FF5733 |
| RGB | CSS, canvas drawing, image manipulation | rgb(255, 87, 51) |
| HSL | Generating color scales, theming, accessibility | hsl(11, 100%, 60%) |
Color Theory Basics
Understanding color relationships helps you build harmonious palettes:
- Complementary: Two colors opposite on the color wheel (180° apart). High contrast, vibrant.
- Analogous: Three colors adjacent on the wheel (30° apart). Harmonious and calm.
- Triadic: Three colors evenly spaced (120° apart). Balanced yet varied.
- Monochromatic: Same hue at different saturations and lightnesses. Elegant and cohesive.
Accessibility and Contrast
When using colors in UI design, ensure sufficient contrast between text and background. The WCAG 2.1 standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Tools like the WebAIM Contrast Checker help verify compliance.
Frequently Asked Questions
How do I get a random color in CSS?
CSS itself has no native random function. Use this generator to get a random color value, then paste it into your stylesheet. In JavaScript you can generate one with: `'#' + Math.floor(Math.random()*16777215).toString(16).padStart(6,'0')`.
What is the difference between HEX and RGB?
They represent the same data in different notations. HEX uses base-16 (hexadecimal) with two digits per channel, while RGB uses base-10 integers. `#FF5733` and `rgb(255, 87, 51)` are identical colors.
What does HSL stand for?
HSL stands for Hue, Saturation, Lightness. Hue is the color type (0–360°), Saturation is how vivid it is (0% = gray, 100% = fully saturated), and Lightness controls brightness (0% = black, 100% = white).
How many possible random colors are there?
In the standard 24-bit RGB model there are 256 × 256 × 256 = 16,777,216 possible colors. The human eye can distinguish roughly 10 million colors, so the space is slightly larger than our perception.
Can I generate random pastel or neon colors?
Yes — in HSL, pastels have high lightness (70–90%) and low-to-medium saturation. Neons have high saturation (90–100%) and medium lightness (50–60%). Adjusting the S and L ranges while keeping H random produces targeted palette families.