Super Boring Tools

Search tools

Find a tool by name or what it does.

HSL to Hex Converter

Set hue, saturation, and lightness and get the matching hex, RGB, and HSL values, with a live swatch preview.

HSL color

Everything is converted in your browser. Nothing is uploaded.

Formats

#258CF4
HEX#258CF4
RGBrgb(37, 140, 244)
HSLhsl(210, 90%, 55%)

How to convert HSL to a hex color

  1. Set the hue

    Drag the hue slider from 0 to 360 degrees, or type an exact value, to pick the base color.

  2. Adjust saturation and lightness

    Use the saturation and lightness sliders, both 0 to 100 percent, to control how vivid and how bright the color is.

  3. Copy the hex

    The hex code, an rgb() string, and a normalised hsl() string update live; copy any one, or grab all three at once.

Why use this tool

Sliders and number fields

Drag the hue, saturation, and lightness sliders for quick exploration, or type exact numbers when you need a precise value. Both stay in sync.

Hex, RGB, and HSL at once

Every change produces a hex code, an rgb() string, and a clean hsl() string together, each with its own copy button.

Live swatch preview

A large swatch renders the current color and shows the hex code on top, so you can read the result at a glance instead of guessing from numbers.

Gradient slider tracks

Each track previews where you are heading: a full hue spectrum, a saturation ramp for the current color, and a black to white lightness scale.

Runs entirely in your browser

Everything happens on your device; nothing is uploaded.

About this tool

This converter turns an HSL color (hue, saturation, and lightness) into a hex code you can drop straight into CSS or a design file. Move the hue slider around the color wheel, then dial saturation and lightness with the sliders or type exact numbers, and the hex value, an rgb() string, and a normalised hsl() string all update on the same keystroke. A large swatch shows the resulting color, so you are matching what you see rather than guessing from numbers.

HSL is easy to reason about because hue picks the base color while saturation and lightness adjust how vivid and how bright it is, but stylesheets, icon exports, and image editors usually want a hex code instead. This page bridges that gap: choose a color the intuitive way and copy it in the format your tool expects. Hue accepts 0 to 360 degrees, saturation and lightness accept 0 to 100 percent, and out-of-range or empty values are handled without ever showing a broken result.

Everything is computed on your device, so the colors you build are never uploaded. Color work rarely stops at one conversion: to go the other way or between other models use the color converter, to check a foreground and background pairing against WCAG contrast rules use the contrast checker, and to build a tint and shade ramp from your chosen color try color shades.

Frequently asked questions

How do I convert HSL to hex?
Set the hue (0 to 360), saturation (0 to 100 percent), and lightness (0 to 100 percent) using the sliders or number fields. The hex code updates instantly and you can copy it with one click.
What is the formula from HSL to hex?
HSL is first converted to red, green, and blue channels using the standard chroma method, then each channel is written as a two digit hexadecimal value and joined into a #RRGGBB code.
Does it also show RGB?
Yes. Alongside the hex code you get an rgb() string and a normalised hsl() string, so you can copy whichever format your stylesheet or design tool needs.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.
Why does the hex look slightly different from the HSL I set?
Hex codes use whole numbers for each channel, so an HSL value can round by a fraction when written as integer RGB. The swatch always shows the exact color the sliders describe.

Related tools