01
One color, two CSS notations
sRGB hex → hue, saturation and lightness. Hex #ff0000 has a red hue of 0°, full saturation and 50% lightness. The result is hsl(0 100% 50%).
Image ToolsFREE · NO SIGNUP
Hex to HSL Converter
Convert a 3- or 6-digit sRGB hex color to copyable HSL CSS. See hue, saturation and lightness without uploading an image.
FREE TO USEA LOOK ATLAS TOOL
01 USE IT NOW02 NO ACCOUNT03 FIELD NOTES BELOW
HSL CSS color
No result yet. Enter values or load the worked example.
sRGB hex → hue, saturation and lightness
26
ONE WORKED EXAMPLE
One color, two CSS notations
Hex #ff0000 has a red hue of 0°, full saturation and 50% lightness. The result is hsl(0 100% 50%).
WORKING VIEW
Input · #ff0000
#ff0000Output · hsl(0 100% 50%)
hsl(0 100% 50%)Same sRGB red · notation changes, color does not
THE FIELD NOTES
Quick answer above. Better decisions below.
Use the result now, then read the practical notes for assumptions, examples, limitations, and the choices behind it.
WORKED EXAMPLEhsl(0 100% 50%)
Hex #ff0000 has a red hue of 0°, full saturation and 50% lightness. The result is hsl(0 100% 50%).
02
Work through the example
Hex #ff0000 has a red hue of 0°, full saturation and 50% lightness. The result is hsl(0 100% 50%).
03
Continue the workflow
Use the image color picker to sample a hex value from your product image. Use the CMYK to RGB converter to convert percentage-based print-color values separately; CMYK conversion does not reproduce a press profile.
04
Know the limits
Only opaque 3- or 6-digit sRGB hex is accepted. Four- and eight-digit alpha colors are rejected. HSL values are displayed to at most four decimals; achromatic hue is reported as 0° by convention, not as a measured hue.
THE PRODUCT IS NEXT
Turn the product into the campaign.
Create premium ecommerce product imagery with Look Atlas after using the complete free tool.TRY YOUR FIRST SHOOT FREENO CREDIT CARD REQUIRED
One color, two CSS notations
sRGB hex → hue, saturation and lightness. Hex #ff0000 has a red hue of 0°, full saturation and 50% lightness. The result is hsl(0 100% 50%).
Work through the example
Hex #ff0000 has a red hue of 0°, full saturation and 50% lightness. The result is hsl(0 100% 50%).
Continue the workflow
Use the image color picker to sample a hex value from your product image. Use the CMYK to RGB converter to convert percentage-based print-color values separately; CMYK conversion does not reproduce a press profile.
Know the limits
Only opaque 3- or 6-digit sRGB hex is accepted. Four- and eight-digit alpha colors are rejected. HSL values are displayed to at most four decimals; achromatic hue is reported as 0° by convention, not as a measured hue.
Questions, answered.
What does this tool produce?
Convert a 3- or 6-digit sRGB hex color to copyable HSL CSS. See hue, saturation and lightness without uploading an image.
Which inputs and limits matter?
Only opaque 3- or 6-digit sRGB hex is accepted. Four- and eight-digit alpha colors are rejected. HSL values are displayed to at most four decimals; achromatic hue is reported as 0° by convention, not as a measured hue.
Does my input leave this browser?
No. The tool processes your input locally and excludes it from analytics. Copy the result before closing or refreshing this page.
BUILT BY LOOK ATLAS
Your product deserves more than a marketplace thumbnail.
Turn a simple product photo into polished, campaign-ready creative for your store, ads, and social channels. No studio. No reshoots.
Create your first shoot free, then keep going when you’re ready.
01 PRODUCT PHOTO → CAMPAIGN