Why would I start with HSL instead of a hex color?

HSL is often the easier model to reason about while designing (pick a hue, decide how vivid and how light/dark), so it's common to land on an HSL value in a color picker or design spec and then need the equivalent hex color to actually use it in code.

What HSL values produce black, white, and gray?

Lightness 0% always produces black (#000000) and lightness 100% always produces white (#FFFFFF), regardless of hue or saturation. Any color with saturation 0% is a shade of gray, with lightness alone determining how light or dark, hue is irrelevant at 0% saturation.

Does hue wrap around past 360?

This tool accepts hue values from 0 to 360 inclusive (360 behaves identically to 0, both are red); values outside that range are rejected with a validation error rather than silently wrapped, so you can catch a typo before it produces an unexpected color.

How accurate is the resulting hex color?

The conversion follows the exact formula from the CSS Color Module Level 4 specification and rounds each RGB channel to the nearest integer byte, matching what a browser would render for the same hsl() value.

HSL to Hex Color Converter - Convert HSL to Hex Online

Overview

Introduction

HSL is a natural way to design colors because you can adjust hue, vividness, and brightness independently, but most CSS, design tools, and codebases still ultimately want a hex string.

This tool converts HSL values into the equivalent hex color using the exact formula browsers use internally to render CSS's hsl() function, so the result matches what you'd see on screen.

What Is HSL to Hex Color Converter?

An HSL-to-hex converter takes a hue (0-360 degrees), saturation (0-100%), and lightness (0-100%) and computes the corresponding red, green, and blue byte values, then hex-encodes them.

The underlying math is the piecewise formula standardized in CSS Color Module Level 4, using a chroma (C), intermediate (X), and lightness offset (m) to place each RGB channel based on which 60-degree hue sector the input falls into.

How HSL to Hex Color Converter Works

Chroma C = (1 - |2L - 1|) * S describes how far the color reaches from gray; X = C * (1 - |((H/60) mod 2) - 1|) is an intermediate value used for the two non-dominant channels; m = L - C/2 is the offset added back to every channel.

Which channel gets C, which gets X, and which gets 0 depends on which 60-degree segment of the 360-degree hue wheel H falls into; after assigning R', G', B' from that segment, the final RGB is (R'+m, G'+m, B'+m) each scaled to 0-255 and rounded.

When To Use HSL to Hex Color Converter

Use this whenever a design spec, color picker, or brief gives you HSL values and you need the equivalent hex color for CSS, an image tool, or any hex/RGB-based system.

It's also useful for programmatically generating color palettes by varying lightness or saturation in HSL space and converting each result to hex.

Often used alongside Hex Color to HSL Converter, HSV to Hex Color Converter and RGBA to Hex Color Converter.

Features

Advantages

Implements the exact CSS Color 4 formula, so results match what a browser renders for the equivalent hsl() value.
Validates hue, saturation, and lightness ranges up front with clear error messages.
Live swatch preview confirms the resulting color visually before you copy the hex value.

Limitations

Only produces a 6-digit hex color; there's no alpha/transparency component in HSL itself (see the RGBA tools for that).
Rounding RGB channels to the nearest integer means converting to HSL and back can occasionally shift a hex value by ±1 in a channel.

Examples

Fully saturated, mid-lightness red

Input

hsl(0, 100%, 50%)

Output

#FF0000

Hue 0 places this in the red segment, and full saturation with 50% lightness maximizes the red channel while zeroing green and blue.

Pure green

Input

hsl(120, 100%, 50%)

Output

#00FF00

Hue 120 degrees is exactly the green primary, with the same saturation/lightness pattern as the red example above.

Best Practices & Notes

Best Practices

When building a palette, vary lightness for tints/shades of the same hue rather than picking unrelated hex values by hand.
Double check hue is in degrees (0-360), not a fraction (0-1), a common source of unexpected 'stuck at red' results.

Developer Notes

This implements the CSS Color Module Level 4 HSL-to-RGB algorithm exactly (chroma/X/m piecewise formula across six 60-degree hue segments), verified against known reference conversions for the primary and secondary hues plus black/white/gray edge cases.

HSL to Hex Color Converter Use Cases

Converting a designer-provided HSL color spec into a hex value for implementation
Programmatically generating tints and shades of a brand hue by sweeping lightness in HSL and converting each step to hex
Verifying a hex color matches an intended HSL description

Common Mistakes

Entering saturation or lightness as a fraction (0-1) instead of a percentage (0-100); this tool expects the 0-100 scale.
Expecting a hue of exactly 360 to behave differently from 0; they describe the identical red hue.

Tips

Use the Hex Color to HSL Converter tool to check your work by converting a result back to HSL.
If you actually meant brightness/value rather than lightness, use the HSV to Hex Color Converter tool instead, the two models use similar but not identical math.

HSL to Hex Color Converter