Skip to content
FileTinker

HSL to HEX converter

Enter a HSL colour and FileTinker converts it to HEX in real time, alongside the other formats. Every value is editable and ready to use in CSS or a design tool. It all runs in your browser.

More presets

Jump to another preset — each opens its own page ready to go:

How to convert HSL to HEX

  1. Enter your HSL value in its field, or pick a color with the swatch.
  2. Read the HEX value as it updates instantly.
  3. Copy it — ready to use in CSS or your design tool.

About converting HSL to HEX

HSL and HEX describe the same on-screen color in different notations, and converting between them is everyday work in web and graphic design. This page focuses on HSL to HEX, but shows HEX, RGB and HSL together so you always have every format to hand.

Everything runs in your browser, so it's instant and private — no upload, no sign-up. Edit any field and the others update, including the live preview and the native color picker.

Frequently asked questions

How do I convert HSL to HEX?

Type or paste your HSL value (or pick a color with the swatch) and read the HEX value straight off — it updates instantly. Copy it with one click.

Are the values CSS-ready?

The HEX value sits alongside HEX, RGB, HSL and HSV — copy whichever you need. HEX, RGB and HSL paste straight into CSS; HSV (HSB) is a design-tool notation rather than a CSS function.

Can I convert the other way?

Yes. Every field is editable, so you can go from HEX back to HSL too, or to any other format — they all stay in sync.

Is anything uploaded?

No. All the conversion runs in your browser; nothing is sent anywhere.