CSS Color

Published by StudyMuch on January 22, 2022January 22, 2022

CSS Color

In this tutorial we will learn CSS Color, types of using color in HTML how we color the HTML document’s elements. If you learn more about color, like how to use color in HTML Document such as background color, text color, border color, table color etc. visit and learn HTML Color Tutorial.

Types of color in CSS

CSS color are commonly specified using three types in HTML web pages, are as given below. And below learn CSS Color Table with all Color code.

Color Name
RGB Color Value
Hexadecimal Color Value

We learn here all the three types of CSS Color and also see the programming example of these color value, now we will learn these color value one by one.

1. Color Name

It defines any colors by its color name, for example blue, red, golden etc. all color are uses by its name. We use this color name all types of Stylesheets of CSS, see below the example of Color Name.

Example CSS Color

Programming Example Color Name (CSS)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width,
 initial-scale=1.0">
    <title>Example of Color Name</title>
    <style type="text/css">
        p{
            color: red;
        }
        div{
            background: yellowgreen;
            width: 50px;
            height: 50px;
            color:azure;
            text-align: center;
        }
    </style>
</head>
<body>
<p>Learn CSS Color by its Name</p>
<center><div> Color Name</div></center>
</body>
</html>

Output of above Programming Example

Above in programming example of Color Name you can see we define color by its name. you see in programming example we changed color of text and div background color by color name.

2. RGB Color Value

RGB color stands for Red, Green and Blue. It defines any valid color using the rgb(here value), see the format of RGB color value rgb(number, number, number) for example; rgb(255, 255, 0) it is yellow color, You can see below table of CSS color.

Example of RGB Color Value

Programming Example RGB Color Value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport" 
content="width=device-width,
 initial-scale=1.0">
    <title>Example of RGB Color Value</title>
    <style type="text/css">
        p{
            color:rgb(0,0,128);
        }
        div{
            background:rgb(255, 255, 0);
            width: 50px;
            height: 50px;
            color:rgb(255, 0, 0);
            text-align: center;
        }
    </style>
</head>
<body>
<p>Learn CSS Color by its Name</p>
<center><div> Color Name</div></center>
</body>
</html>

Output of above Programming Example

Above programming example, you can see we use the RGB color value for color the text and division.

3. Hexadecimal Color Value

Hexadecimal Color Value Is also known as Hex Color Value, it is defining any color by its hash followed by letter and number, for example; #00ffff, #808000 etc. You learn Color Name, Hex Color Value and RGB Color Value below the table of CSS color.

Example of Hex Color Value

Programming Example of Hex Color Value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width, 
initial-scale=1.0">
    <title>Example of Hex color value</title>
    <style type="text/css">
        p{
            color:#ff00ff;
        }
        div{
            background: #00ff00 ;
            width: 50px;
            height: 60px;
            color: #000000 ;
            text-align: center;
        }
    </style>
</head>
<body>
<p>Learn CSS Hexadecimal Color Vlaue</p>
<center><div> Hex color Value</div></center>
</body>
</html>

Output of above Programming Example

You can see the above programming example we changed the color or text and division by used of Hexadecimal Color Value.

CSS Color Table

Given below the CSS Color Table, most common CSS color with Color Name, Hexadecimal Color Value and RGB color value.

COLOR	COLOR NAME	HEX COLOR VALUE	RGB COLOR VALUE
	Black	#000000	rgb(0,0,0)
	Red	#ff0000	rgb(255,0,0)
	Gray	#808080	rgb(128,128,128)
	White	#ffffff	rgb(255,255,255)
	Green	#008000	rgb(0,128,0)
	Yellow	#ffff00	rgb(255,255,0)
	Lime	#00ff00	rgb(0,255,0)
	Navy	#000080	rgb(0,0,128)
	Blue	#0000ff	rgb(0,0255)
	Purple	#800080	rgb(128,0,128)
	Brown	#800000	rgb(128,0,0)
	Silver	#C0C0C0	rgb(192,192,192)
	Sky blue	#629DFC	rgb(98,157,252)
	Orange	#FFC301	rgb(255,195,1)
	Fuchsia	#EB03F1	rgb(235,3,241)
	Aqua	#71DAFF	rgb(113,218,255)
	French Blue	#0070C0	rgb(0,112,192)

Above you can see and learn the CSS Color Name with Hex Color value and RGB Color Value, in this tutorial we learned CSS Color and I hope you all learn this with entertain.

Next tutorial we will learn a new topic of CSS. Visit Learn HTML Color Tutorial.

Learn This-

2 Comments

zoritoler imol · July 3, 2022 at 3:06 am

I am extremely impressed together with your writing abilities as smartly as with the format for your blog. Is that this a paid subject or did you customize it yourself? Either way keep up the nice high quality writing, it’s uncommon to look a nice blog like this one these days..

Bennie Alea · September 23, 2022 at 2:39 pm

Hello there, I found your blog via Google while searching for a related topic, your website came up, it looks great. I’ve bookmarked it in my google bookmarks.