DevTilt

HSL to HEX Converter

Translate CSS hsl() into a hex color code for design tools and stylesheets that prefer #RRGGBB.

Result

Enter HSL values to get a hex code.

How to convert HSL to HEX

  1. Paste hsl() or comma-separated H, S%, L%.
  2. Hex output updates live.
  3. Copy #RRGGBB.
  4. Negative hue wraps modulo 360°.

What is HSL to HEX Converter?

When you've tuned a color in HSL space — shifting hue for a chart series or adjusting lightness for a hover state — you often need the hex code for a design tool, SVG attribute, or legacy system that doesn't accept hsl(). Enter HSL values to get the precise hex.

Why use DevTilt's HSL to HEX Converter?

  • Accepts H (0–360), S and L (0–100%)
  • Outputs #RRGGBB hex with live preview
  • Copy hex for design tools and SVG
  • Handles full hue spectrum including achromatic colors

Common use cases

  • Exporting HSL-tuned theme colors back to hex for Figma
  • Generating hex values from an HSL color scale algorithm
  • Converting CSS hsl() custom properties to hex for an SVG export
  • Producing hex codes from HSL inputs in a color picker prototype

FAQ

Uppercase #RRGGBB without alpha unless you include alpha in HSL.
Yes. Negative hue normalizes by wrapping modulo 360°.
No. Pure TypeScript math in the browser.
Design tokens may store OKLCH, LAB, or rounded HSL intermediates. This tool converts your pasted hsl() directly — small differences can appear at extreme saturation.
Comma-separated hue, saturation, and lightness values work when entered in the tool's input fields. Full hsl(210, 50%, 40%) syntax is also accepted.