About

Accurate color conversion requires precise arithmetic across non-linear color models. A rounding error of 1 in an R channel shifts the HEX output by a full step, potentially violating brand guidelines or WCAG contrast thresholds. This tool computes bidirectional transforms between six models - HEX, RGB, HSL, HSV, CMYK, and HWB - using the standard cylindrical decomposition where hue H is derived from the channel delta δ = C_max − C_min. CMYK values assume a pure mathematical conversion without ICC color profiles. The integrated contrast checker implements the WCAG 2.1 relative luminance algorithm with sRGB linearization, reporting ratios against both white and black backgrounds.

Limitations: CMYK output is device-independent and will differ from print-calibrated values. HSL/HSV hue is undefined when saturation is 0 (achromatic colors). The tool handles these edge cases by defaulting H to 0°.

Formulas

RGB to HSL conversion decomposes the red, green, and blue channels into cylindrical coordinates representing hue, saturation, and lightness.

R′ = R255 G′ = G255 B′ = B255

C_max = max(R′, G′, B′) C_min = min(R′, G′, B′) δ = C_max − C_min

L = C_max + C_min2

S =

{

0 if δ = 0δ1 − |2L − 1| otherwise

WCAG 2.1 contrast ratio uses relative luminance L computed from linearized sRGB channels.

L = 0.2126R_lin + 0.7152G_lin + 0.0722B_lin

CR = L₁ + 0.05L₂ + 0.05

Where L₁ is the lighter luminance and L₂ is the darker. A ratio ≥ 4.5:1 passes AA for normal text. ≥ 7:1 passes AAA.

RGB to CMYK (device-independent):

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

Where R′, G′, B′ are channels normalized to [0, 1]. K = key (black). When K = 1, all CMY channels are 0.

Reference Data

CSS Named Color	HEX	RGB	HSL	CMYK
Red	#FF0000	255, 0, 0	0°, 100%, 50%	0, 100, 100, 0
Lime	#00FF00	0, 255, 0	120°, 100%, 50%	100, 0, 100, 0
Blue	#0000FF	0, 0, 255	240°, 100%, 50%	100, 100, 0, 0
Yellow	#FFFF00	255, 255, 0	60°, 100%, 50%	0, 0, 100, 0
Cyan	#00FFFF	0, 255, 255	180°, 100%, 50%	100, 0, 0, 0
Magenta	#FF00FF	255, 0, 255	300°, 100%, 50%	0, 100, 0, 0
Orange	#FFA500	255, 165, 0	39°, 100%, 50%	0, 35, 100, 0
Purple	#800080	128, 0, 128	300°, 100%, 25%	0, 100, 0, 50
Teal	#008080	0, 128, 128	180°, 100%, 25%	100, 0, 0, 50
Navy	#000080	0, 0, 128	240°, 100%, 25%	100, 100, 0, 50
Coral	#FF7F50	255, 127, 80	16°, 100%, 66%	0, 50, 69, 0
SteelBlue	#4682B4	70, 130, 180	207°, 44%, 49%	61, 28, 0, 29
Tomato	#FF6347	255, 99, 71	9°, 100%, 64%	0, 61, 72, 0
SlateGray	#708090	112, 128, 144	210°, 13%, 50%	22, 11, 0, 44
Gold	#FFD700	255, 215, 0	51°, 100%, 50%	0, 16, 100, 0
Indigo	#4B0082	75, 0, 130	275°, 100%, 25%	42, 100, 0, 49
Crimson	#DC143C	220, 20, 60	348°, 83%, 47%	0, 91, 73, 14
DarkOliveGreen	#556B2F	85, 107, 47	82°, 39%, 30%	21, 0, 56, 58
MediumOrchid	#BA55D3	186, 85, 211	288°, 59%, 58%	12, 60, 0, 17
Chocolate	#D2691E	210, 105, 30	25°, 75%, 47%	0, 50, 86, 18

Frequently Asked Questions

This tool performs a device-independent mathematical conversion. Print shops use ICC color profiles calibrated to specific ink sets and paper stocks. The formula K = 1 − max(R', G', B') yields a theoretical CMYK value. For print-accurate results, use the output as a starting point and refine with your printer's profile in dedicated prepress software.

Achromatic colors have zero saturation, making hue mathematically undefined because the channel delta δ = 0. The converter defaults H to 0° in this case. This is a standard convention shared by CSS and most graphics software. The displayed hue has no visual effect when saturation is zero.

Relative luminance L is computed by linearizing each sRGB channel (applying a gamma of approximately 2.2) then weighting: L = 0.2126·R + 0.7152·G + 0.0722·B. The contrast ratio CR = (L₁ + 0.05) / (L₂ + 0.05) where L₁ > L₂. WCAG AA requires ≥ 4.5:1 for normal text and ≥ 3:1 for large text. AAA requires ≥ 7:1 for normal text.

HWB (Hue, Whiteness, Blackness) was introduced in CSS Color Level 4. It is more intuitive for tint/shade adjustments: increasing whiteness lightens the color, increasing blackness darkens it. Unlike HSL where both S and L interact to produce tints, HWB provides a linear mixing model. When W + B ≥ 1, the result is a gray proportional to W/(W+B) regardless of hue.

CSS 3-digit HEX shorthand duplicates each digit, not zero-pads. #FFF expands to #FFFFFF (each F becomes FF), #ABC becomes #AABBCC. This is defined in the CSS Color Module Level 3 specification. The tool accepts both 3-digit and 6-digit inputs and normalizes to 6-digit output.

Yes. The HSV (also called HSB in Adobe products) conversion uses the standard formula where V = Cmax and S = δ/Cmax. The hue calculation is identical to HSL. Values are rounded to the nearest integer for H (0-360°) and percentage for S, V (0-100%). These match Photoshop's color picker within ±1 due to rounding.