Result (HEX)
#6467F2
Lowercase#6467f2
hex#6467F2
rgbrgb(100, 103, 242)
hslhsl(239, 84%, 67%)
hsvhsv(239, 59%, 95%)
cmykcmyk(59%, 58%, 0%, 5%)
oklchoklch(58.86% 0.2039 277.18)
How this conversion is calculated
- C = (1 - |2L - 1|) x S, the chroma. X = C x (1 - |(H / 60) mod 2 - 1|). m = L - C / 2.
- Pick (R, G, B) from C, X and 0 by the 60 degree sector of the hue, then add m and multiply by 255.
- Here that gives rgb(100, 103, 242).
- Red 100 = 6 x 16 + 4, so 64. Green 103 = 6 x 16 + 7, so 67. Blue 242 = 15 x 16 + 2, so F2.
- Join them after a #: #6467F2.
Code snippets
CSS
color: #6467F2;CSS variable
--brand: #6467F2;SCSS
$brand: #6467F2;Swift (UIKit)
UIColor(red: 0.392, green: 0.404, blue: 0.949, alpha: 1)SwiftUI
Color(red: 0.392, green: 0.404, blue: 0.949, opacity: 1)Android XML
<color name="brand">#6467F2</color>Kotlin / Jetpack Compose
Color(0xFF6467F2)Java (Android)
Color.argb(255, 100, 103, 242)Flutter
Color(0xFF6467F2)Unity C#
new Color32(100, 103, 242, 255).NET C#
Color.FromArgb(255, 100, 103, 242)Python tuple
(100, 103, 242)Convert a list
Paste up to 1,000 values, one per line. Each line is converted to HEX.
More color formats (HWB, LAB, LCH, OKLab, XYZ and more)
RGB %rgb(39.2%, 40.4%, 94.9%)
HWBhwb(239 39.2% 5.1%)
OKLaboklab(58.86% 0.0255 -0.2023)
CIE LABlab(50.47% 38.58 -70.44)
CIE LCHlch(50.47% 80.31 298.71)
CIE LUV50.47, -8.9, -111.35
CIE XYZ26.128, 18.819, 86.243
CIE xyY0.1992, 0.1434, 18.819
Decimal6580210
Binary01100100 01100111 11110010
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
Enter the HSL values
Type or paste into Input (HSL), for example hsl(152, 60%, 40%) or 152 60 40. You can also move the Hue, Saturation and Lightness sliders or type into their number boxes.
02
Check the swatch and hex
The preview swatch and Result (HEX) update as you change a value. If saturation or lightness is outside 0 to 100%, a message explains what to fix.
03
Copy the hex code
Press Copy on the result or on the Lowercase variant. For hsla() input, HEX without alpha gives the 6 digit version too. Use Switch to HEX to HSL for the reverse.
Why HSL to HEX Converter
- Hue, saturation and lightness sliders with number fields.
- Reads comma, modern space and bare number input.
- hsla() input returns an 8 digit hex with alpha.
- Bulk list mode, worked math and code snippets.
HSL to hex formula with a worked example
Take hsl(152, 60%, 40%). Write S = 0.6 and L = 0.4. The chroma is C = (1 - |2 x 0.4 - 1|) x 0.6 = 0.8 x 0.6 = 0.48. Next, X = C x (1 - |(152 / 60) mod 2 - 1|) = 0.48 x 0.533 = 0.256, and m = L - C / 2 = 0.16.
Hue 152 falls in the 120 to 180 band, where green is largest, so (R, G, B) = (0, C, X) = (0, 0.48, 0.256). Add m to each and multiply by 255: R = 0.16 x 255 = 41, G = 0.64 x 255 = 163 and B = 0.416 x 255 = 106. In hex that is 29, A3 and 6A, so the answer is #29A36A.
| HSL | HEX |
|---|---|
| hsl(0, 100%, 50%) | #FF0000 |
| hsl(30, 100%, 50%) | #FF8000 |
| hsl(60, 100%, 50%) | #FFFF00 |
| hsl(120, 100%, 25%) | #008000 |
| hsl(180, 100%, 50%) | #00FFFF |
| hsl(210, 100%, 50%) | #0080FF |
| hsl(240, 100%, 50%) | #0000FF |
| hsl(270, 100%, 50%) | #8000FF |
| hsl(0, 0%, 50%) | #808080 |
| hsl(152, 60%, 40%) | #29A36A |
Common questions
What hex code does hsl(152, 60%, 40%) give?
It gives #29A36A, which is rgb(41, 163, 106), a medium green. Try it by pasting the value or by setting Hue to 152, Saturation to 60 and Lightness to 40.
How do I convert HSL to hex by hand?
First convert HSL to RGB, then each RGB value to a two digit hex pair. The HSL to RGB step uses the chroma, C = (1 - |2L - 1|) x S, and the hue to decide which channel gets the most color. The worked example below shows every step for hsl(152, 60%, 40%).
Can I paste modern hsl() syntax without commas?
Yes. hsl(152 60% 40%), hsl(152deg 60% 40%) and hsl(152 60% 40% / 0.5) all work, as do bare numbers like 152, 60, 40. Values are read as hue in degrees and saturation and lightness in percent.
How do I convert HSLA to an 8 digit hex?
Paste the hsla() value and the converter adds the alpha as the last hex pair. hsla(152, 60%, 40%, 0.4) gives #29A36A66, because 0.4 x 255 rounds to 102, which is 66 in hex.
Why doesn't my HSL round-trip back to the exact same hex?
HSL values are rounded to whole degrees and percentages. A hex code converted to HSL and back can move by one step in a channel. For exact colors, store the hex and use HSL for adjustments.
What happens if the hue is above 360 in HSL to HEX?
Hue wraps around the color wheel, so 400 is treated as 40 and -30 as 330. Saturation and lightness do not wrap: values below 0% or above 100% show an error.
Does lightness 0% or 100% always give black or white?
Yes. At 0% lightness any hue and saturation give #000000, and at 100% they give #FFFFFF. The most vivid version of a hue sits at 50% lightness and 100% saturation.
Why use HSL instead of hex when designing colors?
HSL lets you change one property at a time. Lower lightness for a darker shade, lower saturation for a muted tone, or shift hue for a related color, then convert the result back to hex here.
Can I convert many HSL values to hex in one go?
Yes. Paste them into Convert a list, one per line, in any form the main box accepts, such as hsl(152, 60%, 40%) or 152, 60, 40. You get a hex code per line and can copy them all or download a CSV.