HEX to HSL Color Converter

#

Color Picker

#FF5733

Color Shades

Color Combinations

About HEX and HSL Colors

HEX (Hexadecimal) and HSL (Hue, Saturation, Lightness) are two popular color models used in web design and development.

HEX (Hexadecimal)

HEX codes are a compact way to represent RGB colors using a six-digit hexadecimal (base-16) notation, prefixed with #. Each pair of digits corresponds to the red, green, and blue components, with values from 00 to FF (equivalent to 0-255 in decimal). For instance, #FF0000 is pure red, and #FFFFFF is white. HEX is the standard color format for web design because of its compatibility with HTML/CSS and compact representation.

HSL (Hue, Saturation, Lightness)

HSL is a cylindrical color model that represents colors in a way that's more intuitive for humans. Hue represents the color type (0-360° on the color wheel), Saturation is the intensity of the color (0-100%), and Lightness is the brightness (0-100%). For example, pure red is (0°, 100%, 50%) in HSL. This model is widely used in CSS and design tools because it allows easy adjustment of colors by modifying their hue, saturation, or lightness independently.

HEX to HSL Conversion Process

  1. Convert the HEX code to RGB values (each component 0-255)
  2. Normalize the RGB values to the range 0-1 by dividing by 255
  3. Find the maximum and minimum values among R, G, and B
  4. Calculate the Lightness: L = (max + min) / 2
  5. If max = min, the color is achromatic (Saturation = 0, Hue undefined)
  6. Otherwise, calculate Saturation:
    • If L ≤ 0.5: S = (max - min) / (max + min)
    • If L > 0.5: S = (max - min) / (2 - max - min)
  7. Calculate Hue based on which component is max:
    • Red: H = (G - B) / (max - min)
    • Green: H = 2 + (B - R) / (max - min)
    • Blue: H = 4 + (R - G) / (max - min)
  8. Convert Hue to degrees (0-360) and round all values

Example #1

Convert pure red HEX #FF0000 to HSL:

HEX = FF0000

RGB = (255, 0, 0)

Normalized RGB = (1, 0, 0)

max = 1, min = 0

L = (1 + 0)/2 = 0.5 (50%)

S = (1 - 0)/(2 - 1 - 0) = 1 (100%)

H = (0 - 0)/(1 - 0) = 0°

HSL = (0°, 100%, 50%)

Example #2

Convert teal HEX #008080 to HSL:

HEX = 008080

RGB = (0, 128, 128)

Normalized RGB ≈ (0, 0.502, 0.502)

max ≈ 0.502, min = 0

L ≈ (0.502 + 0)/2 ≈ 0.251 (25%)

S ≈ (0.502 - 0)/(0.502 + 0) ≈ 1 (100%)

H ≈ 2 + (0.502 - 0)/(0.502 - 0) ≈ 3 (180°)

HSL ≈ (180°, 100%, 25%)

Common HEX to HSL Examples

  • #FFFFFF → (0°, 0%, 100%) (white)
  • #000000 → (0°, 0%, 0%) (black)
  • #FF0000 → (0°, 100%, 50%) (red)
  • #00FF00 → (120°, 100%, 50%) (green)
  • #0000FF → (240°, 100%, 50%) (blue)
  • #FFFF00 → (60°, 100%, 50%) (yellow)
  • #00FFFF → (180°, 100%, 50%) (cyan)
  • #FF00FF → (300°, 100%, 50%) (magenta)
  • #808080 → (0°, 0%, 50%) (gray)

HSL is particularly useful in CSS for creating color variations and schemes. For example, you can easily create a lighter or darker version of a color by adjusting the lightness value while keeping the same hue and saturation.

HEX to HSL FAQ

Why use HSL instead of HEX or RGB?

HSL is more intuitive for humans to understand and manipulate. It's easier to create color variations (like lighter or darker versions) by adjusting the lightness value, or create harmonious color schemes by adjusting the hue while keeping saturation and lightness consistent.

Is HSL supported in all browsers?

Yes, HSL color values are fully supported in all modern browsers and can be used in CSS just like HEX or RGB values. For example: background-color: hsl(120, 100%, 50%);

Can all HEX colors be converted to HSL?

Yes, every HEX color has an exact HSL equivalent since both are based on the RGB color model. The conversion is lossless and reversible.

When should I use HSL colors?

HSL is particularly useful when you need to programmatically generate color variations, create color schemes, or when you want to give users intuitive controls to adjust colors (like in a color picker). It's also great for CSS when you need to create systematic color variations.