Color Converter (HEX, RGB, HSL, HSV, CMYK & WCAG Contrast

Color Spaces: HEX, RGB, HSL, CMYK & WCAG Accessibility Contrast

Color science defines visual wavelengths across additive light (screens) and subtractive pigment (print) coordinate systems:

• **

• Core Color Space Transformations**:

• HEX to RGB: Each 2 hex digits represent an 8-bit channel (0 to 255):

\#RRGGBB R = hex(RR), G = hex(GG), B = hex(BB)

• RGB to CMYK (Subtractive Pigment):

K = 1 - (R', G', B'), C = (1 - R' - K) / (1 - K), M = (1 - G' - K) / (1 - K), Y = (1 - B' - K) / (1 - K)

where R', G', B' = R/255, G/255, B/255

• RGB to HSL (Perceptual Cylinder):

L = ( + ) / (2), S = (Δ) / (1 - |2L - 1|)

• **

• W3C WCAG 2.1 Relative Luminance & Contrast Formula**:

L = 0.2126 · R_linear + 0.7152 · G_linear + 0.0722 · B_linear

Contrast Ratio = (L_1 + 0.05) / (L_2 + 0.05) (1:1 to 21:1)

• **

• Compliance Levels**:

• WCAG AA Normal Text: 4.5:1

• WCAG AA Large Text: 3.0:1

• WCAG AAA Enhanced Normal Text: 7.0:1

How to Use This Calculator

Enter your HEX Color Code (#RRGGBB or #RGB) (e.g. #2563EB or 2563EB) and Design Palette & Brand Benchmark — choose from Custom HEX Color, Royal Blue (#2563EB) → RGB(37, 99, 235), Emerald Green (#10B981) → RGB(16, 185, 129). Results update instantly as you type — adjust any value to compare scenarios.

The Formula

Formula Reference: Color Converter (HEX, RGB, HSL, HSV, CMYK & WCAG Contrast)

Input variables:

hexColorStringInput — HEX Color Code (#RRGGBB or #RGB)

Computed outputs:

formattedRgbString — RGB Color String

formattedHslString — HSL Color String

formattedHsvString — HSV / HSB Color String

formattedCmykString — CMYK Print Color String

wcagWhiteContrastRatio — WCAG Contrast against White (#FFF)

Mathematical relationships extracted from calculation logic:

s = s[0] + s[0] + s[1] + s[1] + s[2] + s[2]

rNorm = r / 255, gNorm = g / 255, bNorm = b / 255

h = 0, s = 0, l = (max + min) / 2

d = max - min

cPrime = 1 - (r / 255)

mPrime = 1 - (g / 255)

yPrime = 1 - (b / 255)

c = (cPrime - k) / (1 - k)

m = (mPrime - k) / (1 - k)

y = (yPrime - k) / (1 - k)

Standard: NIST Handbook 44 and BIPM SI unit definitions

Worked Example

A UI/UX designer creates a primary button with HEX #2563EB. Converting to RGB (37, 99, 235) and checking WCAG contrast against white text yields 5.27:1, confirming the design exceeds the 4.5:1 accessibility threshold.

Understanding Your Result

Unit conversions are exact by definition within a given measurement system (e.g., 1 km = exactly 1,000 m). Cross-system conversions (metric to imperial) use defined exchange factors: 1 inch = exactly 2.54 cm; 1 pound = 0.45359237 kg. Round your converted result to match the precision of your original measurement — expressing more decimal places than your input justifies implies false accuracy. For regulatory, legal, or safety-critical applications, verify which measurement system is required by the applicable standard.