HEX Color Conversion Tool (HEX to RGB, HSL & CMYK)

Pick a Color: Or Enter HEX Color:

Conversion Results

RGB: -

HSL: -

CMYK: -

Conversion Formulas (Simplified)

HEX to RGB: Convert each pair of HEX values (R, G, B) to decimal values using base-16.

RGB to HSL: - H = Hue (angle of color on color wheel) - S = Saturation (intensity of color) - L = Lightness (brightness of color) Formula calculates based on max/min values of R, G, B.

RGB to CMYK: - C = Cyan - M = Magenta - Y = Yellow - K = Key (black) Convert RGB values to percentages and derive CMYK values based on complementarity.

Brightness & Saturation Adjustments

Brightness:

Saturation:

Color Distribution (RGB)

Red: 0%

Green: 0%

Blue: 0%

Sample HEX Colors

Color	HEX
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#FF00FF
	#00FFFF
	#808080
	#800000
	#008000
	#808000

---

1. HEX to RGB Conversion

Formula

HEX is a 6-digit hexadecimal value representing red, green, and blue (R, G, B). Each pair of digits corresponds to a value between 0-255.

1. Split the HEX code into pairs:

   • First two characters = Red (R)
   • Next two characters = Green (G)
   • Last two characters = Blue (B)

2. Convert each pair from hexadecimal (base-16) to decimal (base-10).

Example

HEX Code: #4CAF50

1. Split into pairs:

   • Red = 4C
   • Green = AF
   • Blue = 50

2. Convert to decimal:

   • 4C → ( 4 \times 16 + 12 = 76 )
   • AF → ( 10 \times 16 + 15 = 175 )
   • 50 → ( 5 \times 16 + 0 = 80 )

Result: RGB(76, 175, 80)

---

2. RGB to HSL Conversion

Formula

HSL stands for Hue, Saturation, and Lightness:

• Hue (H): Angle on the color wheel (0° to 360°).
• Saturation (S): Intensity of the color (0% to 100%).
• Lightness (L): Brightness of the color (0% to 100%).

Steps:

1. Normalize RGB values to a range of 0-1:
   ( R{norm} = R/255, \, G{norm} = G/255, \, B_{norm} = B/255 )

2. Calculate max and min values:
   ( \text{max} = \max(R{norm}, G{norm}, B{norm}) )
   ( \text{min} = \min(R{norm}, G{norm}, B{norm}) )

3. Compute Lightness (L):
   ( L = (\text{max} + \text{min}) / 2 )

4. Compute Saturation (S):

   • If ( \text{max} = \text{min} ), ( S = 0 ) (grayscale).
   • Otherwise,
     ( S = \frac{\text{max} - \text{min}}{1 - |2L - 1|} )

5. Compute Hue (H):

   • If ( \text{max} = R{norm} ):
     ( H = 60 \times ((G{norm} - B_{norm}) / (\text{max} - \text{min})) + 360 ) (mod 360)
   • If ( \text{max} = G{norm} ):
     ( H = 60 \times ((B{norm} - R_{norm}) / (\text{max} - \text{min})) + 120 )
   • If ( \text{max} = B{norm} ):
     ( H = 60 \times ((R{norm} - G_{norm}) / (\text{max} - \text{min})) + 240 )

Example

RGB: ( (76, 175, 80) )

1. Normalize:
   ( R{norm} = 76 / 255 = 0.298, \, G{norm} = 175 / 255 = 0.686, \, B_{norm} = 80 / 255 = 0.314 )

2. Max = 0.686, Min = 0.298
   ( L = (0.686 + 0.298) / 2 = 0.492 )

3. Saturation: ( S = \frac{0.686 - 0.298}{1 - |2 \times 0.492 - 1|} = 0.579 ) (57.9%)

4. Hue: ( H = 60 \times \frac{(0.686 - 0.314)}{0.686 - 0.298} + 360 ) (mod 360)
   ( H = 123° )

Result: HSL(123°, 57.9%, 49.2%)

---

3. RGB to CMYK Conversion

Formula

CMYK stands for Cyan, Magenta, Yellow, and Key (Black). The formula converts RGB into percentages for printing.

Steps:

1. Normalize RGB to a 0-1 range:
   ( R{norm} = R/255, \, G{norm} = G/255, \, B_{norm} = B/255 )

2. Compute Key (K):
   ( K = 1 - \max(R{norm}, G{norm}, B_{norm}) )

3. Compute Cyan (C), Magenta (M), and Yellow (Y):

   • ( C = \frac{1 - R_{norm} - K}{1 - K} )
   • ( M = \frac{1 - G_{norm} - K}{1 - K} )
   • ( Y = \frac{1 - B_{norm} - K}{1 - K} )

If ( K = 1 ), then ( C = M = Y = 0 ).

Example

RGB: ( (76, 175, 80) )

1. Normalize:
   ( R{norm} = 76 / 255 = 0.298, \, G{norm} = 175 / 255 = 0.686, \, B_{norm} = 80 / 255 = 0.314 )

2. Compute Key (K):
   ( K = 1 - \max(0.298, 0.686, 0.314) = 0.314 )

3. Compute Cyan (C):
   ( C = \frac{1 - 0.298 - 0.314}{1 - 0.314} = 0.702 ) (70.2%)

4. Compute Magenta (M):
   ( M = \frac{1 - 0.686 - 0.314}{1 - 0.314} = 0.000 ) (0%)

5. Compute Yellow (Y):
   ( Y = \frac{1 - 0.314 - 0.314}{1 - 0.314} = 0.500 ) (50%)

Result: CMYK(70.2%, 0%, 50%, 31.4%)

---

Summary Table of Example Conversions

HEX	RGB	HSL	CMYK
#4CAF50	RGB(76, 175, 80)	HSL(123°, 57.9%, 49.2%)	CMYK(70.2%, 0%, 50%, 31.4%)

This step-by-step breakdown helps you to understand exactly how your HEX color codes are converted into other formats!