HSL to RGB Converter

This HSL to RGB converter transforms HSL color values into multiple formats instantly. Adjust hue, saturation, lightness, and alpha with precision sliders or numeric inputs, then click any result to copy it.

Last updated: September 23, 2026

Key Features

• Real-time conversion to RGB, RGBA, HEX, HSL, HSLA, and CSS variables

• Visual color preview updates as you adjust values

• Click-to-copy on any output value, also with Enter or Space from the keyboard

• Preset colors for quick testing (red, green, blue, yellow, cyan, magenta, black, white)

• Synchronized inputs - sliders and number fields stay in sync

• Alpha channel support for transparency control

What You Get

Six color formats, shown here for the default hsl(200, 70%, 50%):

• RGB: rgb(38, 157, 217)

• RGBA: rgba(38, 157, 217, 1.00)

• HEX: #269DD9

• HSL: hsl(200, 70%, 50%)

• HSLA: hsla(200, 70%, 50%, 1.00)

• CSS Variable: --color: #269DD9;

Built for designers and developers who need accurate color conversions without extra steps.

What Is an HSL to RGB Converter?

An HSL to RGB converter is a small utility that turns a hue, saturation, and lightness value into the matching red, green, and blue numbers.

It runs a fixed formula, not a guess. Feed it the same three numbers twice and it returns the exact same result every time.

That's different from a color picker, which lets someone select or sample a shade by eye rather than compute one mathematically.

• A color picker selects a shade visually, often by clicking a swatch
• A converter calculates the equivalent value in a different color model
• The two often sit next to each other in design software, but they do different jobs

Most stylesheets still lean on hexadecimal or plain RGB values. Direct hsl() usage shows up in under 1% of color declarations across the web (HTTP Archive Web Almanac, 2022).

Design tools default to HSL sliders anyway, since the model matches how people think about color intuitively. A converter becomes the bridge back to whatever format the code actually needs.

The tool shows up on the frontend of a site, inside a stylesheet or a build script that prepares color values before anything renders.

It also turns up on the backend, in image-processing scripts or color pipelines that generate values before a template ever touches them.

What Are the Input and Output Value Ranges for HSL to RGB Conversion?

Hue runs from 0 to 360 degrees, saturation and lightness run from 0 to 100 percent, and the converter outputs red, green, and blue values between 0 and 255.

Values submitted outside these bounds get clamped or wrapped rather than rejected, depending on the implementation.

Key figures (CSS Color Module Level 4, W3C):

• Hue: 0 to 360 degrees, or an equivalent angle unit
• Saturation: 0% to 100%
• Lightness: 0% to 100%
• RGB output: 0 to 255 per channel (8-bit), or 0 to 1 normalized

That 0 to 255 scale is the same one used everywhere else RGB color shows up, from hex codes to canvas pixel data.

8-bit output is the default target simply because it's what browsers, image formats, and most design software already expect.

How Does the HSL to RGB Conversion Formula Work?

The formula calculates a chroma value first, locates which 60-degree slice of the hue circle the input falls into, then shifts everything by the lightness.

Six different combinations of red, green, and blue map to the six 60-degree segments of that circle.

The six-step path:

1. Calculate chroma from saturation and lightness
2. Divide the hue by 60 to find which segment it falls in
3. Derive an intermediate value, often labeled X, for that segment
4. Assign chroma, X, and 0 to red, green, and blue based on the segment
5. Add a lightness match value to each channel to shift it into place
6. Multiply by 255 and round to get the final integer RGB

It's really just two color models trading places mathematically, closer in practice than most HSL vs RGB comparisons make it sound.

Running the default input through those steps: hsl(200, 70%, 50%) gives a chroma of 0.7, lands in the 180 to 240 degree segment, and comes out as rgb(38, 157, 217), or #269DD9.

Nothing about the math changes based on the programming language. Only the syntax around it does.

How Is Rounding and Precision Handled in HSL to RGB Conversion?

Two color libraries can run the exact same HSL input and land one integer apart on a channel value, and both would still be correct.

That gap comes from rounding, not from a bug.

Where the drift comes from:

• The raw formula outputs floating-point numbers between 0 and 1
• Multiplying by 255 rarely lands on a whole number
• Some implementations round, others floor (truncate), and the two disagree near the midpoint

Chaining conversions makes it worse. Going from RGB to HSL and back to RGB can drift a channel by a point or two from accumulated floating-point error alone.

That small drift matters most right before a value becomes a hex color code, since hex has no room for fractional channels.

How Does the Conversion Handle Achromatic Colors and the Hue Wraparound?

Two conditions break the normal formula path: zero saturation, and a hue value that circles past 360.

Both get handled explicitly, not treated as errors.

Achromatic Colors (Saturation at Zero)

Zero saturation: the color has nothing left for hue to describe.

When saturation hits 0%, there's no shade on the wheel left to point to, so hue stops carrying any meaning.

• Red, green, and blue all get set to the same value
• That shared value equals the lightness, scaled to the 0 to 255 range
• Hue becomes what the specification calls a powerless component

A lightness of 50% with 0% saturation produces a mid-grey, rgb(128, 128, 128), no matter what hue value happens to be sitting in the input.

Hue Wraparound at 360 Degrees

Hue is circular, so values loop instead of stopping at a boundary.

A hue of 480 degrees behaves exactly like 120 degrees, and a hue of negative 120 degrees behaves exactly like 240 degrees (W3C, CSS Color Module).

Most implementations handle this with a modulo operation before the formula runs, folding any out-of-range hue back into the 0 to 360 window.

Skip that step and a hue of 400 gets treated as broken input instead of simply being 40.

How Do You Convert HSL to RGB Using CSS?

Write the color as hsl() and the browser converts it to RGB internally, with no separate step required.

The rendering engine does the math the moment the stylesheet loads, using sRGB as the target color space.

The classic comma-separated hsl() has worked in every major browser for well over a decade.

The newer CSS syntax drops the commas entirely, writing something like hsl(200 80% 50%) instead of the older hsl(200, 80%, 50%), and it accepts an optional alpha value after a slash (CSS Color Module Level 4, W3C). That modern form reached Baseline widely available status in July 2022.

When manual conversion is still needed:

• Canvas and WebGL contexts that expect raw RGB or normalized floats
• Exporting a static hex value for use outside the browser
• Environments with no CSS rendering engine at all, like native mobile layouts

Going the other way is just as common. Anyone starting from an RGB value and wanting the HSL equivalent can run it through a RGB to HSL converter instead of reversing the math by hand.

How Do You Convert HSL to RGB in JavaScript and Python?

The same formula works in any language. Only the syntax and the default value ranges change.

Environment	Input Scale	Built-in Function
CSS	Degrees, percent	hsl() (native)
JavaScript	Degrees, percent (typical)	None, written by hand
Python	0 to 1 fractions	colorsys.hls_to_rgb()

JavaScript Implementation

No native function: the formula gets written directly into the script.

• Take hue, saturation, and lightness as plain numbers, degrees and percentages
• Normalize saturation and lightness to a 0 to 1 range before running the math
• Multiply the final result by 255 and round for standard 8-bit output

A dozen lines of code cover the whole function. No dependency required.

Python Implementation

Python's standard library ships the conversion already built, through the colorsys module.

colorsys.hls_to_rgb() takes its three arguments in h, l, s order, not h, s, l (Python documentation), which trips up anyone porting code from a language that follows the standard HSL order.

One more difference: colorsys expects hue, lightness, and saturation as fractions between 0 and 1, not degrees or percentages.

Multiply hue by 360 and the other two by 100 to get familiar HSL numbers back out, or divide by those same amounts going in.

Should You Convert HSL to RGB Manually or Use a Library or Tool?

Writing the formula yourself makes sense when the runtime has no dependency available and you want full control over rounding behavior.

Reaching for an existing library makes sense everywhere else, especially once alpha, other color models, or string parsing enter the picture.

Method	Control	Dependency Cost	Best For
Manual formula	Full	None	Embedded systems, learning the math
JS or Python library	Limited	Small to moderate	Apps needing many color formats
Browser-native CSS	None needed	Zero	Standard web styling
Design tool picker	Visual only	Zero	One-off lookups, no code involved

Writing it manually:

• No dependency to install, audit, or update later
• Full control over rounding and output format
• More code to test and maintain as requirements grow

Using a library:

• Handles edge cases, alpha, and multiple color formats out of the box
• Cuts development time on anything beyond a single conversion
• Adds a dependency and some bundle weight to the project

Bundle size varies a lot between libraries built for this job. tinycolor2 ships at roughly 5KB gzipped, chroma-js at 13.7KB, and color2k at 2.8KB, according to color2k's own published size comparison (color2k, npm package documentation).

The scale of that convenience shows up in adoption numbers. color-convert alone logs roughly 200 million weekly downloads on the npm registry (Snyk package data, 2025), far more traffic than any single project's color math would ever justify writing from scratch.

Where Is HSL to RGB Conversion Actually Used?

The conversion sits quietly behind almost anything that lets someone pick a color visually and then ships that color as code.

Four places account for most of that traffic.

Design software:

• Figma, Photoshop, and Sketch expose HSL or HSB sliders because hue-based models match how people adjust color intuitively
• Every slider drag gets converted to RGB the moment it needs to render or export

Stylesheets and design tokens:

shadcn/ui's theming system long stored every color as raw HSL component numbers, something like 222.2 47.4% 11.2% for a primary color, then wrapped that value in hsl() at the point of use. Its Tailwind v4 themes have since moved to OKLCH (shadcn/ui documentation).

Either way, the pattern lets a whole design system shift shade or saturation across dozens of components by editing a single variable.

Image processing:

• Pillow and GIMP adjust hue or lightness programmatically, then convert back to RGB before saving a file
• Batch scripts that recolor product photos in bulk usually run this exact path

Charting libraries lean on it too. They generate a spread of hues at a fixed saturation and lightness, then convert each one to RGB for the pixels that actually reach the screen.

When Does HSL to RGB Conversion Not Apply or Produce Incorrect Results?

The formula itself never breaks. What breaks is the assumption that its output represents every color a screen can show.

Where it falls short:

• Wide-gamut colors: HSL is built on sRGB, and Display P3 covers roughly 50% more color space than sRGB (WebKit, 2020). Anything in that extra range has no accurate HSL to RGB path
• HSL confused with HSV or HSB: the letters look similar, but the formulas differ, and running an HSV value through an HSL formula produces the wrong color entirely
• Unnormalized inputs: passing 50 instead of 0.5 for saturation into a function expecting a 0 to 1 scale returns a value far outside any usable range
• Alpha silently dropped: converting HSLA to RGB without carrying the alpha channel forward produces an opaque color where transparency was expected

The lightness channel has a known weak spot of its own. The CSS Color Module Level 4 specification uses blue and yellow at the same 50% lightness as its own example, and the two shades look nowhere near equally light to the human eye (W3C, CSS Color Module Level 4).

That gap between numeric lightness and perceived lightness is why newer color spaces like Oklch exist. It isn't a flaw specific to any one converter.

None of this makes the conversion unreliable. It means the conversion answers a narrower question than what a color looks like on every possible screen.

FAQ on HSL to RGB Converter

What Do the Letters HSL and RGB Stand For?

HSL stands for hue, saturation, and lightness, the channels describing a color's position on the wheel, its intensity, and its brightness. RGB stands for red, green, and blue, the additive channels a screen lights up to display that color.

Is HSL the Same as HSV or HSB?

No. HSV and HSB name the same model, using value or brightness as the third channel instead of lightness. A 100% saturation value means a different shade in each model, so running an HSV value through an HSL formula returns the wrong color.

Can HSLA Convert to RGBA the Same Way?

Yes. The hue, saturation, and lightness channels convert exactly like standard HSL, and the alpha channel carries straight across unchanged, since both formats express transparency identically, as a decimal between 0 and 1 or a matching percentage.

Can You Convert HSL Directly to a Hex Code?

Yes, though it happens in two steps. The formula produces RGB first, and each of the three 0 to 255 values then becomes a two-digit hexadecimal pair, giving the six-character hex code used across CSS and design tools.

Where Does an HSL to RGB Converter's Math Stop Being Enough?

An HSL to RGB converter's formula stops being enough at the edge of the sRGB color space, since the algorithm maps hue, saturation, and lightness onto the 16.7 million colors sRGB can express.

hsl() has full browser support, yet it still appeared in under 1% of color declarations in 2022 (HTTP Archive Web Almanac, 2022). Full native support paired with negligible direct use shows where conversion actually happens: inside design tools and libraries upstream of the stylesheet.

Standard 8-bit output covers those same 16.7 million colors. Wide-gamut workflows move to 16 bits per channel to keep smooth gradients across a larger color space (Apple Developer, WWDC 2017), so accepting 8-bit math buys universal compatibility and gives up the extra precision those screens can show.

Sending that RGB output to print needs a further conversion, since printers use different primaries, handled by an RGB to CMYK converter.