No products in the cart.
Lesson 3 of 22By Aryan Gupta
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 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.
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.
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.
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)
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 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.
Let’s see the list of built-in colors along with their HEX and RGB value.
This example will help you understand the way in which you can add the color values.
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..
Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.
Everything You Need to Know About CSS
Getting Started With Low-Code and No-Code Development
CSS Advanced Tutorial to Understand the A-Z Of CSS
CSS Box Model
Free eBook: Pocket Guide to the Microsoft Certifications
© 2009 -2024- Simplilearn Solutions
Work with us
Learn On the Go!
Trending Post Graduate Programs
Trending Bootcamp Programs
Trending Master Programs