• 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

RGB to HSL Converter

Converting RGB colors to HSL is crucial for various image processing and computer graphics applications. The HSL color model represents colors in terms of their hue, saturation, and lightness, offering a perceptually uniform color space that's useful for tasks such as color selection, color blending, and image editing.

How to Convert RGB to HSL?

Converting RGB values to HSL involves several steps for accurate color representation as discussed below:

Normalize RGB values

Before conversion, normalize the RGB values (0-255) to a range of 0 to 1:

  • R' = R / 255
  • G' = G / 255
  • B' = B / 255

For Example

We have an RGB color with the values R=120, G=100, B=150, so normalizing it:

  • R' = 120 / 255 ≈ 0.471
  • G' = 100 / 255 ≈ 0.392
  • B' = 150 / 255 ≈ 0.588

Find the maximum and minimum of R', G', and B'

Determine the maximum (max) and minimum (min) values among the normalized RGB components.

  • max = maximum (R', G', B'), min = minimum (R', G', B')

Interpreting Formula

  • Max. = maximum (0.471, 0.392, 0.588) ≈ 0.588
  • Min. = minimum (0.471, 0.392, 0.588) ≈ 0.392

Calculate the Lightness (L)

The lightness component (L) represents the brightness of the color and is the average of the maximum and minimum RGB values:

  • L = (max + min) / 2

Interpreting Formula

  • L = (0.588 + 0.392) / 2 ≈ 0.49

Calculate the Saturation (S)

Saturation measures the intensity or purity of the color. It's determined based on the lightness and the maximum and minimum RGB values:

  • If max = min, S = 0

Otherwise,

  • If L ≤ 0.5, S = (max - min) / (max + min)
  • If L > 0.5, S = (max - min) / (2 - max - min)

Interpreting Formula

As L ≤ 0.5, so:

  • S = (0.588 - 0.392) / (0.588 + 0.392)
  • S = 0.196 / 0.98
  • S = 0.2

Calculate the Hue (H)

The hue component (H) represents the color itself and is calculated based on the relative positions of the normalized RGB values:

  • If max = min, H is undefined

Otherwise,

  • If max = R', H = (G' - B') / (max - min)
  • If max = G', H = 2 + (B' - R') / (max - min)
  • If max = B', H = 4 + (R' - G') / (max - min)

Interpreting Formula

As, max = B', so:

  • H = 4 + (0.471 - 0.392) / (0.588 - 0.392)
  • H = 4 + 0.079 / 0.196
  • H = 4 + 0.403
  • H = 4.403

Convert H to degrees: H = H * 60

If H is negative, add 360 to ensure it falls within the range of 0 to 360 degrees.

Otherwise, multiply it by 60 to convert it into degrees, as below:

since, H = 4.403, so:

  • H = 4.403 * 60
  • H = 264.18°

Interpreting HSL Values

Hue (H): Represents the color itself, ranging from 0 to 360 degrees. Red is at 0°, green at 120°, and blue at 240°.
Saturation (S): Indicates the intensity or purity of the color, ranging from 0% (grayscale) to 100% (fully saturated color).
Lightness (L): Represents the brightness of the color, ranging from 0% (black) to 100% (white).

Interpreting Values

  • Hue (H): 264.18°
  • Saturation (S): 20%
  • Lightness (L): 49%

Examples

  • Convert Red color to HSL

RGB: (255, 0, 0)

HSL: H: 0° S: 100% L: 50%

The HSL representation indicates a pure red color, fully saturated, and having moderate lightness.

  • Convert Green color to HSL

RGB: (0, 255, 0)

HSL: H: 120° S: 100% L: 50%

This HSL representation signifies a pure green color, fully saturated, and having moderate lightness.

  • Convert Blue color to HSL

RGB: (0, 0, 255)

HSL: H: 240° S: 100% L: 50%

The HSL values indicate a pure blue color, fully saturated, and having moderate lightness.

  • Convert Yellow color to HSL

RGB: (255, 255, 0)

HSL: H: 60° S: 100% L: 50%

In HSL, this color is represented as yellow, fully saturated, and having moderate lightness.

  • Convert White color to HSL

RGB: (255, 255, 255) to HSL: H: Undefined (All Hues) S: 0% L: 100%

The HSL values indicate a grayscale color with all hues and full lightness.

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