CSS Color Conversions
CSS
Change RGB value and find the equivalent HEX or HSL color code.
Select and convert your color code in RGB | HEX | HSL
Convert HEX to RGB | HSL color code.
rgb(, , )
#
hsl(, %, %)
Convert RGB to HEX | HSL color code.
rgb(, , )
#
hsl(, %, %)
Convert HSL to RGB | HEX color code.
rgb(, , )
#
hsl(, %, %)
CSS 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.
CSS 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.
CSS 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
<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>Click on the "See output" button to see how it works.
Shades of gray color
Gray color is the color where Red, Green and Blue value for #RRGGBB are equal.