Introduction to CSS Color Codes

In CSS Color codes gives different colors by using hexadecimal values and decimal values. Every color has its own hexadecimal value by default. In general, we simply mention color names directly. But inside the CSS process, these colors in hexadecimal format and gives the desired color. Hexadecimal color values contain 0 to 9 numbers and A to F characters. Decimal values contain 0 to 255 numbers.

1. Hexadecimal Value must follow by hash (#).

background: #ffff;

2. Decimal value can take with RGB property.

background: rgb(255,0,0);

Scenario: When we want to apply color with light red or light blue or in between more than 40% red or blue. In this case, we cannot give value to 40% red or 40% blue. We must specify its equivalent color code. So, this kind of situation color code very useful.

How does Color Code Work in CSS?

Below we show how the color code works:

1. Hexadecimal Color Code

Hexadecimal color code takes 0 to 9 numbers and A to F characters as we discussed. These hexadecimal colors are processed by the CSS processor and give its equivalent color.

Syntax #1

div
{
background: #ffff;
}

Explanation: This hexadecimal value gives a background color.

Syntax #2

div
{
color: #ffff;
}

Explanation: This hexadecimal value gives text color.

2. Decimal Color Code

Decimal color code takes 0-255 numbers as we discussed. These decimal colors are processed by the CSS processor and give its equivalent color.

Syntax #3

div
{
background: rgb(255,0,0);
}

Explanation: This decimal value gives a background color.

Syntax #4

div
{
color: rgb(255,0,0);
}

Explanation: This decimal value gives text color.

Why we take only Three Values with RGB?

RGB means red green and blue. These 3 are primary colors. We know that all colors are formed by mixing these 3 colors. So, we are taking these 3 values only.

Hexadecimal and decimal values can be applied with below properties

Background
Color
Border

Examples to Implement CSS Color Codes

Below is the example to implement for the same:

Example #1

Using Hexadecimal Code to Background Color

Code:

<!DOCTYPE html>
<html>
<head>
<title>Color Code</title>
</head>
<style>
.header {
text-align: center;
color: #FF0000; /* red color */
}
.p1 {
background: #00FFFF; /* cyan color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p2 {
background: #0000FF; /* blue color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p3 {
background: #0000A0; /* dark blue color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p4 {
background: #ADD8E6; /* light blue color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p5 {
background: #800080; /* purple  color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p6 {
background: #FFFF00; /* yellow color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p7 {
background: #00FF00; /* lime color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p8 {
background: #FF00FF     ; /* magenta color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p9 {
background: #FFFFFF; /* white color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p10 {
background: #C0C0C0; /* silver color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
</style>
<body>
<h2 class="header">Background Colors with Hexadecimal Color Code</h2>
<p class="p1">Hi, I am color code background color. I can also
generate color.</p>
<p class="p2">Hi, I am color code background color. I can also
generate color.</p>
<p class="p3">Hi, I am color code background color. I can also
generate color.</p>
<p class="p4">Hi, I am color code background color. I can also
generate color.</p>
<p class="p5">Hi, I am color code background color. I can also
generate color.</p>
<p class="p6">Hi, I am color code background color. I can also
generate color.</p>
<p class="p7">Hi, I am color code background color. I can also
generate color.</p>
<p class="p8">Hi, I am color code background color. I can also
generate color.</p>
<p class="p9">Hi, I am color code background color. I can also
generate color.</p>
<p class="p10">Hi, I am color code background color. I can also
generate color.</p>
</body>
</html>

Output:

Example #2

Using Hexadecimal Code to Text Color

Code:

<!DOCTYPE html>
<html>
<head>
<title>Color Code</title>
</head>
<style>
.header {
text-align: center;
color: #808080; /* gray color */
}
.p1 {
color: #000000; /* black color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p2 {
color: #FFA500; /* orange color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p3 {
color: #A52A2A; /* brown blue color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p4 {
color: #800000; /* maroon color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p5 {
color: #008000; /* green  color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p6 {
color: #808000; /* olive color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p7 {
color: #008080; /* teal color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p8 {
color: #E238EC  ; /* crimson color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p9 {
color: #34282C; /* charcoal color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
.p10 {
color: #000080; /* navy blue color */
border: 2px solid;
padding: 5px;
text-align: justify;
}
</style>
<body>
<h2 class="header">Text Colors with Hexadecimal Color Code</h2>
<p class="p1">Hi, I am color code background color. I can also
generate color.</p>
<p class="p2">Hi, I am color code background color. I can also
generate color.</p>
<p class="p3">Hi, I am color code background color. I can also
generate color.</p>
<p class="p4">Hi, I am color code background color. I can also
generate color.</p>
<p class="p5">Hi, I am color code background color. I can also
generate color.</p>
<p class="p6">Hi, I am color code background color. I can also
generate color.</p>
<p class="p7">Hi, I am color code background color. I can also
generate color.</p>
<p class="p8">Hi, I am color code background color. I can also
generate color.</p>
<p class="p9">Hi, I am color code background color. I can also
generate color.</p>
<p class="p10">Hi, I am color code background color. I can also
generate color.</p>
</body>
</html>

Output:

Example #3

Using decimal(RGB) Code to Border

Code:

<!DOCTYPE html>
<html>
<head>
<title>Color Code</title>
</head>
<style>
.header {
text-align: center;
color: rgb(218, 165, 32) /* golden rod color */
}
.p1 {
border: 5px solid rgb(244, 164, 96); /* sandy brown color */
padding: 5px;
}
.p2 {
border: 5px solid rgb(245, 222, 179); /* wheat color */
padding: 5px;
}
.p3 {
border: 5px solid rgb(47, 79, 79); /* dark slate gray color */
padding: 5px;
}
.p4 {
border: 5px solid rgb(245, 245, 220); /* beige color */
padding: 5px;
}
.p5 {
border: 5px solid rgb(240, 255, 240); /* honey dew color */
padding: 5px;
}
.p6 {
border: 5px solid rgb(199, 21, 133); /* medium violet red color */
padding: 5px;
}
.p7 {
border: 5x solid rgb(0,255,127); /* spring green color */
padding: 5px;
}
.p8 {
border: 5px solid rgb(75, 0, 130); /* indigo color */
padding: 5px;
}
.p9 {
border: 5px solid rgb(255, 0, 255); /* fuchsia color */
padding: 5px;
}
.p10 {
border: 5px solid rgb(30, 144, 255); /* dodger blue */
padding: 5px;
}
</style>
<body>
<h2 class="header">Border colors with decimal Color Code</h2>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
<p class="p4"></p>
<p class="p5"></p>
<p class="p6"></p>
<p class="p7"></p>
<p class="p8"></p>
<p class="p9"></p>
<p class="p10"></p>
</body>
</html>