ColorFlowTools

HSL to HEX Converter

Convert HSL and HSLA values into a HEX color code. Enter a full hsl() string or individual hue, saturation, and lightness values, and get the matching HEX immediately; when an alpha value is present, you also get an 8-digit HEX. This is the natural companion to designing in HSL: adjust lightness and saturation where it is intuitive, then convert to HEX for use in most stylesheets and design tools. The converter normalizes hue values, so an angle like 400 or a negative angle is handled correctly, and it validates input with clear messages. You also see the RGB equivalent and nearest color name, and every value copies with a single click.

FormatValue

How to use the HSL to HEX Converter

  1. Enter HSL values. Type an hsl() or hsla() string, or enter hue, saturation, and lightness.
  2. Read the HEX output. See the 6-digit HEX, plus an 8-digit HEX when alpha is present.
  3. Copy the code. Click copy to use the HEX value in your project.

Examples

  • Standard HSL: hsl(204, 70%, 53%) converts to about #3498db.
  • Wrapped hue: hsl(400, 100%, 50%) is normalized to hsl(40, 100%, 50%) before conversion.

How it works

HSL to HEX first converts to RGB by mapping the hue angle to a base color and applying saturation and lightness, then encodes each channel as base-16. Hue is normalized into 0–360 first, so out-of-range angles convert correctly rather than producing an error.

Common use cases

  • Finalizing a color chosen in HSL for use as a HEX
  • Converting generated HSL scales into HEX tokens
  • Turning a hue rotation into a concrete HEX value

Privacy

All color calculations run in your browser. Nothing you enter is sent to a server. Saved palettes and recent colors are kept only in your browser’s local storage and can be cleared at any time.

Frequently asked questions

Can I enter hue over 360?

Yes. Hue is normalized, so 400 becomes 40 and negative angles wrap around correctly.

Does it keep alpha?

Yes. An hsla() input produces an 8-digit HEX that preserves the alpha channel.

Why might the HEX differ slightly from another tool?

Different tools round intermediate values differently. Any difference is at most a unit per channel and is not visible.

What if saturation or lightness is over 100%?

Values are clamped to their valid 0–100 range, and the input is flagged so you can correct it.

HEX to HSL Converter Convert a HEX color to HSL and HSLA so you can reason about hue and lightness. RGB to HEX Converter Convert RGB or RGBA values to a HEX color code, with 8-digit alpha output. Color Format Converter Auto-detect any color input and convert it to HEX, RGB, HSL, HSV, HWB, and CMYK. Color Picker Pick a color and read its HEX, RGB, HSL, HSV, and CMYK values with alpha support. Tint and Shade Generator Generate tints and shades of a color as a scale, with WCAG text hints and export.