HSL转HEX转换器

Convert HSL color values to HEX format.

Instant Private 100% Free CSS Ready

HSL → HEX

Paste your value below and get instant results

HSL值

HSL	HEX	Description
`hsl(0, 100%, 50%)`	`#ff0000`	Pure Red
`hsl(120, 100%, 50%)`	`#00ff00`	Pure Green
`hsl(240, 100%, 50%)`	`#0000ff`	Pure Blue
`hsl(60, 100%, 50%)`	`#ffff00`	Yellow
`hsl(300, 100%, 50%)`	`#ff00ff`	Magenta
`hsl(0, 0%, 50%)`	`#808080`	50% Gray

How It Works

Convert in 3 simple steps

Paste Your Value

Enter your HSL value in the input field or use the color picker.

Instant Conversion

Click convert or just type — the result appears instantly with live preview.

Copy & Use

Copy the result or CSS variable with one click. Share via URL.

Why Developers Love This Tool

Instant Results

Real-time conversion as you type. No waiting, no page reloads.

100% Client-Side

All processing happens in your browser. No data is sent to any server.

CSS Variable Output

Get copy-ready CSS custom property syntax alongside raw values.

Shareable URLs

Generate pre-filled links to share specific conversions with your team.

什么是HSL到HEX的转换？

将<strong>HSL</strong>转换为<strong>HEX</strong>是常见任务。Convert HSL color values to HEX format.

转换原理

转换器即时应用公式。

常见用例

开发者经常需要将HSL转换为HEX。

Common HSL to HEX Examples

hsl(0, 100%, 50%) → Pure Red
hsl(120, 100%, 25%) → Dark Green
hsl(240, 100%, 50%) → Blue

Why Use This Converter?

Instant results — paste a value and get the converted output immediately.
Copy-ready CSS — one-click copy with properly formatted syntax.
Live color preview — see a swatch of the converted color to visually confirm accuracy.
Shareable URLs — pre-fill values via URL for easy team sharing.
No installation — works in any browser, on any device.

FAQ

转换器的精度如何？

使用数学精确的算法。

免费吗？

是的，完全免费。

可以分享结果吗？

可以，使用分享链接按钮。

转换器