Introduction:
Color plays a crucial role in website design, with the ability to adapt based on user interactions, text legibility, and overall site navigation experience. Familiarity with color theory enables developers to seamlessly incorporate color and background attributes into their websites.
Various methods are available for developers to specify these characteristics. By utilizing hex color codes, RGB color codes, or HSL color values, one can alter the color of text and the background of a webpage. Let's explore the diverse approaches for applying color to a webpage. These include:
HTML Colors in CSS
By utilizing HTML colors, we can introduce color to web pages. This is achievable as the color name corresponds to HTML colors. Presently, contemporary browsers endorse 140 colors. Instances of a few colors include Orange, gold, cyan, maroon, skyblue, and more.
Consider an example showcasing the integration of color properties within a webpage.
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h2>Using HTML Color Names in CSS</h2>
<p>To change the color of this paragraph to red, define the CSS color property with the HTML color name "red."</p>
</body>
</html>
Output:
NOTE: According to the convention, it is recommended not to use the HTML color names. For the human being, it can be challenging to remember all the 140 color names.
Hex Color Codes in CSS
Hexadecimal codes consist of a hashtag followed by six characters, representing the intensity levels of the primary colors: red, green, and blue. These values range from 00 (minimum intensity) to FF (maximum intensity) for each color channel.
A hexadecimal color code is comprised of a total of six characters, consisting of a combination of ten numerals (0-9) and six letters (a-f). This results in a grand total of 16,777,216 potential combinations for a hex color code. Now, we will delve into various examples of hex color code combinations.
In order to produce the color white, a combination of the three primary colors at maximum intensity is required. The hexadecimal color representation for white is #FFFFFF. Conversely, for the color black, the hexadecimal code is #000000. Likewise, the hexadecimal code #FF0000 corresponds to the color blue. Below the table, you can find the hexadecimal color codes for various commonly utilized colors.
| Color name | Hex color code |
|---|---|
| White | #FFFFFF |
| Silver | #C0C0C0 |
Gray |
#808080 |
| Black | #000000 |
Red |
#FF0000 |
| Maroon | #800000 |
| Yellow | #FFFF00 |
| Olive | #808000 |
Lime |
#00FF00 |
| Green | #008000 |
Aqua |
#00FFFF |
Teal |
#008080 |
Blue |
#0000FF |
Navy |
#000080 |
| Purple | #800080 |
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #69EAFF;
}
</style>
</head>
<body>
<h2>Using Hex Color Codes in CSS</h2>
<p>To change the background color of this page to a shade of blue, define the CSS color property with the hex color code #69EAFF.</p>
</body>
</html>
Output:
RGB Color Codes in HTML
An alternative approach to adding color to HTML is through the utilization of RGB color codes, which stand for Red, Green, and Blue. These color components are specified by separating their names with commas. The intensity of each color can vary from 0 to 255 as integers, and they are typically enclosed in parentheses in lowercase.
The color black can be denoted as (0, 0, 0) in RGB notation, while the color red corresponds to RGB values of (255, 0, 0), and blue is represented by RGB values of (0, 0, 255). Utilizing RGB values also allows us to adjust the transparency of colors. To specify the transparency level, we simply append an "a" to the RGB prefix and include a fourth value within the parentheses. Transparency levels are defined on a scale from 0 to 1, where 0 signifies full transparency and 1 indicates complete opacity. For instance, setting the value to 0 would result in a fully transparent color, while a value of 1 would render the color fully opaque. An opacity value of 0.5 would produce a color with 50% transparency.
Example 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
background-color: rgb(150,100,255);
}
p {
background-color: rgba(150,100,255,.3);
}
}
</style>
</head>
<body>
<h2>Using RGB Color Codes in CSS</h2>
<p>To change the background color of this page to a shade of blue, define the CSS color property with the hex color code #69EAFF.</p>
</body>
</html>
Output:
HSL Color Values in HTML
To manage the color's hue, saturation, lightness, and alpha transparency, we can utilize HSL color values. The structure of
HSL, which stands for Hue, Saturation, and Lightness, functions similarly to RGB color codes. In the HSL color model, three numerical values are used, separated by commas. These values are enclosed in parentheses and preceded by the lowercase "hcl." Optionally, a fourth value, denoted by "a," can be included to specify transparency.
The transparency level of a color is indicated on a scale from 0 to 1. A value of 0 signifies full transparency, while 1 indicates complete opacity. Setting the value to 0.5 results in a color with 50% transparency. Unlike RGB, the HSL color model does not directly represent the saturation of primary colors. In the HSL model, angles are used to define colors instead of values between 0 and 360. Red is designated at 0 or 360 degrees, green at 120 degrees, and blue at 240 degrees.
It is essential to specify the saturation and lightness values within the range of 0 to 100. To achieve a grayscale shade, the value should be set to 0%, while for a full-color effect, it should be set to 100%. The color values for black and white should be set at 0% and 100%, correspondingly.
Example 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
color:hsl(0,100%,50%);
}
h3 {
color:hsl(0,100%,75%);
}
h4 {
color:hsl(0,100%,25%);
}
h5 {
color:hsla(0,60%,70%, .5);
}
</style>
</head>
<body>
<h1>Using HSL Color Values in CSS</h1>
<p>To change an element's hue, saturation, or lightness, define the CSS color property with an HSL value.</p>
<h2>Red</h2>
<h3>Light red</h3>
<h4>Dark red</h4>
<h5>Pastel and transparent red</h5>
</body>
</html>
Output:
Color Gradients
Next, we will explore the process of setting a solid color as the background. Additionally, we have the option to apply a gradient effect to the background. In this context, a gradient involves a gradual transition from one color to another along a specified direction, such as top to bottom, left to right, or diagonally. To achieve this effect, we need a minimum of two colors. However, it is also possible to use more than two colors for creating diverse gradient styles. Let's demonstrate the creation of a rainbow gradient in the example provided below.
Example-5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 100px;
background:
linear-gradient(
to the right,
RGB(252, 164, 213),
red,
#FACA2E,
green,
hsl(240, 95%, 58%)
);
}
</style>
</head>
<body>
<h1>Creating a Color Gradient in CSS</h1>
<p>To create a color gradient, use the following CSS:
<p>background-image: linear-gradient(direction, color-stop1, color-stop2, ...);</p>
<div>
</div>
</body>
</html>
Output:
Example-6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f1f1f1;
}
.loader {
position: relative;
width: 350px;
height: 350px;
border-radius: 50%;
background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
animation: animate 1.2s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader span {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
}
.loader span:nth-child(1) {
filter: blur(5px);
}
.loader span:nth-child(2) {
filter: blur(10px);
}
.loader span:nth-child(3) {
filter: blur(25px);
}
.loader span:nth-child(4) {
filter: blur(50px);
}
.loader:after {
content: ";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #f1f1f1;
border: solid white 10px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</div>
</body>
</html>
Output: