HSL to Hex Converter

Convert HSL color values to hexadecimal codes. Enter hue, saturation, and lightness for instant hex output.

HSL to Hex Converter tool

Loading...

Example

Input: Hue 120, Saturation 100%, Lightness 25%

Result: HEX: #008000, RGB: rgb(0, 128, 0)

Hue 120 is pure green, full saturation removes red and blue, and 25% lightness puts green at half intensity (128 = 80 in hex). This is the CSS named color green.

Hue Angles and Their Hex Codes

HueHexColor
0#FF0000Red
30#FF8000Orange
60#FFFF00Yellow
90#80FF00Yellow-green
120#00FF00Green
150#00FF80Spring green
180#00FFFFCyan
210#0080FFAzure
240#0000FFBlue
270#8000FFViolet
300#FF00FFMagenta
330#FF0080Rose

Saturation 100% and lightness 50%, computed with the converter.

  1. Set the hue value by entering a number between 0 and 360 degrees or dragging the rainbow hue slider.
  2. Adjust the saturation percentage from 0% (gray) to 100% (full color) using the input field or slider.
  3. Set the lightness percentage from 0% (black) through 50% (pure color) to 100% (white).
  4. View the resulting hex color code and live color preview updating in real time as you adjust each value.
  5. Click the copy button to copy the hex code for direct use in your CSS, brand style guide, or design tool.

Turning HSL Values into Hex Codes

This converter turns hue, saturation and lightness into a hex code you can paste anywhere. For example, hsl(120, 100%, 25%) is #008000, the CSS color green. You also get the rgb() value and a live preview of the color. HSL is a comfortable way to design a color. You pick a hue, then set how vivid and how light it is. Many brand guides, design apps and older codebases still expect hex, though. The math goes from HSL to RGB first, then writes each RGB channel as two hex digits.

A few landmarks help you aim. Red sits at 0 degrees, yellow at 60, green at 120, cyan at 180, blue at 240 and magenta at 300. Saturation 0% gives a gray whatever the hue. Lightness 50% gives the purest version of a hue, while 0% is always black and 100% is always white.

Set the numbers with the inputs or the three gradient sliders. Hue takes 0 to 360 and the percentages take 0 to 100, in whole numbers. If you need lighter and darker steps of the result, the Color Shade and Tint Generator builds a full scale from it.

Formula / How It Works

Convert HSL to RGB: C = (1 - |2L - 1|) * S, X = C * (1 - |(H/60) mod 2 - 1|), m = L - C/2. Then R, G, B = (component + m) * 255, converted to two-digit hex.

Sources

Frequently Asked Questions

First turn HSL into RGB. Chroma C = (1 - |2L - 1|) x S, then X = C x (1 - |(H / 60) mod 2 - 1|) and m = L - C / 2. The hue section decides which channel gets C, X or 0. Add m to each, multiply by 255, round, and write each channel as two hex digits.
A gray. With no saturation the hue is ignored and all three channels are equal. hsl(0, 0%, 50%) is #808080, and lightness alone moves the gray from #000000 at 0% to #FFFFFF at 100%.
Hue is an angle, so 360 degrees brings you back to the start of the color wheel. Both values are red. The tool accepts 360 so the slider can reach the end, but the hex code is the same as at 0.
This tool gives opaque colors only: a 6-digit hex code, rgb() and hsl(). To add transparency, append an alpha pair to the hex code. 80 gives about 50% opacity and CC gives 80%. The Hex to RGB Converter reads 8-digit codes if you want to check the result.
HSL lightness is a simple average of the strongest and weakest channel. It does not model how bright a color looks to the eye. At 50% lightness, yellow (#FFFF00) looks far brighter than blue (#0000FF). Check real readability with a contrast checker instead of trusting the L value.

Related Tools

Hex to RGB Converter

Convert hexadecimal color codes to RGB values instantly. Supports shorthand and 8-digit hex with alpha.

Color Tools

RGB to HSL Converter

Convert RGB color values to HSL format. See hue, saturation, and lightness with a live color preview.

Color Tools

Color Picker

Pick any color visually and get values in hex, RGB, HSL, and CMYK. Interactive saturation panel and hue slider.

Color Tools

Color Shade and Tint Generator

Generate shades and tints of any color. Create darker and lighter variations for complete color scales.

Color Tools

Color Name Finder

Find the closest named CSS color for any hex color code. Identify colors by their standard names instantly.

Color Tools