This tutorial will explore a variety of HTML color styles and attributes extensively through a range of examples.
What do you mean by Colors?
Utilizing colors is essential for improving the aesthetics of web pages. Employing various color palettes enhances the visual appeal of websites, making them more engaging to visitors.
Utilizing various color schemes allows for the creation of unique colors through the blending of different hues.
1. Hexadecimal Style:
The color is defined in a hexadecimal format consisting of 6 digits ranging from 0 to F and is indicated by the symbol '#'.
Syntax:
#RRGGBB
In the syntax provided, the initial pair of digits represents red color, the subsequent pair represents green color, and the final pair represents blue color.
For example: #ff00ff
In the example provided, the color representation is as follows: ff is shown in red, 00 is depicted in green, and ff is visualized in blue.
Below are instances showcasing the Hexadecimal color format.
Example 1:
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> HTML Hexadecimal Color Style </title>
<link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
<link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Electrolize);
* { box-sizing: border-box; }
html { height: 100%; }
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
h4 {
line-height: 30px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
font-weight: 300;
font-size: 40px;
text-align: center;
font-family: "Electrolize", sans-serif;
}
h2 {
position: relative;
padding: 10;
margin: 10;
font-family: "Electrolize", sans-serif;
font-weight: 300;
font-size: 40px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
text-align: center;
}
</style>
<body>
<h2> Example </h2>
<h4> HTML Hexadecimal Color Style </h4>
<h1 style = "background-color:#ff0000;"> #ff0000 </h1>
<h1 style = "background-color:#0000ff;"> #0000ff </h1>
<h1 style = "background-color:#3cb371;"> #3cb371 </h1>
<h1 style = "background-color:#ee82ee;"> #ee82ee </h1>
<h1 style = "background-color:#ffa500;"> #ffa500 </h1>
<h1 style = "background-color:#6a5acd;"> #6a5acd </h1>
</body>
</html>
Explanation:
In the example shown, a hexadecimal color scheme has been established. Within this scheme, a unique color value has been generated by blending various hexadecimal color styles.
Output:
Following is the output of this example.
Example 2:
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> HTML Hexadecimal Color Style with grey shades </title>
<link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
<link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Electrolize);
* { box-sizing: border-box; }
html { height: 100%; }
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
h4 {
line-height: 30px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
font-weight: 300;
font-size: 40px;
text-align: center;
font-family: "Electrolize", sans-serif;
}
h2 {
position: relative;
padding: 10;
margin: 10;
font-family: "Electrolize", sans-serif;
font-weight: 300;
font-size: 40px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
text-align: center;
}
</style>
<body>
<h2> Example </h2>
<h4> HTML Hexadecimal Color Style with grey shades </h4>
<h1 style = "background-color:#404040;"> #404040 </h1>
<h1 style = "background-color:#686868;"> #686868 </h1>
<h1 style = "background-color:#a0a0a0;"> #a0a0a0 </h1>
<h1 style = "background-color:#bebebe;"> #bebebe </h1>
<h1 style = "background-color:#dcdcdc;"> #dcdcdc </h1>
<h1 style = "background-color:#f8f8f8;"> #f8f8f8 </h1>
</body>
</html>
Explanation:
In the demonstration provided earlier, a hexadecimal color scheme was established. Within this scheme, various shades of grey were generated by combining different hexadecimal color values.
Output:
Following is the output of this example.
2. RGB Style:
The colors are represented by Red, Green, and Blue components, each having a range from 0 to 255.
Syntax:
rgb(red, green, blue)
The color is determined by utilizing the formula provided above within the method.
For example,
For example: rgb(0, 0, 255)
In the example provided, the color blue is displayed as the red and green color values are set to 0, while the blue value is set to its maximum value of 255.
Example:
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> HTML RGB Color Style </title>
<link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
<link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Electrolize);
* { box-sizing: border-box; }
html { height: 100%; }
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
h4 {
line-height: 30px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
font-weight: 300;
font-size: 40px;
text-align: center;
font-family: "Electrolize", sans-serif;
}
h2 {
text-align: center;
font-weight: normal;
color: red;
text-transform: uppercase;
font-size: 1em;
white-space: nowrap;
font-size: 4vw;
z-index: 1000;
font-family: 'Bangers', cursive;
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
</style>
<body>
<h2> Example </h2>
<h4> HTML RGB Color Style </h4>
<h1 style = "background-color:rgb(255, 0, 0);"> rgb(255, 0, 0) </h1>
<h1 style = "background-color:rgb(0, 255, 255);"> rgb(0, 255, 255) </h1>
<h1 style = "background-color:rgb(60, 179, 113);"> rgb(60, 179, 113) </h1>
<h1 style = "background-color:rgb(238, 130, 238);"> rgb(238, 130, 238) </h1>
<h1 style = "background-color:rgb(255, 165, 0);"> rgb(255, 165, 0) </h1>
<h1 style = "background-color:rgb(120, 90, 205);"> rgb(120, 90, 205) </h1>
</body>
</html>
Explanation:
In the demonstration above, we have illustrated an instance of the RGB color model. Within this illustration, we have generated various values representing different shades of colors using the RGB color model.
Output:
Following is the output of this example.
3. RGBA Style:
The RGBA color model includes Red, Green, Blue, and Alpha components, extending the RGB model. The Alpha parameter in RGBA represents the opacity level, allowing for transparency control. The values for Green, Blue, and Red range from 0 to 255, while Alpha ranges from 0 to 1. This feature enables customization of transparency levels in colors.
Syntax:
rgba(red, green, blue, alpha)
Within the function, the color is determined through the formula provided.
For example,
For example: rgba(255, 99, 71, 0.0)
In the example provided, the color is shown as a blend of multiple colors, with the alpha value specifying complete transparency of the color.
Example:
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> HTML RGBA Color Style </title>
<link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
<link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Electrolize);
* { box-sizing: border-box; }
html { height: 100%; }
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
h4 {
line-height: 30px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
font-weight: 300;
font-size: 40px;
text-align: center;
font-family: "Electrolize", sans-serif;
}
h2 {
text-align: center;
font-weight: normal;
color: red;
text-transform: uppercase;
font-size: 1em;
white-space: nowrap;
font-size: 4vw;
z-index: 1000;
font-family: 'Bangers', cursive;
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
</style>
<body>
<h2> Example </h2>
<h4> HTML RGBA Color Style </h4>
<h1 style = "background-color:rgba(200, 59, 71, 1);"> rgba(200, 59, 71, 1) </h1>
<h1 style = "background-color:rgba(255, 99, 71, 0);"> rgba(255, 99, 71, 0) </h1>
<h1 style = "background-color:rgba(255, 99, 71, 0.4);"> rgba(255, 99, 71, 0.4) </h1>
<h1 style = "background-color:rgba(255, 99, 71, 0.6);"> rgba(255, 99, 71, 0.6) </h1>
<h1 style =" background-color:rgba(255, 99, 71, 0.8);"> rgba(255, 99, 71, 0.8) </h1>
<h1 style = "background-color:rgba(255, 99, 71, 0.2);"> rgba(255, 99, 71, 0.2) </h1>
</body>
</html>
Explanation:
In the instance provided, an illustration of the RGBA color style has been generated. Various color shade values have been produced using the RGBA color style. The absence of a background color is depicted in the second row of the color display by establishing an opacity value of 0.
Output:
Following is the output of this example.
4. HSL Style:
This style is the image's color.
Syntax:
hsl(hue, saturation, lightness)
- H: In the above syntax, H stands for Hue. The range of hue is 0 to 360. In this range, 0 value is used for red, 120 value is for green, and 240 value is used for blue.
- S: In the above syntax, S stands for Saturation. It describes the intensity of the color. In this, 0% is used for a shade of gray, and 100% is the full color. 50 % also defines the grey color, but we can still see the color with the use of this.
- L: In the above syntax, L stands for Lightness of the color. It defines the color brightness. 0% is used for black, 100% is used for white, and 50% means neither black nor white.
Example:
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> HTML HSL Color Style </title>
<link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
<link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Electrolize);
* { box-sizing: border-box; }
html { height: 100%; }
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
h4 {
line-height: 30px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
font-weight: 300;
font-size: 40px;
text-align: center;
font-family: "Electrolize", sans-serif;
}
h2 {
text-align: center;
font-weight: normal;
color: red;
text-transform: uppercase;
font-size: 1em;
white-space: nowrap;
font-size: 4vw;
z-index: 1000;
font-family: 'Bangers', cursive;
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
</style>
<body>
<h2> Example </h2>
<h4> HTML HSL Color Style </h4>
<h1 style = "background-color:hsl(0, 100%, 50%);"> hsl(0, 100%, 50%) </h1>
<h1 style = "background-color:hsl(0, 0%, 50%);"> hsl(0, 0%, 50%) </h1>
<h1 style = "background-color:hsl(147, 50%, 47%);"> hsl(147, 50%, 47%) </h1>
<h1 style =" background-color:hsl(300, 76%, 72%);"> hsl(300, 76%, 72%) </h1>
<h1 style = "background-color:hsl(39, 100%, 50%);"> hsl(39, 100%, 50%) </h1>
<h1 style = "background-color:hsl(248, 53%, 58%);"> hsl(248, 53%, 58%) </h1>
<h1 style = "background-color:hsl(0, 100%, 100%);"> hsl(0, 100%, 100%) </h1>
</body>
</html>
Explanation:
An illustration of the HSL color style has been crafted above. Within this demonstration, various color shade values have been generated utilizing the HSL color styles.
Output:
Following is the output of this example.