No Login Data Private Local Save

HEX to HSL Converter - Online Color Code to Hue Saturation Lightness

Color Tool Converter color converter HEX HSL
48
0
0
0
#536DFE HSL(231°, 99%, 65%)

🎨 Preset Colors

#
Enter a 3 or 6 digit hex code (e.g., #abc or #aabbcc)
Hue 231°
0–360
Saturation 99%
0–100
Lightness 65%
0–100
HEX: #536DFE HSL: hsl(231, 99%, 65%)
RGB: rgb(83, 109, 254)

📋 CSS Usage

color: #536DFE; /* Fallback */
color: hsl(231, 99%, 65%);
📖 Frequently Asked Questions
What is a HEX color code?
A HEX color code is a 6-digit hexadecimal representation of a color, prefixed with #. Each pair of characters represents the intensity of Red, Green, and Blue (0–255). For example, #FF0000 is pure red. Shorthand 3-digit codes like #F00 are also valid and expand to #FF0000.
What does HSL stand for?
HSL stands for Hue, Saturation, and Lightness. Hue is the color wheel angle (0–360°), Saturation is the intensity/vividness (0–100%), and Lightness is the brightness (0–100%). HSL is often considered more intuitive than HEX or RGB for designing color schemes.
How do I convert HEX to HSL manually?
First, convert HEX to RGB by splitting the hex string into three pairs and converting each from base-16 to decimal (0–255). Then normalize RGB to 0–1 range. Find the max and min values, calculate Lightness as (max+min)/2, and Saturation based on the difference. Hue is calculated from the relative positions of R, G, and B. Our tool does all of this instantly!
What is the range of HSL values?
Hue ranges from 0° to 360° (like a color wheel where 0=red, 120=green, 240=blue). Saturation ranges from 0% (gray/desaturated) to 100% (fully vivid). Lightness ranges from 0% (black) to 100% (white), with 50% being the pure hue.
Can I use HSL colors in CSS?
Absolutely! CSS supports HSL natively with the hsl() function. For example: color: hsl(231, 99%, 65%);. Modern CSS also supports hsl() with alpha transparency via hsla() or the newer hsl(h s l / a) syntax. All modern browsers support HSL in CSS.
Why should I use HSL over HEX?
HSL is more human-readable and intuitive. It's easier to adjust lightness to create tints/shades, tweak saturation for muted or vibrant variants, and rotate hue for complementary or analogous color schemes. Designers often prefer HSL when building design systems and color palettes.
What are common use cases for HEX to HSL conversion?
Common scenarios include: creating CSS custom properties with HSL for dynamic theming, generating color palettes with systematic lightness adjustments, building accessible color systems (adjusting lightness for contrast), and converting brand colors from HEX to HSL for more flexible styling in design tools and code.
Is there a difference between HSL and HSB/HSV?
Yes! While both use Hue, HSL measures Lightness (white to black through the middle), while HSB/HSV measures Brightness/Value. In HSL, 100% lightness is always white and 0% is always black. In HSB, 100% brightness gives the pure hue. They serve different purposes—HSL is more common in CSS and web design.
🔧 Related Tools