The Best Guide To Understand CSS Colors

CSS, or Cascading Style Sheet is a style sheet language that is used to describe the presentational semantics of the HTML document. More specifically, as a developer, it helps you create your website as per how you want it to look. In this tutorial, you will learn the CSS Colors format.

CSS Colors

CSS uses the color values to specify the colors. Typically, the color property is used to set the background or font color on the page. You can also use this property for the border-color and other decorative elements.

Built-in Color Name

As the name suggests, the built-in color name is the collection of defined colors that are used by using just their names such as red, green, blue, and so on.

Hexadecimal Value

The hexadecimal is a six-digit representation of the color. It is denoted by the # symbol followed by six characters range from 0 to F. The first two digits of the hexadecimal value represent stand for the color value,red (RR). The next two digits in the value sequence are for the color value, green (GG) followed by the last 2, which are for the blue (BB) color value.

RGB Value

The RGB format is the short form for red, green, and blue. We specify the color value using the rgb( ) property. The color value can be any integer value from 0 to. 255. It can also be a percentage.

Note: All the browsers do not support rgb () property of color, so it is recommended not to use it.

Syntax: rgb(R, G, B)

RGBA Format

The RGBA format is similar to the RGB format except that RGBA contains A (Alpha) that specifies the element's transparency.

Syntax: rgba (R,G,B,A)

HSL

HSL is a short form for Hue, Saturation, Lightness. Let us understand each term.

Hue: It can be defined as a degree on the color wheel ranging between 0 and 360, where zero is represented by red, 120 by green, and 240 by blue.

Saturation: The value of saturation is in percentage. 100% means the color will be fully saturated, i.e, no shades of gray. 

Lightness: Lightness is also a percentage. 0% is black, 100% is white.

Syntax: color(H,S,L)

HEX and RGB Value of Some Colors

Let’s see the list of built-in colors along with their HEX and RGB value.

Example

This example will help you understand the way in which you can add the color values.

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details!

Conclusion

In this article, we learned various ways in which you can add color values to your page. We have seen the HEX, RGB, and RGBA properties with the example. Make sure you use the property which is supported by all the browsers.

Start your accelerated career growth journey as a software developer with this Post Graduate Program in Full Stack Web Development in collaboration with Caltech CTME. In just 9 months, this course will offer you in-depth job-ready knowledge into modern coding techniques with Bootcamp-style intensive program and help you with all that you need to become a full-stack technologist anywhere in the world.

If you have any queries or would like to share feedback regarding this CSS colors article, feel free to reach out to us by placing them in the article’s comments section below. Our SMEs will review and respond at the earliest..