Home » Online Tools » The Best Free HSL to RGB Color Converter For You!

Enter Your HSL Color

Enter Hue (H)deg
Enter Saturation (S)%
Enter Lightness (L)%

Converted Color Output


HSL to RGB Color Converter is used to convert HSL color into RGB color for free, without installing any software on your device.

Now let’s see how to use:

  1. In HSL color format it has 3parts
    1. the first part of Hue
    2. the Second part for Saturation
    3. and the Last Part For Lightness.
  2. Enter your value in a specific input field given screen shoot below.HSL to RGB
  3. Now look at the output part there are two parts, the first one is for Color Preview according to your color code and the next part marked by red color is for output.HSL to RGB Color Converter
  4. Copy the color code from the RGB field This is your converted color code.

About HSL Color Formate:

The full form of HSL is H: hue, S: saturation, and lightness. Here Hue is the degree on the color wheel between (0-360), in the color wheel 0deg or 360deg is for red color, 120deg for green, and 240deg is for blue color. Saturation is the value between 0% to 100%; 0% means a shade of gray and 100% is the full color.


Syntex of an HSL color in CSS is:

hsl(hue, saturation, lightness)

Some Examples of HSL Colors:

  1. hsl(0, 100%, 80%)       = red color
  2. hsl(360, 100%, 80%)  = red color
  3. hsl(120, 100%, 25%)   = dark green color
  4. hsl(120, 60%, 70%)     = pastel green color

About RGB Color:

The full form of RGB is Red, Green, and Blue.

And the min value of RGB color is 0 and the max value is 255. In CSS RGB Color is specified with the rgb() function, and the syntax is:

rgba(red, green, blue)

Some Examples of RGB Colors:

  1. rgb(255, 0, 0) = red color
  2. rgb(0, 255, 0) = green color
  3. rgb(0, 0, 255) = blue color

There is another color format name RGBA this color format is the extended version of RGB color format with an alpha channel – which specifies the opacity of the object, and the syntax of this color format is:

rgba(red, green, blue, alpha)

The alpha parameter’s min value is 0 which means fully transparent and the max is 1 which means fully opaque you can use any number between 0 and 1, for example, 0.3.

Create Beautiful colors using our Color generator:

Color Palette Generator.

Flat UI Colors Library.

Gradient Colors Library.

Leave a Reply

Your email address will not be published. Required fields are marked *

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock