HSL to Hex Converter
Convert HSL color values to hex codes for use in CSS, design tools, and brand guidelines. Enter hue (0–360), saturation (0–100%), and lightness (0–100%) to get the equivalent hex code.
Convert HSL to HEX
#EFBF04
Also available in
| Code | Value | HTML/CSS | |
|---|---|---|---|
| RGB | 239, 191, 4 | rgb(239 191 4) | |
| HSV | 48, 98, 94 | — | |
| CMYK | 0, 20, 98, 6 | — | |
| OKLCH | 0.82, 0.17, 90 | oklch(0.82 0.17 90) |
CMYK values are approximate. For production printing, use ICC profile-based conversion in your design software.
Use this color in Moda
Apply exact brand colors to slides, social posts, and other designs — all on a real canvas you control.
Try Moda free →How to convert HSL to hex
First, HSL is converted to RGB. If saturation is 0, the color is a shade of gray and R=G=B=L×255. Otherwise, calculate two intermediate values based on lightness and saturation, then compute R, G, and B using a helper function that maps hue to the correct channel intensity. Finally, each RGB value (0–255) is encoded as a two-digit hex string and concatenated to form the six-character hex code.
When to use HSL vs hex
HSL is excellent for working with color in code — design systems, theme generators, and CSS custom properties often define colors in HSL because it is trivial to create variants (lighter, darker, desaturated) by adjusting a single number. However, brand guidelines, Figma specs, and many APIs expect hex. This tool bridges the gap when you have built a color in HSL and need to export it as hex.
Worked example
Convert HSL(210, 80%, 50%) to hex: This is a vivid blue with high saturation at mid lightness. The algorithm calculates RGB as approximately (25, 118, 230). Each channel converts to hex: 19, 76, E6. Result: #1976E6 — a bright, saturated blue commonly used for primary action buttons.
HSL in design handoffs
While HSL is great for building and tweaking colors, most design handoff documents use hex because it is universally understood by developers and designers. When sharing color values with collaborators or documenting a brand palette, convert from HSL to hex for maximum compatibility.
Frequently asked questions
How do I convert HSL to hex?
HSL values are first converted to RGB using a mathematical formula, then the RGB values are encoded as a six-digit hexadecimal string. This tool handles both steps automatically.
Can I use HSL directly in CSS?
Yes. Modern CSS supports hsl() natively, e.g. hsl(210, 100%, 50%). However, many design tools and brand guidelines still require hex codes, which is where this converter helps.
What HSL values produce pure white and pure black?
Pure white is HSL(0, 0%, 100%) → #FFFFFF. Pure black is HSL(0, 0%, 0%) → #000000. The hue value does not matter when lightness is 0% or 100%.