CSS Colors

Hey Readers 👋

In this article, we’ll learn about the CSS Colors to beautify our content.

So, Let's dive into the article.

Modern browsers support 140 named colors.

There are different color systems. We can use them in our HTML and CSS by

name, Hex color code, or RGB value.

Let me explain individually.

An RGB color value is specified with rgb(red, green, blue).

Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255.

For example, rgb(0, 255, 0) is rendered as green, because the green parameter is set to its highest value (255) and the others are set to 0.

Have a look on a snippet 👇 for more clarity, where a div is styled with background-color & color using RGB Color.

div {
    background-color: rgb(255, 87, 51);
    color: rgb(255, 255, 255);
    padding: 20px;
}

Here's an output 👇

I hope you got some clarity on RGB Color. Now, let's get into the Hexadecimal Colors.

A hexadecimal color is specified with #RRGGBB.

RR (red), GG (green), and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.

For example, #FF0000 is displayed as red, because the red component is set to its highest value (FF) and the others are set to 00.

Have a look on a snippet 👇 for more clarity where a div is styled with background-color & color using Hexadecimal Color.

div {
    background-color: #FF3333;
    color: #ffffff;
    padding: 20px;
}

Here's an output 👇

I hope you got some clarity on Hexadecimal Color.

Let me show few Red HTML Color Names, Hex Code & RGB Color

I would like to share HTML Color Codes links for reference 👇

Hopefully, you got some clarity on CSS Colors.

I value your time and I gave my best to write this article. Thanks for sparing your time in reading this article till the end.

So what are you waiting for? Any further doubts? Drop it below 👇

Please, feel free to share your feedback on this article.

Comments