• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar

RGB-HEX

Convert RGB and HEX Colors to different formats

  • RGB Converters ↓
    • RGB to HEX
    • RGB to CMYK
    • RGB to HSV
    • RGB to HSL
  • HEX Converters ↓
    • HEX to RGB
    • HEX to CMYK
    • HEX to HSV
    • HEX to HSL
  • CMYK Converters ↓
    • CMYK to RGB
    • CMYK to HEX
    • CMYK to HSV
    • CMYK to HSL
  • Color Codes
  • Random Color Generator

HEX to HSL Converter

Converting HEX colors to HSL is essential for a wide range of image processing and computer graphics tasks. The HSL color model breaks down colors into hue, saturation, and lightness components, providing a perceptually uniform color space that is invaluable for activities like color selection, color mixing, and editing images.

How to Manually Convert HEX to HSL

Converting a hexadecimal color code to HSL involves several steps:

Convert HEX to RGB

HexadecimalDecimal
00
11
22
33
44
55
66
77
88
99
A10
B11
C12
D13
E14
F15
  • Divide the hexadecimal code into three pairs of two digits
  • Convert each pair into its decimal equivalent
  • These three decimal values represent the RGB values

For Example:

Let's say, the hexadecimal code #FFA500 is divided into three pairs of two digits: FF, A5, and 00.

Converting each pair into its decimal equivalent:

  • FF in hexadecimal is equivalent to (15 * 16) + 15 = 255 in decimal
  • AF in hexadecimal is equivalent to (10 * 16) + 15 = 165 in decimal
  • 00 in hexadecimal is equivalent to (0 * 16) + 0 = 0  in decimal

Therefore, the RGB values are (255, 165, 0)

Convert RGB to Normalized RGB

  • Divide each RGB value by 255 to get the normalized RGB values between 0 and 1.

Interpreting Formula

Normalize each RGB value by dividing it by 255:

  • R* = 255 / 255 = 1
  • G* = 165 / 255 ≈ 0.647
  • B* = 0 / 255 = 0

Normalized RGB values: (1, 0.647, 0)

Calculate the Hue (H)

  • Find the maximum and minimum values of the normalized RGB values.
  • Subtract the minimum from the maximum to get the delta (Δ).

Use the following formulas to calculate the Hue:

  • If Δ = 0, then H = 0.
  • If the maximum value is R, then H = 60 × ((G - B) / Δ) + 0.
  • If the maximum value is G, then H = 60 × ((B - R) / Δ) + 120.
  • If the maximum value is B, then H = 60 × ((R - G) / Δ) + 240.
  • If H is negative, add 360 to get the correct Hue value between 0 and 360.

Interpreting Formula

Find the maximum and minimum values of the normalized RGB values:

Maximum = 1, Minimum = 0

Δ = Maximum - Minimum = 1 - 0 = 1

Since Δ ≠ 0, we'll proceed with the Hue calculation.

Since the maximum value is red (R), we'll use the relevant formula:

  • H = 60 × ((0.647 - 0) / 1) + 0
  • H ≈ 60 × 0.647 ≈ 38.82

The resulting Hue is approximately 39°.

Calculate the Lightness (L)

  • L = (Maximum RGB Value + Minimum RGB Value) / 2

Interpreting Formula

L = (1 + 0) / 2 = 0.5

Calculate the Saturation (S)

  • If L = 0 or L = 1, then S = 0.

Otherwise,

  • S = (Maximum RGB Value - Minimum RGB Value) / (1 - |2 × L - 1|)

Interpreting Formula

Since L is not 0 or 1, we'll proceed with the calculation:

  • S = (Maximum RGB Value - Minimum RGB Value) / (1 - |2 × L - 1|)
  • S = (1 - 0) / (1 - |2 × 0.5 - 1|)
  • S = 1 / (1 - |1 - 1|) = 1

Resulting HSL values

  • Hue (H): Approximately 39°
  • Saturation (S): 100%
  • Lightness (L): 50%

So, for the example color code #FFA500, the HSL breakdown is approximately Hue 39°, Saturation 100%, and Lightness 50%.

Examples

HEX: #FF6347

Result: HSL (9, 100%, 64%)
Color: Tomato
Tone: This color has a warm tone added due to its reddish-orange hue.

HEX: #4682B4

Result: HSL (207, 44%, 49%)
Color: Steel Blue
Tone: It has a cool tone added because of its blue hue with a hint of gray.

HEX: #90EE90

Result: HSL (120, 73%, 75%)
Color: Light Green
Tone: This color has a fresh and vibrant tone added due to its light and bright green shade.

HEX: #8A2BE2

Result: HSL (271, 76%, 53%)
Color: Blue Violet
Tone: It has a rich and deep tone added because of its dark purple-blue hue.

HEX: #FFFF00

Result: HSL (60, 100%, 50%)
Color: Yellow
Tone: This color has a bright and cheerful tone added due to its vibrant yellow shade.

Primary Sidebar

Check Color Shades

Secondary Sidebar

Just Launched

  • Random Color Generator

RGB Converters

  • RGB to Hex
  • RGB to CMYK
  • RGB to HSL
  • RGB to HSV

HEX Converters

  • HEX to RGB
  • HEX to CMYK
  • HEX to HSL
  • HEX to HSV

About Us · Privacy Policy · Terms of Use · Contact Us
Copyright rgb-hex © 2025