HSL to HEX Converter

Turn any Hue, Saturation, and Lightness value into a clean HEX code with live preview, RGB output, and one-click copy.

Enter your Hue (0–360), Saturation (0–100%), and Lightness (0–100%) values to instantly generate the matching HEX code with a live color preview. Click any output to copy it, or tweak the sliders to fine-tune the shade before exporting.

HSL Input

Conversions

HEX

HSL

RGB

CMYK

CSS HSL

CSS HSL (Modern)

âš¡ Quick actions

Convert HSL to HEX with Pixel-Perfect Accuracy

The HSL to HEX converter turns any Hue, Saturation, and Lightness value into a clean six-digit hexadecimal color code in real time. Type or drag the sliders, and you'll see the matching HEX, RGB equivalent, and a live swatch update as you go — no guesswork, no manual math, and no rounding errors.

HSL is the most intuitive way to author colors because each channel maps to something your eyes already understand: hue is an angle on the color wheel, saturation controls vividness, and lightness controls brightness. HEX, on the other hand, is the format most design tools, style guides, and legacy systems expect. This tool bridges the two so you can author in HSL and ship in HEX.

Why Convert HSL to HEX?

  • Design handoff — Most design systems, Figma libraries, and brand guidelines store colors as HEX.
  • Email and legacy CSS — Older email clients and CMS templates only accept six-digit HEX values.
  • Tokens and theming — Exporting HEX into JSON, SCSS, or CSS custom properties keeps your tokens portable.
  • Cross-tool compatibility — Sharing a HEX code with developers, printers, or stakeholders avoids ambiguity.

How the Conversion Works

Internally the tool maps HSL through the CSS Color Module Level 4 algorithm: HSL is converted to sRGB, each channel is clamped to the 0–255 range, then encoded as two hexadecimal digits. Optional alpha values are appended as an eighth and ninth character, giving you eight-digit HEX for transparent colors.

hsl(210, 80%, 50%)  →  #1A8CE6
hsl(0,   100%, 50%) →  #FF0000
hsl(120, 60%, 40%)  →  #29A329

Pair It with the Rest of Your Workflow

Once you have a HEX value you like, run it through the tint and shade scale generator to build a full 50–950 ramp, or feed it into the color harmonies generator to find complementary and analogous partners. If you need the reverse trip, the HEX to HSL converter brings any code back into HSL space, and the universal color converter handles RGB, HSV, OKLCH, and CMYK in one place.

Tips for Better Color Authoring

  1. Anchor your palette to a single hue and shift lightness to build tints and shades.
  2. Keep saturation under 90% for UI backgrounds to avoid eye strain.
  3. Always verify your final HEX values against contrast standards before shipping.
  4. Store HSL as your source of truth and export HEX at build time for the cleanest design tokens.

Whether you're building a design system, refreshing a brand palette, or just need a fast, accurate HSL to HEX conversion, this converter gives you the values you need in one click.

Frequently Asked Questions