HSL to Hex Converter

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

Loading...
1. Set the hue value by entering a number between 0 and 360 degrees or dragging the hue slider along the color wheel. 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.

About This Tool

The HSL to Hex Converter takes hue, saturation, and lightness values and produces the corresponding hexadecimal color code. This is essential when you have designed a color using HSL controls but need the hex code for CSS, brand guidelines, or design tools that require hex input.

HSL provides a human-friendly way to define colors, but many design specifications and style guides still reference hex codes. This converter bridges that gap by performing the mathematical conversion accurately and instantly. Simply set your desired hue angle, saturation percentage, and lightness percentage to get a ready-to-use hex code.

The tool also displays a live preview of the resulting color and provides the equivalent RGB values as a bonus. This makes it easy to verify your color visually before copying the hex code into your project.

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.

Frequently Asked Questions

First convert HSL to RGB using the standard formula, then convert each RGB component (0-255) to a two-digit hexadecimal value. Combine them with a # prefix to get the hex code.
Red is at 0 (or 360) degrees, orange around 30, yellow at 60, green at 120, cyan at 180, blue at 240, purple at 270, and magenta at 300 degrees.
When saturation is 0%, the color becomes a shade of gray regardless of the hue value. The lightness alone determines how dark or light the gray appears, from black (0%) to white (100%).
Standard 6-digit hex codes do not include transparency. However, you can use 8-digit hex codes where the last two digits represent alpha. This tool outputs both the standard hex and the HSLA CSS format if you need transparency.
No. HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) use different models. In HSL, 100% lightness is white, while in HSV, 100% value is the pure color. They produce different results for the same numeric inputs.

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 color wheel with precision.

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 or RGB value. Identify colors by their standard names instantly.

Color Tools