Random Color Generator | HEX, RGB
Generate random colors with HEX, RGB, and HSL values. Copy values instantly.
Lock colors to keep them when regenerating. All colors generated live in your browser.
What Is the Random Color Generator | HEX, RGB?
A random color generator creates color values using pseudorandom number generation. This tool generates colors in four formats, HEX, RGB, HSL, and HSB, and supports color harmony modes that produce aesthetically pleasing palettes. All generation runs live in your browser using JavaScript's Math.random() function.
- ›Generate 1 to 20 colors at once with a single click
- ›Six harmony modes: Random, Complementary, Analogous, Triadic, Tetradic, Monochromatic
- ›Lock individual colors to keep them when regenerating the rest
- ›Copy any color value (HEX, RGB, HSL, or HSB) with one click
- ›Copy the full palette as a comma-separated HEX list
Formula
Color Model Ranges
HEX
#RRGGBB
16.7 million colors
RGB
R,G,B ∈ [0,255]
256³ combinations
HSL
H∈[0°,360°] S,L∈[0%,100%]
Intuitive for designers
HSL → RGB conversion:
- ›H (hue) maps around the color wheel: 0°=red, 120°=green, 240°=blue
- ›S (saturation) controls color intensity: 0%=grey, 100%=vivid
- ›L (lightness) controls brightness: 0%=black, 50%=normal, 100%=white
How to Use
- 1Set the number of colors (1–20) using the number input
- 2Choose a harmony mode: Random for completely random, or a harmony for aesthetically related colors
- 3Click "Generate Colors", swatches appear with all four color formats
- 4Click the lock icon on any color to preserve it on the next generation
- 5Click "Copy" next to any format to copy it to the clipboard
- 6Click "Copy all HEX" in the palette row to copy the entire palette
Example Calculation
A triadic palette based on hue 30° (orange):
Color 2: #2AE876, Hue 150° (green, +120°)
Color 3: #762AE8, Hue 270° (purple, +240°)
Complementary colors
Complementary colors sit opposite each other on the color wheel (180° apart). They create high contrast and vibrant looks, e.g. blue (#2A5AE8) paired with amber (#E8B12A).
Understanding Random Color Generator | HEX, RGB
Color Formats Explained
| Format | Example | Best for | Notes |
|---|---|---|---|
| HEX | #3498DB | Web development | 6 hex digits, 16.7M colors |
| RGB | rgb(52,152,219) | CSS, JavaScript | 0–255 per channel |
| HSL | hsl(204,70%,53%) | Design tools, CSS | Intuitive to adjust |
| HSB | hsb(204,76%,86%) | Photoshop, Figma | Same hue, different lightness model |
Frequently Asked Questions
What is HEX color format?
HEX color codes are used in HTML, CSS, and almost all design tools. The # symbol is followed by two hex digits each for red, green, and blue.
- ›#000000 = black (all channels zero)
- ›#FFFFFF = white (all channels maximum)
- ›#FF0000 = pure red, #00FF00 = pure green, #0000FF = pure blue
- ›Short form #RGB is possible when each pair is a double digit, e.g. #FFF = #FFFFFF
What is the difference between HSL and HSB?
Both models are more intuitive than RGB for choosing and adjusting colors, but they model lightness/brightness differently.
- ›HSL: L=0% is black, L=100% is white, L=50% at S=100% is pure color
- ›HSB: B=0% is black, B=100% at S=0% is white, B=100% at S=100% is pure color
- ›Photoshop uses HSB; CSS uses HSL
- ›Both use the same hue (0°–360°) scale
What are color harmonies?
Color harmony theory, developed by artists and color scientists, identifies which color combinations are visually pleasing.
- ›Complementary: two colors 180° apart, high contrast, vibrant
- ›Analogous: adjacent colors (±30°), harmonious, natural
- ›Triadic: three colors 120° apart, balanced and colorful
- ›Tetradic: four colors 90° apart, rich, complex palettes
- ›Monochromatic: one hue with varying lightness, elegant, cohesive
How do I use generated colors in CSS?
All four color formats produced by this tool are valid CSS color values.
- ›HEX: background-color: #3498DB;
- ›RGB: color: rgb(52, 152, 219);
- ›HSL: border-color: hsl(204°, 70%, 53%);
- ›For transparency: rgba(52, 152, 219, 0.5) or hsla(204°, 70%, 53%, 0.5)
Can I generate a random color with a specific hue?
The current tool generates colors with controlled harmony relationships. For precise hue control, choose monochromatic mode to get variations of a single hue.
- ›Random mode: completely random H, S, L values
- ›Monochromatic: random base hue, then varies lightness from 20% to 80%
- ›All other modes: fix hue relationships (complementary, triadic, etc.) with slight random variation in S and L
Is the generation truly random?
Math.random() is deterministic given a seed but browsers seed it with system entropy, making each session unique. This is more than sufficient for generating color palettes.
- ›Pseudorandom: not truly random but practically unpredictable
- ›Different from crypto.getRandomValues() used for passwords
- ›Quality: passes statistical randomness tests for color generation
- ›All generation runs locally in your browser, no server requests
What does locking a color do?
The lock feature is useful when you find a color you want to keep while exploring new options for the other slots in your palette.
- ›Click the lock icon (🔒) on any color swatch to lock it
- ›Locked colors are skipped during generation
- ›Click again to unlock and allow regeneration
- ›You can lock multiple colors simultaneously