Result (HSL)
hsl(239, 84%, 67%)
Decimal places
Modern CSShsl(239 84% 67%)
Numbers only239, 84%, 67%
hslhsl(239, 84%, 67%)
hex#6366F1
rgbrgb(99, 102, 241)
hsvhsv(239, 59%, 95%)
cmykcmyk(59%, 58%, 0%, 5%)
oklchoklch(58.54% 0.2041 277.12)
How this conversion is calculated
- Split the hex code into pairs: 63 66 F1.
- Convert each pair from base 16: 63 = 6 x 16 + 3 = 99.
- 66 = 6 x 16 + 6 = 102. F1 = 15 x 16 + 1 = 241.
- Scale RGB to 0 to 1: R 0.388, G 0.4, B 0.945.
- Max 0.945, min 0.388. Lightness L = (max + min) / 2 = 66.7%.
- Saturation S = (max - min) / (1 - |2L - 1|) = 83.5%.
- Hue comes from which channel is largest: H = 238.7 degrees.
- Result: hsl(239, 84%, 67%).
Code snippets
CSS
color: #6366F1;CSS variable
--brand: #6366F1;SCSS
$brand: #6366F1;Swift (UIKit)
UIColor(red: 0.388, green: 0.4, blue: 0.945, alpha: 1)SwiftUI
Color(red: 0.388, green: 0.4, blue: 0.945, opacity: 1)Android XML
<color name="brand">#6366F1</color>Kotlin / Jetpack Compose
Color(0xFF6366F1)Java (Android)
Color.argb(255, 99, 102, 241)Flutter
Color(0xFF6366F1)Unity C#
new Color32(99, 102, 241, 255).NET C#
Color.FromArgb(255, 99, 102, 241)Python tuple
(99, 102, 241)Convert a list
Paste up to 1,000 values, one per line. Each line is converted to HSL.
More color formats (HWB, LAB, LCH, OKLab, XYZ and more)
RGB %rgb(38.8%, 40%, 94.5%)
HWBhwb(239 38.8% 5.5%)
OKLaboklab(58.54% 0.0253 -0.2025)
CIE LABlab(50.1% 38.69 -70.49)
CIE LCHlch(50.1% 80.4 298.76)
CIE LUV50.1, -8.88, -111.2
CIE XYZ25.769, 18.504, 85.416
CIE xyY0.1987, 0.1427, 18.504
Decimal6514417
Binary01100011 01100110 11110001
Nearest web safe#6666FF
Common colors reference table
Click a name to load it into the converter.
| Color | HEX | HSL | RGB |
|---|---|---|---|
| #000000 | hsl(0, 0%, 0%) | rgb(0, 0, 0) | |
| #FFFFFF | hsl(0, 0%, 100%) | rgb(255, 255, 255) | |
| #FF0000 | hsl(0, 100%, 50%) | rgb(255, 0, 0) | |
| #00FF00 | hsl(120, 100%, 50%) | rgb(0, 255, 0) | |
| #0000FF | hsl(240, 100%, 50%) | rgb(0, 0, 255) | |
| #FFFF00 | hsl(60, 100%, 50%) | rgb(255, 255, 0) | |
| #00FFFF | hsl(180, 100%, 50%) | rgb(0, 255, 255) | |
| #FF00FF | hsl(300, 100%, 50%) | rgb(255, 0, 255) | |
| #C0C0C0 | hsl(0, 0%, 75%) | rgb(192, 192, 192) | |
| #808080 | hsl(0, 0%, 50%) | rgb(128, 128, 128) | |
| #800000 | hsl(0, 100%, 25%) | rgb(128, 0, 0) | |
| #808000 | hsl(60, 100%, 25%) | rgb(128, 128, 0) | |
| #008000 | hsl(120, 100%, 25%) | rgb(0, 128, 0) | |
| #800080 | hsl(300, 100%, 25%) | rgb(128, 0, 128) | |
| #008080 | hsl(180, 100%, 25%) | rgb(0, 128, 128) | |
| #000080 | hsl(240, 100%, 25%) | rgb(0, 0, 128) | |
| #FFA500 | hsl(39, 100%, 50%) | rgb(255, 165, 0) | |
| #FF6347 | hsl(9, 100%, 64%) | rgb(255, 99, 71) | |
| #FFD700 | hsl(51, 100%, 50%) | rgb(255, 215, 0) | |
| #4B0082 | hsl(275, 100%, 25%) | rgb(75, 0, 130) |
How to use
01
Paste or pick a hex code
Enter a code such as #6366F1 in Input (HEX), or use the color picker. 3, 4, 6 and 8 digit codes work, and the # is optional.
02
Read the HSL result
Result (HSL) shows the comma form, with Modern CSS and Numbers only variants below it. An 8 digit hex returns hsla() and a slash alpha in the modern form.
03
Copy it into your CSS
Press Copy on the form your codebase uses. Numbers only gives 239, 84%, 67% for custom properties. Switch to HSL to HEX to go the other way.
Why HEX to HSL Converter
- HSL in both comma and modern space syntax.
- Keeps alpha from 8 digit hex as hsla().
- Choose 0, 1 or 2 decimal places.
- Bulk list mode and step by step math.
Hex to HSL formula with a worked example
Start with #6366F1, which is rgb(99, 102, 241). Divide by 255 to get R = 0.388, G = 0.400 and B = 0.945. The largest value is 0.945 and the smallest 0.388, a difference of 0.557.
Lightness is the average of the largest and smallest: (0.945 + 0.388) / 2 = 0.667, or 67%. Saturation is the difference divided by 1 minus the absolute value of (2 x L - 1): 0.557 / (1 - 0.333) = 0.835, or 84%. Because blue is the largest channel, hue is 60 x ((R - G) / difference + 4) = 60 x 3.979 = 239 degrees. The result is hsl(239, 84%, 67%).
| Color | HEX | HSL |
|---|---|---|
| Red | #FF0000 | hsl(0, 100%, 50%) |
| Orange | #FFA500 | hsl(39, 100%, 50%) |
| Yellow | #FFFF00 | hsl(60, 100%, 50%) |
| Green | #008000 | hsl(120, 100%, 25%) |
| Blue | #0000FF | hsl(240, 100%, 50%) |
| Purple | #800080 | hsl(300, 100%, 25%) |
| Gray | #808080 | hsl(0, 0%, 50%) |
| White | #FFFFFF | hsl(0, 0%, 100%) |
Common questions
How do I convert hex to HSL by hand?
Convert the hex to RGB, divide each channel by 255, and find the largest and smallest values. Lightness is their average. Saturation and hue come from the difference between them, with hue depending on which channel is largest. The worked example on this page walks through #6366F1.
What HSL value does #6366F1 give?
#6366F1 converts to hsl(239, 84%, 67%). The hue of 239 degrees puts it just short of pure blue at 240, the saturation is high, and the lightness is a little above the midpoint.
What is the difference between hsl(239, 84%, 67%) and hsl(239 84% 67%)?
Nothing in the color. The comma form is the older CSS syntax and the space form is the newer CSS Color 4 syntax, where alpha is written after a slash. All current browsers support both.
How do I convert an 8 digit hex to hsla()?
Paste it into the converter. The last two digits become the alpha, so #6366F180 gives hsla(239, 84%, 67%, 0.5) and hsl(239 84% 67% / 0.5) in modern syntax.
Does converting hex to HSL round the values?
Yes. Hue is rounded to whole degrees and saturation and lightness to whole percentages. Converting the rounded HSL back can land one step away from the original hex, so keep the hex as your source of truth.
Why is hue measured in degrees in HSL?
Hue is a position on the color wheel: 0 is red, 120 green and 240 blue, and 360 wraps back to red. Degrees make it easy to find related colors, such as adding 180 for the complement.
Why does my gray hex code show 0% saturation?
Grays have equal red, green and blue, so they have no hue or saturation. The converter shows hue 0 and saturation 0% for them, and only lightness changes between light and dark grays.
How do I make a hover color from the HSL value?
Keep hue and saturation and lower lightness by 5 to 10 points. hsl(239, 84%, 67%) becomes hsl(239, 84%, 60%) for a darker hover state. If you keep hue, saturation and lightness in separate CSS variables, calc() on the lightness variable does this for you.
Can I get HSL values with decimals instead of whole numbers?
Yes. Under the result, set Decimal places to 1 or 2. Whole numbers are fine for most CSS, but decimals let an HSL value convert back to the exact same hex, which matters for design tokens.