CSS Color Formats (Live Playground)
Colors are an essential aspect of web design, and CSS provides several color formats to represent them. In this tutorial, you will learn about different CSS color formats, including hexadecimal, RGB, RGBA, HSL, and HSLA, along with sample code and simple explanations.
Hexadecimal color format uses a combination of six characters (digits 0-9 and letters A-F) to represent colors. It begins with a hashtag (
#) followed by three pairs of characters, each representing
blue color channels.
RGB color format represents colors using the
blue channels with values ranging from 0 to 255.
background-color: rgb(255, 87, 51);
RGBA color format is similar to RGB but includes an additional
alpha channel to control the opacity of the color. The alpha channel value ranges from
0 (completely transparent) to
1 (completely opaque).
background-color: rgba(255, 87, 51, 0.5);
HSL color format represents colors using
lightness values. Hue ranges from 0 to 360, while saturation and lightness are percentage values ranging from 0% to 100%.
background-color: hsl(12, 100%, 60%);
HSLA color format is similar to HSL but includes an additional
alpha channel to control the opacity of the color, just like RGBA.
background-color: hsla(12, 100%, 60%, 0.5);
By understanding and using different CSS color formats, you can precisely control the colors of your web page elements, creating visually appealing designs and improving the overall user experience.