HSL to RGB Converter

What Is HSL

HSL stands for Hue, Saturation, and Lightness. It describes color in a way that is close to how people talk about it in everyday work: which base color it is, how strong it feels, and whether it is more dark or light.

Hue is an angle on the color wheel from 0 to 360. Saturation and lightness are percentages from 0% to 100%. Lower saturation moves the color toward gray, while lightness controls the overall brightness from black to white.

Because of this structure, HSL is comfortable for building tone scales, theme variations, and semantic tokens: you can keep the hue fixed and change saturation or lightness to get a family of related colors.

What Is RGB

RGB is a color model based on three light components: red, green, and blue. Each component is an integer from 0 to 255. A value of 0 means that channel is off, and 255 means full intensity.

When these channels are combined, they form the pixels on screens. For instance, rgb(255, 255, 255) is white, rgb(0, 0, 0) is black, and rgb(0, 128, 255) is a bright blue often used for links and buttons.

RGB is the native format for many graphics and rendering systems, which is why it appears everywhere in CSS, canvas APIs, image formats, and UI frameworks.

HSL to RGB Formula

hsl(h, s, l) -> rgb(r, g, b)

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

1) Normalize saturation and lightness:
   s' = s / 100
   l' = l / 100

2) Compute chroma:
   c = (1 - |2 * l' - 1|) * s'

3) Find a helper value:
   x = c * (1 - |((h / 60) mod 2) - 1|)

4) Compute a temporary rgb triple in [0, c]:
   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)

5) Add the lightness offset:
   m = l' - c / 2
   r' = r1 + m
   g' = g1 + m
   b' = b1 + m

6) Convert to final RGB:
   r = round(r' * 255)
   g = round(g' * 255)
   b = round(b' * 255)

The formula first builds a color with a given chroma and hue, then shifts it so that the final lightness matches the target value. At the end, the normalized channels are scaled to the 0 to 255 range used in RGB.

Example for hsl(196, 47%, 54%)
1) Normalize s and l to the [0, 1] range
2) Compute c, x, and m
3) Pick the correct temporary triple based on the hue sector
4) Add m to each channel and scale to 0-255
5) Rounded result:
   rgb(79, 163, 194)

How HSL to RGB Conversion Works Step by Step

The HSL to RGB algorithm can look intimidating at first, but it always follows the same pattern: work out how strong the color should be, choose a base direction on the color wheel, then adjust everything so that the lightness lines up.

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

Here is a more detailed description for hsl(210, 39%, 17%).

• Step 1 — Normalize and compute chroma:

  Turn saturation and lightness into fractions and use them to compute chroma, which describes how far the color moves away from gray.

  s' = 39 / 100
  l' = 17 / 100
  c = (1 - |2 * l' - 1|) * s'

• Step 2 — Determine the hue sector and base triple:

  Divide the hue by 60 to find the sector on the color wheel, then choose one of the temporary triples like (c, x, 0) or (0, x, c). This step selects how much red, green, and blue appear before the final lightness shift.

  h = 210
  h / 60 is between 3 and 4
  temporary triple uses (0, x, c)

• Step 3 — Add the offset and scale back to RGB:

  Add the offset m to each temporary channel so that the result has the desired lightness. Finally, scale everything to the 0 to 255 range and round to integers.

  rgb(26, 43, 60)

Once you understand these stages, you can apply the same method to any HSL color and confidently convert it to RGB in code or by using the converter on this page.

Where HSL and RGB Are Useful

HSL and RGB talk about the same colors, but each format shines in different situations. HSL is better for planning palettes, while RGB is the format that rendering engines and many APIs actually consume.

Typical uses for HSL

• Designing themes: keep hue stable across components and adjust saturation and lightness to create consistent scales.
• Exploring variations: small changes in lightness and saturation produce predictable lighter or darker versions of the same base color.
• Documenting palettes: HSL values are easy to read when you describe brand colors in design specs.

Typical uses for RGB

• Low level graphics and rendering: many drawing APIs and shader code expect RGB values directly.
• Interfacing with existing code: legacy styles, libraries, and design tokens often store colors as RGB or HEX.
• Working with images: pixel data and many image formats are based on RGB channels.

Summary

Use HSL when you want more control over how colors relate to each other. Convert those values to RGB when it is time to pass them into CSS, drawing APIs, or components that require numeric channels.

Practical Tips for Using HSL Alongside RGB

In real projects you rarely pick only one color format. It is common to think in HSL, store tokens in HEX, and render everything through RGB channels at runtime.

Build Palettes in HSL, Store Values in RGB or HEX

• Experiment in HSL first: adjust hue, saturation, and lightness until the palette feels right. Then convert to RGB or HEX for your design tokens.
• Keep code friendly values: RGB triplets work well for programmatic manipulation, while HEX is compact and convenient for configuration files.

Handle Transparency Separately

• Use HSLA or RGBA: keep the base color in HSL or RGB and add an alpha channel only where you actually need transparency, such as overlays or focus rings.
• Do not encode alpha into tokens unless required: base colors are often easier to reuse when they start fully opaque.

Keep Formats Consistent

• Pick one storage format per layer: for example, use HSL for design specs, HEX for tokens, and RGB where a graphics library demands it.
• Rely on converters instead of manual math: this reduces mistakes and keeps your design system easier to maintain over time.

With a clear strategy for when to use HSL and when to convert back to RGB, your color system stays predictable and simpler to evolve as the project grows.

HSL to RGB Conversion Table

The table below shows several familiar colors written in both HSL and RGB formats. The numbers are rounded to keep them easy to scan while you work on layouts, themes, or UI components.

For precise work, you can always use the converter at the top of the page which follows the standard HSL to RGB algorithm for any valid input.

FAQ: HSL to RGB

• Why convert HSL back to RGB

  Many tools and design systems prefer HSL for planning palettes, but browsers and graphics libraries often expect RGB or HEX. Conversion lets you keep a comfortable design workflow while still delivering the formats required by your stack.

• What ranges do H, S, and L use

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

• Does converting to RGB change the color

  No. HSL and RGB are just two representations of the same color space. A properly converted RGB triplet will look the same as the original HSL value when rendered.

• How do I handle transparency with HSL and RGB

  Use hsla() or rgba() when you need an alpha channel. Both notations extend the base color format with a fourth parameter that controls opacity.

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

  Yes. A common approach is to choose one format as the source of truth for tokens and rely on converters for all other cases. This keeps your system flexible without sacrificing consistency.

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 HEX Converter

  Instantly calculate hsl to hex