Generate custom color palettes. Export RGB, Hex, and HSL color codes for web design projects.
Random color generation is a fundamental utility for designers prototyping color schemes, developers creating placeholder colors during layout development, data visualization engineers assigning distinct colors to categorical data series, and generative art programs creating visually dynamic outputs. A truly random color can appear in any format — CSS hex code, RGB triplet, HSL triple, HSB (Hue-Saturation-Brightness), or CMYK for print.
This generator produces random colors in all major color space representations simultaneously. Adjust which color channels are randomized and which are locked to control the randomization character: lock the hue to generate random shades of a specific color, lock the saturation to maintain consistent vibrancy across random hues, or lock brightness to generate random pastel colors.
RGB (Red, Green, Blue) represents colors as additive mixtures of three primary light colors, each from 0 to 255. This model matches how screens display color — each pixel emits light in three channels. Random RGB colors are maximally unpredictable but often produce muddy, low-saturation mid-tones because truly random R/G/B values rarely hit the clean primary and secondary colors that appear visually saturated.
HSL (Hue, Saturation, Lightness) separates the perceptual qualities designers think in: what color (hue 0-360°), how vibrant (saturation 0-100%), how dark/light (lightness 0-100%). Randomly varying only the hue while fixing saturation at 70% and lightness at 50% generates a set of vibrant, equally-weighted colors suitable for data visualization categorical palettes. HSB (Brightness instead of Lightness) uses a different lightness model that more intuitively maps to design tool sliders.
Equal numeric step changes in RGB space do not produce perceptually equal color differences — human vision is non-uniformly sensitive across the color spectrum. The CIELAB and OKLCH color spaces are perceptually uniform: equal numerical distances correspond to equal perceived color differences. This makes them superior for generating automatically distinct colors for data visualization, where each series color must be visually differentiable from all others.
When generating N colors that should all be perceptually distinct and maximally separated, the optimal approach distributes hue angles evenly in a perceptually uniform space. For 6 categories: start at a random hue and distribute at 60° intervals in OKLCH space rather than RGB, ensuring none of the generated colors appears similar to neighbors even under different display conditions and viewing environments.
Both HSL and HSB/HSV use Hue and Saturation but differ in the third component. HSL (Lightness): at L=100% you get white, at L=0% you get black, and at L=50% with S=100% you get the pure hue. HSB/HSV (Brightness/Value): at B=100% with S=0% you get white, at B=100% with S=100% you get the pure hue, and at B=0% you get black regardless of H/S. HSB more closely matches how paint pigments mix; HSL is more intuitive for computer graphics.
Pure random RGB values uniformly sample a cube of color space where the most vibrant colors (pure primaries and secondaries) occupy only a small fraction of the volume. Most random RGB combinations are mixtures of all three channels, producing medium-saturation brownish-grayish tones. For visually vibrant random colors, randomly vary only the hue in HSL space while keeping saturation at 60-80% and lightness at 40-60%.
#RRGGBB represents colors as three two-digit hexadecimal pairs: Red (00-FF), Green (00-FF), Blue (00-FF). #FF0000 = pure red (255,0,0 in RGB). #00FF00 = pure green. #0000FF = pure blue. #FFFFFF = white (all channels maximum). #000000 = black (all channels zero). #808080 = medium gray (128,128,128). Shorthand #RGB expands each digit: #F0F = #FF00FF.
Use the HSL color model: distribute hues at equal angular intervals (360°/N for N colors), keeping saturation at ~65-70% and lightness at ~45-55%. For 4 colors: hues at 0°, 90°, 180°, 270°. For maximum contrast, include colors from opposite ends of the lightness range (dark and light). The OKLCH color space provides even better perceptual uniformity than HSL for this purpose.
OKLCH is a perceptually uniform color space where equal numerical step changes produce equal perceived color differences — unlike RGB where moving from red to green looks like a larger change than moving from cyan to blue even when the numeric difference is identical. CSS Color Level 4 added oklch() as a CSS color function: oklch(0.5 0.15 200) = medium lightness, moderate chroma, blue-ish hue. OKLCH enables more predictable color manipulation for design systems.