View video tutorial

HTML Color Conversions

HTML

❮ Prev Next ❯

Change RGB value and find the equivalent HEX or HSL color code.

Select and convert your color code in RGB | HEX | HSL

Color 1

Color 2

Convert HEX to RGB | HSL color code.

rgb(, , )

hsl(, %, %)

Change HEX value and find the equivalent RGB or HSL color code.

Convert RGB to HEX | HSL color code.

rgb(, , )

hsl(, %, %)

Change RGB value and find the equivalent HEX or HSL color code.

Convert HSL to RGB | HEX color code.

rgb(, , )

hsl(, %, %)

Hue:

Sat: %

Lit: %

Change HSL value and find the equivalent RGB or HEX color code.

HTML RGB Colors

➔ In RGB colors there are three basic red,green,blue color combination together to make new color.

➔ Each color range from minimum 0 to maximum 255 value.

➔ rgb(red, green, blue) method is used with color as a parameter value.

➔ rgba(red, green, blue, alpha) method is used with color as a parameter value and alpha is the opacity of the new color.

HTML HEX Colors

➔ In HEX colors red,green,blue color are given in hexadecimal number.

➔ Each color range from minimum 00 to maximum FF value.

➔ #RRGGBBis used where RR, GG, BB are the color value in hexadecimal number.

➔ #RRGGBBAAis used where RR, GG, BB are the color value in hexadecimal number and AA is the opacity 00 is low opacity FF is the highest opacity.

HTML HSL Colors

➔ In HSL colors Hue,Saturation,Lightness values are given in decimal number.

➔ Hue is a color range from minimum 0 to maximum 360 value. where 0 is red, 120 is green and 240 is blue color.

➔ Saturation is the percentage value of colorfulness 0% means no color at all and 100% means full color of its value.

➔ Lightness is the percentage value of light 0% means no light(black) and 100% means full light(white).

➔ hsl(hue, saturation, lightness)is used where hue, saturation, lightness are the corresponding value of the parameter.

➔ hsl(hue, saturation, lightness, alpha)is used where hue, saturation, lightness are the corresponding value of the parameter, and alpha is value of opacity from a range of 0 to 1

hsl(0, 100%, 50%)

rgb(255,0,0)

#FF0000

hsl(147, 50%, 47%)

rgb(60,180,114)

#3CB472

hsl(39, 100%, 50%)

rgb(255,166,0)

#FFA600

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML RGB HEX HSL Color Conversion Example</title>
</head>
<body>
    <h2>HTML RGB HEX HSL Color Conversion Example</h2>
    <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
    <h2 style="background-color:rgb(255,0,0);">rgb(255,0,0)</h2>
    <h2 style="background-color:#FF0000;">#FF0000</h2>
    <h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
    <h2 style="background-color:rgb(60,180,114);">rgb(60,180,114)</h2>
    <h2 style="background-color:#3CB472;">#3CB472</h2>
    <h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
    <h2 style="background-color:rgb(255,166,0);">rgb(255,166,0)</h2>
    <h2 style="background-color:#FFA600;">#FFA600</h2>
</body>
</html>