Home

HSL to Hex Converter

The HSL to Hex Converter takes the hue, saturation, and lightness values you enter into HSL Input (H, S%, L%) and calculates the matching hex color. Click Convert and your code appears in Hex Output, with an uppercase option for the letters. If you're debugging register values and don't want to convert to decimal by hand, the hex calculator does the arithmetic for you.

What Is the HSL Color Model and Why Convert HSL to Hex?

The HSL (hue, saturation, lightness) color model is a cylindrical representation of the RGB color model, designed to align more naturally with the way designers think about color than raw red/green/blue channel mixing. Rather than three intensity numbers, HSL describes a color by three intuitive dimensions — hue, saturation, and lightness — that map directly to how people describe color in conversation. Converting HSL to hex matters because while HSL is easy to reason about while designing a palette, most CSS legacy code, design-tool exports, and image formats still expect the compact #RRGGBB hex format.

Hue, Saturation, and Lightness — the Three HSL Inputs Explained

In the HSL model, every color lives inside a cylinder. Slice that cylinder and you get three coordinates: the angle around the central axis is the hue (H), measured from 0–360°, where 0° and 360° are both red, 120° is green, and 240° is blue. The distance from the central axis is the saturation (S), expressed as 0–100%, where 0% yields a neutral gray and 100% yields the most vivid version of that hue. The height along the axis is the lightness (L), also 0–100%, running from pure black at 0% to pure white at 100%, with the fullest, purest color sitting at 50%. This tool's HSL Input field takes exactly these three numbers, in the format H, S%, L% (for example 24, 100%, 50%), and converts them to hex.

How HSL Differs from RGB and Hex — and Why Both Still Matter

The RGB (red, green, blue) model defines a color by mixing three channel intensities from 0 to 255, which is precise for rendering but not very intuitive for building a palette by hand. A hex triplet like #3b82f6 is simply a compact hexadecimal notation of those same three RGB channels — equivalent to rgb(59, 130, 246) in RGB and hsl(217, 91%, 60%) in HSL — all three are just different ways of writing the same color. HSL is easier to reason about: raising the lightness by 10% always produces a predictably lighter version of the same hue, which is why designers and CSS authors often build a palette in HSL first. Hex is more universally supported: it works in every browser, every image format, and every legacy stylesheet without exception. CSS natively supports both hsl() notation and hex notation, so choosing between them is a matter of workflow, not a technical limitation — this HSL to hex converter exists precisely to move a value from the "easy to design in" format to the "works everywhere" format.

Infographic showing how to convert HSL(200, 65%, 45%) to hex: compute chroma bounds p and q, interpolate RGB fractions, and scale to 0-255 to get #288CBD
HSL to Hex Converter: hsl(200, 65%, 45%) = #288CBD

What Is a Hex Color Code? A Primer on the #RRGGBB Format

A hex color code — sometimes called a hex triplet — is a six-digit hexadecimal number prefixed with a hash symbol, used in HTML, CSS, SVG, and countless other formats to define a web color. Each pair of digits encodes one of the three red, green, blue channel values in hexadecimal notation, ranging from 00 to FF (equivalent to 0 to 255 in decimal). Understanding this structure makes the HSL-to-hex translation far more transparent. Since Pantone doesn't publish an official hex mapping, the hex to pantone converter instead compares your color against a curated approximation list.

Breaking Down the #RRGGBB Hex Format — Red, Green, and Blue Channel Values

PositionDigitsChannelRangeExample (#FF6600)
1–2RRRed00–FFFF = 255 (full red)
3–4GGGreen00–FF66 = 102 (mid green)
5–6BBBlue00–FF00 = 0 (no blue)

This #RRGGBB structure means every valid hex color encodes exactly one byte per channel. HTML, CSS, and SVG all rely on this same six-digit hexadecimal format, which is why hex remains the single most universally recognized color representation across front-end tooling — and why converting an HSL value to hex is such a common step before shipping a color to production CSS.

Shorthand Hex Codes — When #ABC Is a Valid Input

CSS also accepts a shorthand hex code in the form #ABC, where each single digit is doubled to produce the full six-digit equivalent #AABBCC. For example, #F00 expands to #FF0000 (pure red), and #08F becomes #0088FF. The shorthand is convenient for colors whose channels happen to share identical digit pairs, but this HSL to hex converter always outputs the full #RRGGBB form so the result is unambiguous and works everywhere a shorthand might not be recognized.

Using This HSL to Hex Converter — Inputs, Output, and Formatting

This HSL to hex converter is built to be simple and fast for any front-end workflow. Type your HSL values into the HSL Input box and the equivalent hex code appears in Hex Output as you type — no button click required, though a Convert button is also there if you prefer it. The fastest way to preview a Benjamin Moore paint color on screen is to enter its name into the benjamin moore to hex converter.

Step-by-Step Input Guide for Accurate Color Conversions

  1. Enter all three values on one line: Type hue, saturation, and lightness separated by commas into the HSL Input field, in the format H, S%, L% — for example 24, 100%, 50%. The tool expects exactly three values; if it can't find three comma-separated numbers, it shows an error asking you to re-enter them.
  2. Hue (H): A number from 0 to 360 that sets the position on the color wheel — which family of colors (red, orange, yellow, green, blue, violet) the result belongs to.
  3. Saturation (S%): A percentage from 0 to 100. At 0% you get a neutral gray; at 100% you get the most vivid version of that hue.
  4. Lightness (L%): A percentage from 0 to 100. Values below 50% darken toward black; values above 50% brighten toward white.
  5. Read the hex output: The converter immediately displays the corresponding #RRGGBB hex string in the Hex Output box.
  6. Format and copy: Turn on the Uppercase option if your project expects #FF6600 instead of #ff6600, then use the Copy button to grab the result for your stylesheet or design tokens.

The Math Behind HSL to Hex Conversion — From Cylinder to Hex String

Every HSL to hex translation is a two-stage process: first convert HSL to red-green-blue components, then encode those components as hexadecimal. Understanding both stages gives you confidence in the output and the ability to verify results independently.

Converting HSL to RGB — the Chroma and Intermediate Value Formula

Given normalized values where saturation (S) and lightness (L) are expressed as decimals (0–1) and hue (H) is in degrees (0–360), the algorithm proceeds as follows:

First, compute the chroma (the range of the output):

$$C = (1 - |2L - 1|) \times S$$

Then find the intermediate value X based on which 60° hue sector H falls in:

$$X = C \times \left(1 - \left|\left(\frac{H}{60} \bmod 2\right) - 1\right|\right)$$

The offset component is:

$$m = L - \frac{C}{2}$$

Depending on which 60° sector the hue falls in, assign preliminary (R₁, G₁, B₁) values:

  • 0° ≤ H < 60°: (C, X, 0)
  • 60° ≤ H < 120°: (X, C, 0)
  • 120° ≤ H < 180°: (0, C, X)
  • 180° ≤ H < 240°: (0, X, C)
  • 240° ≤ H < 300°: (X, 0, C)
  • 300° ≤ H < 360°: (C, 0, X)

Finally, add the offset to get the true red-green-blue components, scaled to 0–255:

$$R = \text{round}((R_1 + m) \times 255), \quad G = \text{round}((G_1 + m) \times 255), \quad B = \text{round}((B_1 + m) \times 255)$$

Converting RGB Values to a Hex Code — Encoding Each Channel

Once you have integer red-green-blue components in the 0–255 range, the step to a hex string is straightforward. Each component is individually converted to a two-digit hexadecimal number, padding with a leading zero if necessary, and the three pairs are concatenated:

$$\text{Hex} = \text{"\#"} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$$

Where toHex(n) converts an integer 0–255 to a two-character hexadecimal string (for example 15 → 0F, 255 → FF). This RGB to hex step is why low-channel values like those in navy blue require zero-padding to keep the valid #RRGGBB structure.

Worked Example 1 — hsl(60, 100%, 50%) Converts to #FFFF00 (Pure Yellow)

  1. Normalize inputs: H = 60, S = 1.0, L = 0.5
  2. Calculate chroma: \(C = (1 - |2 \times 0.5 - 1|) \times 1.0 = 1.0\)
  3. Find X: \(X = 1.0 \times (1 - |(60/60 \bmod 2) - 1|) = 1.0 \times (1 - |1 - 1|) = 1.0\)
  4. Hue sector 0–60°: \((R_1, G_1, B_1) = (1.0, 1.0, 0)\)
  5. Offset: \(m = 0.5 - 0.5 = 0\)
  6. Scale to 255: \(R = 255, G = 255, B = 0\)
  7. Encode as hex: #FFFF00 — pure yellow confirmed.

Worked Example 2 — hsl(120, 33%, 62%) Converts to #7EBE7E (Muted Green)

  1. Normalize: H = 120, S = 0.33, L = 0.62
  2. Chroma: \(C = (1 - |2 \times 0.62 - 1|) \times 0.33 = (1 - 0.24) \times 0.33 = 0.76 \times 0.33 \approx 0.2508\)
  3. X: \(X = 0.2508 \times (1 - |(120/60 \bmod 2) - 1|) = 0.2508 \times (1 - |0 - 1|) = 0.2508 \times 0 = 0\)
  4. Hue sector 120° ≤ H < 180°: \((R_1, G_1, B_1) = (0, C, X) = (0, 0.2508, 0)\)
  5. Offset: \(m = 0.62 - 0.1254 = 0.4946\)
  6. Scale: \(R = \text{round}(0.4946 \times 255) = 126 \rightarrow \text{7E}\), \(G = \text{round}(0.7454 \times 255) = 190 \rightarrow \text{BE}\), \(B = \text{round}(0.4946 \times 255) = 126 \rightarrow \text{7E}\)
  7. Result: #7EBE7E — a soft, muted green typical of status tones and nature-themed color schemes.

Worked Example 3 — hsl(240, 100%, 25%) Converts to #000080 (Navy Blue)

  1. Normalize: H = 240, S = 1.0, L = 0.25
  2. Chroma: \(C = (1 - |2 \times 0.25 - 1|) \times 1.0 = (1 - 0.5) \times 1.0 = 0.5\)
  3. X: \(X = 0.5 \times (1 - |(240/60 \bmod 2) - 1|) = 0.5 \times (1 - |0 - 1|) = 0.5 \times 0 = 0\)
  4. Hue sector 240° ≤ H < 300°: \((R_1, G_1, B_1) = (X, 0, C) = (0, 0, 0.5)\)
  5. Offset: \(m = 0.25 - 0.25 = 0\)
  6. Scale: \(R = 0 \rightarrow \text{00}\), \(G = 0 \rightarrow \text{00}\), \(B = \text{round}(0.5 \times 255) = 128 \rightarrow \text{80}\)
  7. Result: #000080 — classic navy blue. The zero-padding on the red and green channels is essential; without it, the output would be an invalid hex string.

Example HSL to Hex Conversions — Common Color Reference Table

The table below is a ready reference of frequent HSL values alongside their hex equivalents, covering a broad range of hue/saturation/lightness combinations you're likely to run into in real CSS and design work.

ScenarioHSL ValueHex CodeNotes / Use CaseWhy It Matters
Pure Redhsl(0, 100%, 50%)#FF0000Maximum-saturation red; common for alerts and brand accentsConfirms zero-offset chroma output; #ff0000 is the red benchmark
Pure Yellowhsl(60, 100%, 50%)#FFFF00Full-intensity yellow; ideal for highlights and warningsBoth RR and GG channels max out — validates the sector logic
Muted Greenhsl(120, 33%, 62%)#7EBE7ESoft, desaturated color for nature themes and success status colorsTests mid-range saturation and lightness handling
Navy Bluehsl(240, 100%, 25%)#000080Dark, rich blue for corporate branding and headersLow lightness produces small hex channel values that need zero-padding
Pure Whitehsl(0, 0%, 100%)#FFFFFFBackground and typography baselineAll channels at maximum FF; saturation is irrelevant at full lightness
Pure Blackhsl(0, 0%, 0%)#000000Absolute dark; used for text and shadowsAll channels zero; confirms the offset calculation at zero lightness
Mid Grayhsl(0, 0%, 50%)#808080Neutral mid-tone for backgrounds and UI chromeZero saturation yields identical channel values — a true neutral gray

Tips for Working with HSL and Hex in CSS — Best Practices

Knowing when to author in HSL versus when to reach for a hex string is a practical skill that separates efficient front-end workflows from fragile ones. A little awareness here can save hours of rework when a palette needs to shift later.

When to Use HSL in Your Stylesheet

  • Use HSL in CSS when building a component library — adjusting only the lightness value generates consistent tints and shades without touching the hue.
  • Use CSS custom properties built from HSL components to enable theme switching: one variable change can shift an entire palette from light to dark mode predictably.
  • HSL makes hue adjustments straightforward — creating a complementary color is as simple as adding 180° to the hue value.
  • For accessible palettes, tweak the lightness value to hit WCAG contrast ratios while preserving the intended hue.
  • Because HSL maps directly to perceptual brightness steps, it's the natural format to design a palette in before converting the final values to hex for production CSS.

When Hex Codes Are the Better Choice

  • Use hex strings when handing color values off to design tools like Figma — most design applications default to hex output for exported assets.
  • Hex is the safer format for legacy projects where the codebase already standardizes on #RRGGBB values and introducing hsl() syntax would add inconsistency.
  • For design tokens and developer handoff documents, a hex string is universally parseable by every tool and preprocessor without translation.
  • SVG files and HTML email templates often require hex notation rather than hsl() for the widest possible rendering support.
  • When sharing a single color value in a URL parameter or config file, hex is compact and unambiguous.

Frequently Asked Questions About HSL to Hex Conversion

Can I use a shorthand hex code like #ABC as input elsewhere?

This tool's output is always the full six-digit hexadecimal #RRGGBB format, since CSS's shorthand #ABC notation only works when every channel happens to share identical digit pairs. If you paste this converter's output into a stylesheet, it will always be valid regardless of whether a shorthand equivalent exists.

What if my HSL input is invalid or incomplete?

The converter expects exactly three comma-separated values in the format H, S%, L%. If it can't parse three numbers from what you entered, it shows an error message asking you to re-enter the hue, saturation, and lightness values rather than guessing or returning a wrong hex code.

Is HSL always more useful than hex, or vice versa?

Neither is universally better — each has its place. HSL is easier to reason about while designing: adjusting lightness or saturation gives predictable, intuitive results, which makes it well suited to palette-building and accessibility tuning. Hex is more compact and has the widest possible support across browsers, image formats, and legacy CSS. Many workflows use both — design in HSL, then use this converter to produce the final hex value for production.

Can I convert the other direction — hex to HSL?

Yes. This page is the HSL to hex converter, going from hsl() values to #RRGGBB. To go the other way, use the dedicated Hex to HSL Converter, which accepts a hex color and returns its H, S%, L% components.

Do browsers support the hsl() function directly in CSS?

Yes — hsl() and hsla() syntax is supported natively in every modern browser and is part of the CSS Color specification. You can use HSL values directly in CSS rules, custom properties, and inline styles without any preprocessing. Hex still has an edge in tooling and file formats that don't parse hsl() at all (some SVG renderers and older email clients, for example), which is exactly where an HSL to hex converter like this one earns its keep.

Which color format should I use for web design — HSL or hex?

For a new project, many designers start in HSL for building the palette itself — its predictable lightness and saturation steps make tint/shade generation and contrast tuning easier to reason about than raw hex math. Once the palette is locked in, export the final values to hex for production CSS, SVG assets, and developer handoff, since hex is the format the widest range of tools expect. Trying to build a full palette by eyeballing hex values alone is harder, since hex on its own gives you no direct handle on brightness or saturation.

Does this tool send my HSL or hex values anywhere?

No. Every HSL-to-hex conversion happens entirely in your browser using client-side JavaScript. Nothing you type into HSL Input is uploaded, logged, or stored — the calculation runs locally and the result never leaves your device.