The color palette of a website is essential to its design. It could have an impact on the links people click, how they read content, and how at ease they are using our website.
Although effective color use requires skill and a grasp of color theory, the CSS color and background color elements make adding color to our website straightforward. There are several ways to specify these attributes. Use HTML color names, hex color codes, RGB color codes, or HSL color values to change a web page's text or background color.
CSS employs color values for specifying a color, commonly utilized for defining the background or text color of an element, known as its foreground.
They can also serve to modify the color of borders and other ornamental elements.
There are multiple methods available to specify our color values. The options below cover all potential formats:
Predefined Color Palette: Recognizable by specific names, built-in colors encompass a set selection of colors such as red, blue, and green.
Syntax:
h {
color: color-name;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Example for CSS color property</title>
<style>
h2 {
color: red;
text-align: left;
}
</style>
</head>
<body>
<h1>
Welcome
</h1>
</body>
</html>
Output
The RGB (Red, Green, Blue) format allows for specifying an HTML element's color by setting the R, G, and B values within the range of 0 to 255. For instance, the RGB values for red are (255, 0, 0), for green are (0, 255, 0), for blue are (0, 0, 255), and so forth.
Syntax:
h1 {
color: rgb(R, G, B);
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Example for CSS color property</title>
<style>
h1 {
color: rgb(120, 240, 140);
text-align: left;
}
</style>
</head>
<body>
<h1>
Hi Viewers!!! Welcome back
</h1>
</body>
</html>
Output
The RGBA format is similar to RGB as it also contains an Alpha component that specifies the transparency level of an element. The Alpha value ranges between 0.0 and 1.0, with 0.0 representing full transparency and 1.0 representing partial transparency.
Syntax:
h1 {
color: rgba(R, G, B, A);
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Example for CSS RGBA color property</title>
<style>
h1 {
color: rgba(100, 255, 100, 1.0);
text-align: left;
}
</style>
</head>
<body>
<h1>
Hello World..!!
</h1>
</body>
</html>
Output
Hexadecimal Representation: Consisting of six characters that span from 0 to F, these values are denoted in hexadecimal form commencing with the # symbol. Examples include Red #FF0000, Green #00FF00, Blue #0000FF, among others.
Syntax:
h1 {
color: #(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Example for CSS hex property</title>
<style>
h1 {
color: #000070;
text-align: left;
}
</style>
</head>
<body>
<h1>
CSS hex property
</h1>
</body>
</html>
Output
HSL: Hue, Saturation, and Lightness are the three components denoted by the acronym HSL. This color model utilizes a cylindrical coordinate system.
Hue: The color wheel's degree corresponds to hue. Its value ranges from 0 to 360, with red at 0, green at 120, and blue at 240.
Saturation: A percentage value is employed, where 100% represents complete saturation and 0% represents complete desaturation (grey).
Brightness is indicated by a percentage value, where 100% signifies white and 0% corresponds to black.
Syntax:
h1 {
color: hsl(H, S, L);
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Example for CSS hsl color property</title>
<style>
h1 {
color: hsl(140, 90%, 20%);
text-align: left;
}
</style>
</head>
<body>
<h2>
You are here!!
</h2>
</body>
</html>
Output
HSLA: Similar to the HSL property, the HSLA color property includes an Alpha component to specify the transparency of an element. The Alpha value ranges from 0.0 to 1.0, with 0.0 representing full transparency and 1.0 representing partial transparency.
Syntax:
h1 {
color: hsla(H, S, L, A);
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Example for CSS hsla color property</title>
<style>
h1 {
color: hsla(70, 40%, 20%, 0.75);
text-align: left;
}
</style>
</head>
<body>
<h1>
Hurray!!
</h1>
</body>
</html>
Output
By understanding and implementing these various methods, we can create vibrant and engaging web pages that capture the interest of our audience. Let's now explore the CSS Colors!
Summary
Improving our website with color is a straightforward process. Modifying the color of text and background is an easy task on our website. Having a basic understanding of CSS and HTML would facilitate the creation of our website. Nevertheless, mastering the names, codes, and combinations of colors to enhance the accessibility of our website and marketing materials will require some time. This serves as an additional motivation to begin incorporating color into our website immediately.