About

Hex color codes encode red, green, and blue channels into a six-character string prefixed with #, where each pair ranges from 00 to FF (0 - 255 in decimal). The total color space contains 16,777,216 unique values (256³). Selecting colors by intuition alone introduces bias toward familiar hues and ignores large regions of the gamut. This generator uses crypto.getRandomValues to produce uniformly distributed samples across the full sRGB cube, eliminating the weak periodicity of pseudo-random number generators.

Relative luminance is computed for each swatch so overlay text automatically switches between light and dark for readability, following WCAG 2.1 contrast guidelines. The tool approximates perceptual brightness only; it does not account for display gamma calibration or wide-gamut color spaces like DCI-P3. Pro tip: if you need harmonious palettes rather than pure random samples, lock one hue channel and randomize the others.

Formulas

Each hex color encodes three channels. A random color is constructed by generating three independent bytes:

color = # + hex(R) + hex(G) + hex(B)

where R, G, B ∈ [0, 255] are unsigned 8-bit integers from crypto.getRandomValues.

To determine whether overlay text should be dark or light, relative luminance L is calculated per WCAG 2.1:

L = 0.2126 ⋅ R_lin + 0.7152 ⋅ G_lin + 0.0722 ⋅ B_lin

Each channel is linearized from sRGB:

{

C_lin = C_srgb12.92 if C_srgb ≤ 0.04045C_lin = (C_srgb + 0.0551.055)^2.4 otherwise

where C_srgb = C255 for each channel. If L > 0.179, dark text is used; otherwise, light text is applied.

RGB to HSL conversion for the info display uses:

H = 60° × C_offsetC_max − C_min

where C_offset depends on which channel is dominant, S = C_max − C_min1 − |2L − 1|, and L = C_max + C_min2.

Reference Data

Color Name	Hex Code	RGB	Luminance	Common Use
Black	#000000	0, 0, 0	0.000	Text, borders
White	#FFFFFF	255, 255, 255	1.000	Backgrounds
Red	#FF0000	255, 0, 0	0.213	Errors, alerts
Green	#00FF00	0, 255, 0	0.715	Success states
Blue	#0000FF	0, 0, 255	0.072	Links, primary actions
Cyan	#00FFFF	0, 255, 255	0.787	Accents, info badges
Magenta	#FF00FF	255, 0, 255	0.285	Creative highlights
Yellow	#FFFF00	255, 255, 0	0.928	Warnings
Orange	#FFA500	255, 165, 0	0.482	CTAs, notifications
Purple	#800080	128, 0, 128	0.061	Branding, luxury
Teal	#008080	0, 128, 128	0.170	Healthcare, fintech
Navy	#000080	0, 0, 128	0.016	Corporate, headers
Coral	#FF7F50	255, 127, 80	0.370	Warm accents
Slate Gray	#708090	112, 128, 144	0.208	Neutral text
Goldenrod	#DAA520	218, 165, 32	0.420	Premium accents
Tomato	#FF6347	255, 99, 71	0.306	Destructive actions
Steel Blue	#4682B4	70, 130, 180	0.206	Dashboard UI
Mint Cream	#F5FFFA	245, 255, 250	0.978	Light backgrounds
Indigo	#4B0082	75, 0, 130	0.031	Dark themes
Chartreuse	#7FFF00	127, 255, 0	0.648	Eco, energy brands

Frequently Asked Questions

Math.random uses a pseudo-random number generator (xorshift128+ in most engines) that is deterministic given a seed and has detectable periodicity. crypto.getRandomValues sources entropy from the operating system's CSPRNG, producing uniformly distributed bytes with no predictable pattern. For a color space of 16,777,216 values, the practical difference is subtle, but it eliminates clustering artifacts that can appear when generating thousands of colors in sequence.

The generator computes relative luminance using the WCAG 2.1 formula: each sRGB channel is linearized (gamma-decoded), then weighted as 0.2126·R + 0.7152·G + 0.0722·B. If the resulting luminance exceeds 0.179, the overlay text renders in dark (#1a1a2e); otherwise it renders in white (#ffffff). This threshold guarantees a minimum contrast ratio of approximately 4.5:1 against both light and dark backgrounds.

Yes. Adjacent hex values like #3A7CB2 and #3A7CB3 differ by 1 in the blue channel (178 vs 179 out of 255). On an 8-bit sRGB display, this 0.39% intensity change is below the just-noticeable difference threshold for most observers. On 6-bit panels (common in budget monitors), dithering may render them identically. The generator does not deduplicate visually similar results because perceptual similarity depends on display hardware.

All three encode the same color. Hex is a base-16 compact notation (#RRGGBB). RGB specifies decimal channel intensities from 0-255. HSL separates hue (0° - 360°), saturation (0% - 100%), and lightness (0% - 100%), making it easier to reason about color relationships. The generator displays all three formats for each swatch so you can copy whichever your project requires.

The generator always outputs full 6-digit hex codes for precision. A 3-digit shorthand like #F0A expands to #FF00AA by duplicating each nibble, which limits you to 4,096 colors (16³) instead of the full 16,777,216 (256³). The generated values are only expressible in shorthand when both nibbles per channel match (e.g., #AABB33 → #AB3), which occurs with probability (16/256)³ ≈ 0.024%.

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The contrast ratio between two colors is (L1 + 0.05)/(L2 + 0.05), where L1 and L2 are their relative luminances. This generator shows luminance for each color. To check a pair, compute the ratio manually or use the displayed luminance values. Random colors are unlikely to form accessible pairs without deliberate selection.