CSS Colors

CSS Colors

On a website, you definitely need colors. Proper color combination gives your website a catchy look and can get visitors back. Colors are set for background, header, text, hyperlinks, etc. Let’s see how to work with CSS colors.

Color in CSS can be added in three forms:

Name of Color

This is the simplest way to add color to your website. Just add the name of the color and that’s it. For example, blue, green, red, yellow, etc.

Let us see an example:

Here’s the output,

CSS Colors Name

HEX Value of Color

Set colors in CSS using the HEX value of a color. Every color has a HEX value, which can be easily set. RGB values are set using hexadecimal color, with the #RRGGBB form. As the name tells, RR for red, GG is for green and BB for blue. These are hexadecimal values, like decimal value between 0-255.

Let us see an example. We will be taking the above example, to add colors with HEX value:

Here’s the output,

CSS Colors Hexadecimal Value

RGB Value of Color

Set colors in CSS using the RGB formula. As the name tells, RGB is Red, Green and Blue. It is set with rgb (red, green, blue). All the three parameter is to define the color intensify, which is set between 0 and 255.

Let us understand the RGB values. The value varies between 0-255 for all the three values.

For example,

Here, blue is set to 255, which is the highest value, and red and green set to 0. So the result will be blue, since it has the highest value.

Here’s the output, which shows blue background,

CSS RGB blue

For example,

Here, green is set to 255, which is the highest value, and red and blue set to 0.

So the result will be green, since it has the highest value.

Here’s the output, which shows green background,

CSS RGB green

For example,

Here, red is set to 255, which is the highest value, and green and blue set to 0. So the result will be red, since it has the highest value.

Here’s the output, which shows red background,

CSS RGB red

In the same way, you can set values for RGB.

Let’s see the example with the RGB values for all colors,

Here’s the output,

CSS Colors RGB Values

In this lesson, we learned how to set colors on a web page. We saw three forms of color combinatio: Hex value, RGB, and using color name.

CSS Online Quiz 1
CSS Background
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create free tutorials for all.

No Comments

Post A Comment