HEX to HSL Converter

What Is a HEX Color Code?

A HEX color is a six character value written with the hexadecimal number system and formatted as #RRGGBB. Each pair of characters represents one color channel: red, green, or blue.

The pairs range from 00 to FF. A value closer to 00 means that channel contributes very little light. A value closer to FF means that channel is at a high intensity. For example, #000000 contains no red, green, or blue at all, while #FFFFFF sets all three channels to their maximum.

Web browsers and design tools read a HEX color, split it into three parts, and internally convert each pair to decimal to work with RGB values. HEX is therefore just a compact way to store and share RGB colors in CSS and UI design.

What Is HSL?

HSL stands for Hue, Saturation, and Lightness. Instead of working with separate red, green, and blue channels, HSL describes a color by its position on the color wheel, how strong the color is, and how bright or dark it appears.

The hue is an angle in degrees from 0 to 360 that selects a basic color family, such as red, green, or blue. Saturation is written as a percentage from 0% to 100% and shows how vivid the color is. A low saturation value produces more gray and muted colors, while a high saturation value creates intense colors.

Lightness is also a percentage and describes how close the color is to black or white. At 0% lightness the color is black, at 100% it is white, and at 50% it has a balanced brightness. Together, these three values form an HSL triplet, for example hsl(200, 80%, 50%).

HEX to HSL Formula

#RRGGBB -> hsl(h, s, l)

1) Convert each pair to decimal:
   RR, GG, BB -> r, g, b in [0, 255]
2) Normalize to the range [0, 1]:
   r' = r / 255, g' = g / 255, b' = b / 255
3) Find max and min of r', g', b':
   max = max(r', g', b')
   min = min(r', g', b')
   delta = max - min
4) Compute lightness:
   l = (max + min) / 2
5) Compute saturation:
   if delta == 0 then s = 0
   else s = delta / (1 - |2 * l - 1|)
6) Compute hue:
   if delta == 0 then h = 0
   else if max == r' then h = 60 * (((g' - b') / delta) mod 6)
   else if max == g' then h = 60 * (((b' - r') / delta) + 2)
   else if max == b' then h = 60 * (((r' - g') / delta) + 4)
7) Convert h to [0, 360), s and l to percentages:
   H = h
   S = s * 100
   L = l * 100

This is the standard algorithm for converting an RGB color to HSL, which we apply after decoding the HEX color into RGB components. The result is an HSL value that describes the same color in a more flexible and theme friendly format.

Example for #4FA3C2

1) HEX to RGB:
   #4FA3C2 -> (79, 163, 194)
2) Normalize:
   r' = 79 / 255
   g' = 163 / 255
   b' = 194 / 255
3) Compute max, min, delta, then h, s, l
4) Final HSL (rounded):
   hsl(196, 47%, 54%)

How HEX to HSL Conversion Works Step by Step

Converting from HEX to HSL always goes through the RGB color model. First you decode the HEX pairs into red, green, and blue values, then you transform those values into hue, saturation, and lightness.

#1A2B3C
split into [1A, 2B, 3C]
-> rgb(26, 43, 60)
-> hsl(h, s, l)

Below is a more detailed look at what happens during this process for the color #1A2B3C.

• Step 1 - Split the HEX value

  [1A] [2B] [3C]

• Step 2 - Convert each pair to decimal

  Each two character group is a hexadecimal number. Convert it to decimal to get the RGB channel values in the range from 0 to 255.

  1A = (1 * 16) + 10 = 26
  2B = (2 * 16) + 11 = 43
  3C = (3 * 16) + 12 = 60

• Step 3 - Convert RGB to HSL

  Normalize the RGB values to the range from 0 to 1, compute the maximum and minimum channel values, then use the HSL formula to get hue, saturation, and lightness.

  hsl(210, 39%, 17%)

This workflow works for any valid HEX color: decode the HEX string to RGB, then apply the RGB to HSL transformation.

When to Use HEX and When to Use HSL

Both HEX and HSL are valid ways to describe colors in CSS. The best choice depends on whether you care more about compact tokens or about intuitive control over hue, saturation, and lightness.

When HEX is a good fit

• Short and familiar notation: HEX values are compact and widely used in design tools, documentation, and style guides.
• Great for static palettes: Perfect for design tokens and brand colors that rarely change and do not need dynamic adjustments.
• Easy to copy and paste: A single string like #4FA3C2 is simple to share across tools and teams.

When HSL is a better choice

• Theme building: HSL makes it easier to generate light and dark variants of the same hue by changing only the lightness value.
• Controlled saturation: You can dial colors up or down in intensity by adjusting a single percentage rather than three RGB channels.
• Readable color adjustments: It is easier to see what changed when you modify only hue, saturation, or lightness instead of three mixed channel values.

Summary

Use HEX when you want short, stable color tokens. Choose HSL when you care about predictable adjustments, theming, and working with color systems. Both formats describe the same visual colors and you can convert freely between them.

Best Practices for Using HSL in CSS

CSS supports many color notations. HSL is especially useful when you are building design systems, dark mode, or semantic color tokens that need to scale across components.

Use HSL for themeable palettes

• Share a hue, vary lightness: Keep the hue and saturation fixed for a brand color and change lightness to create hover, active, and disabled states.
• Align light and dark themes: Use the same hue but different lightness ranges for light and dark backgrounds so the palette stays consistent.

Combine HSL with other formats when needed

• HSL plus alpha: When you need transparency, use hsla() or the modern space separated syntax like hsl(200 80% 50% / 0.5).
• Interop with HEX and RGB: It is fine to keep brand tokens in HEX while converting them to HSL in code when you need dynamic color calculations.

Common mistakes to avoid

• Mixing notations randomly: Pick a primary format for your design system, then convert only when there is a clear reason.
• Ignoring contrast: When adjusting lightness, always check contrast ratios for text and key UI elements to keep them accessible.
• Using only lightness for depth: Combine small shifts in saturation with lightness changes to avoid flat looking interfaces.

Following these practices helps you build predictable, maintainable color systems that scale from simple components to large interfaces.

HEX to HSL Conversion Table

The table below lists common HEX colors and their HSL equivalents. It covers basic primaries, neutrals, and a few values that frequently appear in user interfaces.

These values are rounded for readability. For production work you can rely on the converter on this page to compute precise HSL values for any valid HEX color.

FAQ: HEX to HSL

• Why convert HEX to HSL at all?

  HEX is great for storing and sharing fixed colors, but HSL makes it much easier to adjust brightness and saturation, build themes, and generate related color scales.

• What ranges do H, S, and L use?

  Hue is measured in degrees from 0 to 360. Saturation and lightness are percentages from 0% to 100%. Many CSS examples use the form hsl(h, s%, l%).

• Does HSL support transparency?

  Yes. Use hsla(h, s%, l%, a) or the newer syntax hsl(h s% l% / a), where the alpha value is between 0 (transparent) and 1 (fully opaque).

• Is HSL more accurate than HEX?

  Both formats describe the same colors. The difference is in how they express those colors. HSL is usually easier to edit by hand because the three values directly map to hue, intensity, and brightness.

• Can I mix HEX, RGB, and HSL in one project?

  Yes. Many projects keep tokens in one format and convert as needed. The key is to be consistent inside your design system and use conversion tools to avoid manual mistakes.

Related Converters:

• HEX to RGB Converter

  Instantly calculate hex to rgb

• HEX to HSV Converter

  Instantly calculate hex to hsv

• RGB to HEX Converter

  Instantly calculate rgb to hex

• RGB to HSL Converter

  Instantly calculate rgb to hsl

• RGB to HSV Converter

  Instantly calculate rgb to hsv

• HSL to RGB Converter

  Instantly calculate hsl to rgb