About

Color selection in digital design is not arbitrary. A miscalculated R, G, B channel value can produce colors that fail WCAG 2.1 contrast ratios, rendering text illegible for roughly 8% of male users with color vision deficiency. This tool generates colors using cryptographic-quality randomness via the Web Crypto API, then computes all derivative color spaces - HEX, HSL, HSB, CMYK - using exact conversion formulas rather than lookup approximations. Relative luminance is calculated per the sRGB linearization model to determine whether white or black text maintains a contrast ratio above 4.5:1.

The generator also computes color harmonies (complementary, triadic, analogous, split-complementary) through hue rotation in HSL space. Note: CMYK values are mathematically derived and may differ from print-calibrated profiles (ICC/ISO 12647-2). For screen design work, the RGB and HEX outputs are authoritative. Pro tip: save harmonious palettes to favorites before closing - browser storage is domain-scoped and survives only cache clears.

Formulas

RGB to HEX conversion maps each channel integer to a two-character hexadecimal string:

HEX = # + pad(R.toString(16)) + pad(G.toString(16)) + pad(B.toString(16))

RGB to HSL conversion normalizes channels to [0, 1], finds C_max and C_min:

L = C_max + C_min2

S = Δ1 − |2L − 1|

where Δ = C_max − C_min. Hue H is computed from the dominant channel sector (0° - 360°).

WCAG relative luminance uses sRGB linearization:

L = 0.2126R_lin + 0.7152G_lin + 0.0722B_lin

where each linearized channel: if c ≤ 0.04045, c_lin = c12.92; else c_lin = ((c + 0.055) ÷ 1.055)^2.4.

CMYK from RGB (uncalibrated):

K = 1 − max(R′, G′, B′)

C = 1 − R′ − K1 − K

where R′ = R ÷ 255 (same for G′, B′). M and Y follow the same pattern substituting their respective channel.

Reference Data

Color Space	Channels	Range	Primary Use	Standard
RGB	R, G, B	0 - 255 per channel	Screen displays, CSS, WebGL	sRGB IEC 61966-2-1
HEX	6-digit hexadecimal	#000000 - #FFFFFF	Web development, CSS	W3C CSS Color Module
HSL	H, S, L	H: 0 - 360°, S/L: 0 - 100%	Color manipulation, theming	CSS Color Level 3
HSB/HSV	H, S, B	H: 0 - 360°, S/B: 0 - 100%	Adobe tools, painting software	A. R. Smith (1978)
CMYK	C, M, Y, K	0 - 100% per channel	Print production	ISO 12647-2
Relative Luminance	L	0 - 1	WCAG contrast calculation	WCAG 2.1 / IEC 61966-2-1
CSS Named Colors	-	148 keywords	Quick prototyping	CSS Color Level 4
Complementary	Hue + 180°	Single opposite hue	Maximum contrast palettes	Color theory (Itten)
Triadic	Hue + 120° / 240°	3 equidistant hues	Balanced vibrant palettes	Color theory
Analogous	Hue ± 30°	3 adjacent hues	Harmonious, calm designs	Color theory
Split-Comp.	Hue + 150° / 210°	2 near-opposite hues	Softer contrast than complementary	Color theory
WCAG AA (Normal)	Contrast ratio	≥ 4.5:1	Body text legibility	WCAG 2.1 §1.4.3
WCAG AA (Large)	Contrast ratio	≥ 3:1	Large text (≥18pt)	WCAG 2.1 §1.4.3
WCAG AAA	Contrast ratio	≥ 7:1	Enhanced legibility	WCAG 2.1 §1.4.6
8-bit Color Depth	3 channels × 8 bits	16,777,216 colors	Standard monitors	True Color (24-bit)
Adobe RGB	R, G, B	Wider gamut than sRGB	Photography, prepress	Adobe (1998)

Frequently Asked Questions

The generator uses the Web Crypto API (crypto.getRandomValues()), which sources entropy from the operating system's cryptographic random number generator (CSPRNG). Unlike Math.random(), which uses a deterministic PRNG (typically xorshift128+ in V8), the Crypto API produces uniformly distributed bytes suitable for security-critical applications. Each channel receives an independent random byte in the range [0, 255], yielding 16,777,216 possible colors with equal probability.

This tool computes CMYK using the naive mathematical conversion: K = 1 − max(R′, G′, B′). Adobe Photoshop applies an ICC color profile (typically US Web Coated SWOP v2) that accounts for ink absorption, paper type, and dot gain. The mathematical conversion is a linear approximation. For prepress-accurate CMYK, use a color management system with the appropriate ICC profile for your press and substrate.

The tool calculates WCAG 2.1 relative luminance using the sRGB linearization formula with coefficients 0.2126, 0.7152, and 0.0722 for the R, G, B channels respectively. If the resulting luminance L exceeds 0.179 (the midpoint threshold where contrast ratio against black equals approximately 4.5:1), the overlay text is set to black (#000000). Otherwise, white (#FFFFFF) is used. This ensures the displayed HEX code always meets WCAG AA contrast requirements.

Harmonies are computed by rotating the hue component in HSL space while preserving saturation and lightness. Complementary adds 180° (maximum chromatic contrast, useful for call-to-action buttons against backgrounds). Triadic distributes three hues at 120° intervals (balanced vibrancy, common in children's branding). Analogous shifts ±30° (low contrast, cohesive feel, preferred in editorial design). Split-complementary uses 150° and 210° offsets (retains contrast but avoids the tension of pure complementary). These are geometric relationships on the color wheel, not perceptual models.

No. The generator constrains each channel to integer values in [0, 255], which maps exactly to the 8-bit sRGB color space (IEC 61966-2-1). Every generated color is guaranteed to be displayable on any standard sRGB monitor. Wide-gamut displays (P3, Adobe RGB) can reproduce the same color but may render it slightly differently due to their larger native gamut and different transfer functions. The HEX/RGB values remain authoritative for web CSS regardless of display hardware.

No. Locked channels retain their current integer value while each unlocked channel independently receives a fresh cryptographic random byte. The unlocked channels are not influenced by locked values. If you lock R at 200 and randomize G and B, you still have 256 × 256 = 65,536 possible outcomes, uniformly distributed. This is useful for exploring tonal variations within a fixed hue family.