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

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 red, green, and blue color channels.

Example:

CSS

body {
  background-color: #ff5733;
}

Live Playground, Try it Yourself

RGB

RGB color format represents colors using the red, green, and blue channels with values ranging from 0 to 255.

Example:

CSS

body {
  background-color: rgb(255, 87, 51);
}

Live Playground, Try it Yourself

RGBA

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).

Example:

CSS

body {
  background-color: rgba(255, 87, 51, 0.5);
}

Live Playground, Try it Yourself

HSL

HSL color format represents colors using hue, saturation, and lightness values. Hue ranges from 0 to 360, while saturation and lightness are percentage values ranging from 0% to 100%.

Example:

CSS

body {
  background-color: hsl(12, 100%, 60%);
}

Live Playground, Try it Yourself

HSLA

HSLA color format is similar to HSL but includes an additional alpha channel to control the opacity of the color, just like RGBA.

Example:

CSS

body {
  background-color: hsla(12, 100%, 60%, 0.5);
}

Live Playground, Try it Yourself

Conclusion

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.