PhotoRetrica

HEX to HSL

Free online photo editor & creative toolkit

Files never leave your device100% free
#FF3D72

hex input

Result · HSL

hsl(344, 100%, 62%)

HEX

#FF3D72

RGB

rgb(255, 61, 114)

HSV

hsv(344, 76%, 100%)

CMYK

cmyk(0%, 76%, 55%, 0%)

How to use: HEX to HSL

  1. 1

    Enter a color

    Type a color code or choose a color with the picker — every field accepts the format it shows.

  2. 2

    See it converted

    The result updates instantly as you type, together with a live preview of the color.

  3. 3

    Copy the code

    Copy the value you need with one click and paste it into your design, CSS or print settings.

HEX and HSL colors

HEX is how colors are written in CSS and design tools: a # followed by three pairs of hexadecimal digits for red, green and blue. HSL describes the same color the way people think about it — hue as an angle on the color wheel from 0 to 360°, saturation and lightness in percent.

Converting to HSL is handy when you need variations of one color: keep the hue and change the lightness to get lighter and darker shades for hover states, backgrounds and borders. Browsers understand both notations, for example hsl(342, 100%, 62%).

Everything runs locally in your browser — your images are never uploaded to a server.