# EFBF04

### Convert HEX to HSL

Format

HEX

Hex code

#

Reset

HSL

hsl(48 97% 48%)

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.

## How to convert hex to HSL

The conversion happens in two steps: hex → RGB → HSL. First, decode the hex code to RGB as described above. Then, normalize R, G, B to the 0–1 range and find the min and max. Lightness = (max+min)/2. If max=min, saturation=0 and hue=0 (achromatic). Otherwise, saturation depends on lightness, and hue is calculated from which channel is dominant: if red is max, hue = (G−B)/(max−min); if green, hue = 2+(B−R)/(max−min); if blue, hue = 4+(R−G)/(max−min). The result is scaled to 0–360° for hue and 0–100% for S and L.

## When to use hex vs HSL

HSL is the best format for programmatic color manipulation. If you need to create a lighter version of a brand color for a background, just increase the L value. Need a muted variant? Reduce S. Hex is more common in handoff documents and brand guidelines. Use hex for static specifications; reach for HSL when building design systems, theming, or generating color scales in code.

## Worked example

Convert #E74C3C to HSL: First, RGB = (231, 76, 60). Normalize: R=0.906, G=0.298, B=0.235. Max=0.906 (R), min=0.235 (B). L = (0.906+0.235)/2 = 0.571 → 57%. S = (0.906−0.235)/(1−|2×0.571−1|) = 0.671/0.858 = 0.782 → 78%. Hue = (0.298−0.235)/(0.906−0.235) × 60 = 5.6°. Result: HSL(6, 78%, 57%) — a vivid tomato red.

## HSL in CSS

Modern CSS supports HSL natively via the hsl() function: hsl(6 78% 57%). This makes it easy to define color palettes directly in stylesheets. Many CSS-in-JS libraries and design token systems also prefer HSL because adjusting lightness and saturation is more predictable than tweaking individual RGB channels.

## Frequently asked questions

### What is HSL?

HSL stands for Hue (0–360°, the color wheel position), Saturation (0–100%, how vivid the color is), and Lightness (0–100%, how light or dark). It is designed to be more intuitive for humans than RGB.

### When should I use HSL instead of hex?

HSL is useful when you need to create color variations — making a color lighter, darker, or less saturated is as simple as adjusting one number. It is also used in CSS with the hsl() function.

### How do I convert hex to HSL?

The hex code is first converted to RGB, then RGB is converted to HSL using a mathematical formula that calculates hue from the dominant color channel, saturation from the range of channels, and lightness from their average.