HSL to HEX Converter

What Is HSL

HSL stands for Hue, Saturation, and Lightness. It describes a color by its basic family on the color wheel, how intense that color is, and whether it is more dark or light.

Hue is measured in degrees from 0 to 360. Saturation and lightness are percentages from 0% to 100%. When saturation is low, the color moves toward gray. When lightness is close to 0%, the color is nearly black, and near 100% it becomes almost white.

Because these three values map directly to how designers talk about color, HSL is convenient for building themes, tone scales, and semantic palettes where you want predictable changes between different states of the same brand color.

What Is a HEX Color Code

A HEX value is a compact way to write an RGB color using the hexadecimal number system. The standard form is #RRGGBB, where each pair of characters represents the red, green, and blue channel.

Each pair ranges from 00 to FF. 00 means that channel adds almost no light, while FF means the channel is at full intensity. For example, #000000 is black, #FFFFFF is white, and #FFA500 is a bright orange.

Browsers and design tools parse the HEX string, split it into three groups, convert each group to a decimal number, and then work with the result as RGB. HEX is therefore just a short and readable wrapper around the RGB model that fits well in CSS, tokens, and shared palettes.

HSL to HEX Formula

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

Given:
  h in [0, 360)
  s in [0, 100]
  l in [0, 100]

1) Convert HSL to RGB:
   a) Normalize saturation and lightness:
      s' = s / 100
      l' = l / 100
   b) Compute chroma:
      c = (1 - |2 * l' - 1|) * s'
   c) Find the helper value:
      x = c * (1 - |((h / 60) mod 2) - 1|)
   d) Pick a temporary triple:
      if      0 <= h < 60   then (r1, g1, b1) = (c, x, 0)
      else if 60 <= h < 120 then (r1, g1, b1) = (x, c, 0)
      else if 120 <= h < 180 then (r1, g1, b1) = (0, c, x)
      else if 180 <= h < 240 then (r1, g1, b1) = (0, x, c)
      else if 240 <= h < 300 then (r1, g1, b1) = (x, 0, c)
      else                    (r1, g1, b1) = (c, 0, x)
   e) Add the offset and scale:
      m  = l' - c / 2
      r' = r1 + m
      g' = g1 + m
      b' = b1 + m
      r  = round(r' * 255)
      g  = round(g' * 255)
      b  = round(b' * 255)

2) Convert RGB to HEX:
   RR = dec_to_hex(r)
   GG = dec_to_hex(g)
   BB = dec_to_hex(b)

   dec_to_hex(x) = to_hex(x).padStart(2, "0")

3) Join the parts:
   #RRGGBB

In practice the converter first builds the RGB representation of the HSL color and then rewrites each RGB channel as a pair of hexadecimal digits. The visual color stays the same; only the notation changes from HSL to HEX.

Example for hsl(196, 47%, 54%)
1) Convert HSL to RGB using the algorithm above
2) Suppose the rounded RGB result is:
   rgb(79, 163, 194)
3) Transform each channel to HEX:
   79  -> 4F
   163 -> A3
   194 -> C2
4) Final HEX:
   #4FA3C2

How HSL to HEX Conversion Works Step by Step

Even though the HSL to HEX formula is written in several stages, it always follows the same pattern. You define the desired hue, saturation, and lightness, convert them to RGB, and then convert RGB to HEX.

hsl(210, 39%, 17%)
-> rgb(r, g, b)
-> #RRGGBB

Here is a closer look at the steps for hsl(210, 39%, 17%).

• Step 1 — Work out RGB channels from HSL

  Normalize saturation and lightness, compute chroma and the helper value, find the hue sector, and build a temporary triple. Then add the offset and scale each channel to the 0 to 255 range.

  h = 210, s = 39, l = 17
  rgb(26, 43, 60) after rounding

• Step 2 — Translate RGB channels into HEX pairs

  Convert each channel to hexadecimal and pad with a leading zero if it has only one digit. This guarantees that the final HEX code always has exactly six characters after the # symbol.

  26 -> 1A
  43 -> 2B
  60 -> 3C

• Step 3 — Join the pieces into the final HEX code

  Concatenate the three pairs and prepend #. The result is the HEX version of the original HSL color.

  #1A2B3C

The same workflow applies to any valid HSL input, which is why it is convenient to rely on a converter or utility function instead of repeating the math manually.

Choosing Between HSL and HEX

HSL and HEX are both common in front end work, but they solve slightly different problems. HSL emphasizes how colors relate to each other, while HEX is compact and easy to copy.

When HSL Is More Practical

• Designing and iterating on palettes: keep hue constant and adjust saturation and lightness to build sets of related tones.
• Working on themes: HSL helps you coordinate light and dark variants of the same base colors by tweaking lightness ranges.
• Explaining design decisions: values like hsl(210, 40%, 20%) are easier to discuss in design reviews than raw HEX strings.

When HEX Is a Better Fit

• Stable design tokens: HEX strings are short and work well as the final form for brand colors and neutral scales in a style guide.
• Copying between tools: many editors display and export colors in HEX by default, making it easy to paste them into CSS or configuration files.
• Scanning large lists of colors: HEX codes are easy to line up in tables or JSON files when you maintain dozens of tokens.

Summary

Use HSL when you create and refine a color system. Convert those values to HEX when you want a compact final representation for code and documentation.

Best Practices for Using HSL and HEX Together

Real projects rarely stick to a single color format. A small amount of planning can help you decide where HSL, RGB, and HEX each make the most sense.

Define a Source of Truth

• Pick one primary format for tokens: for example, keep master values in HSL, then derive HEX or RGB from them using converters.
• Avoid mixing formats at random: sticking to clear rules makes refactors and theme updates easier.

Combine HSL With Other Notations When Needed

• Use HSLA or RGBA for transparency: base colors can stay opaque, while overlays and shadows get a separate alpha channel where required.
• Convert at the boundaries: transform HSL to HEX or RGB only when you cross from design tokens to actual implementation details like CSS or canvas calls.

Watch Out for Common Pitfalls

• Ignoring contrast and accessibility: when you adjust lightness, regularly check how readable text and icons remain.
• Overusing very saturated colors: high saturation can be tiring in large areas; softer variants are often better for backgrounds.
• Recalculating by hand: prefer converters over manual math so that colors stay consistent across themes and breakpoints.

With clear rules for HSL and HEX you can keep design work flexible without sacrificing consistency in your stylesheets and components.

HSL to HEX Conversion Table

The reference table below shows a selection of well known colors in both HSL and HEX form. The values are rounded to keep them easy to read while you experiment with themes and layouts.

For any other HSL combination you can rely on the converter at the top of the page, which uses the standard HSL to RGB to HEX algorithm to compute exact values.

FAQ: HSL to HEX

• Why convert HSL to HEX

  HSL is comfortable for designing and adjusting palettes, while HEX is compact and widely supported in code and tools. Conversion lets you keep a flexible design workflow but still ship stable HEX tokens.

• What ranges do H, S, and L use

  Hue is written in degrees from 0 to 360, and saturation and lightness are written as percentages from 0 percent to 100 percent. In CSS this appears as hsl(h, s%, l%).

• Does converting to HEX change the color

  No. HSL, RGB, and HEX all refer to the same color space. As long as the math is correct, an HSL color and its HEX counterpart will look identical on screen.

• How do I represent transparency

  HEX supports an extended form #RRGGBBAA, where the last two digits describe the alpha channel. You can also use hsla() or rgba() with a separate alpha argument.

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

  Yes. A common pattern is to define palettes in HSL, store finalized values as HEX or RGB tokens, and convert between the formats automatically in tooling or utility functions.

Related Converters:

• HEX to RGB Converter

  Instantly calculate hex to rgb

• HEX to HSL Converter

  Instantly calculate hex to hsl

• 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

• HSL to RGB Converter

  Instantly calculate hsl to rgb