HTML Colors
In this tutorial, we will learn about colors in HTML with the help of examples.
Colors
Colors are used to design the webpage more attractive. Colors are very important for a webpage to give a better look and feel.
Colors are specified with predefined color names, or HEX, RGB, RGBA, or HLSA values.
Specify Colors
There are five ways to specify color names in HTML :
- Prededfined Color Names
- HEX code
- RGB value
- RGBA value
- HLSA value
Predefined Color Names
Colors can be specified directly by a color name.
There are about 150 color names are predefined in HTML that can be used in our HTML code.
For Example - red, blue, green, pink, yellow, etc.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Predefined Color Name</title>
</head>
<body>
<p style = "color : violet;">This is violet color paragraph.</p>
</body>
</html>Output
This is violet color paragraph.
HEX code
We define the color in 6 digits hexadecimal number(from 0 to f).
In hexadecimal color the first two digits indicate red color, the next two indicate green and the last two blue colors.
For example : Black hex code is #000000, White hex code is #ffffff .
Example :
<!DOCTYPE html>
<html>
<head>
<title>HEX code</title>
</head>
<body>
<p style = "color : #2225b9;">This is #2225b9 color paragraph.</p>
</body>
</html>Output
This is #2225b9 color paragraph.
RGB Value
In RGB, R stands for Red, G stands for Green, and B stands for Blue. In this, we need to define 3 values indicating RGB color.
The range of each color is from 0 to 255.
For example : rgb(0,0,0) is Black color and rgb(255,255,255) is white color.
Syntax :
rgba(red, blue, green)
Example :
<!DOCTYPE html>
<html>
<head>
<title>RGB Value</title>
</head>
<body>
<p style = "color : rgb(205, 14, 14);">This is rgb(205, 14, 14) color paragraph.</p>
</body>
</html>Output
This is rgb(205, 14, 14) color paragraph.
RGBA Value
In RGBA, R stands for Red, G stands for Green, B stands for Blue, and A stands for Alpha (opacity).
Alpha property allows us to make the color transparent. Alpha represents the degree of transparency. In this, we need to define 4 values indicating RGBA color. The range of red, green, and blue color is from 0 to 255 and that of alpha is from 0 to 1.
For example : rgba(0,0,0,1) is Black color and rgba(255,255,255,1) is white color.
Syntax :
rgba(red, blue, green, alpha)
Example :
<!DOCTYPE html>
<html>
<head>
<title>RGBA Value</title>
</head>
<body>
<p style = "color : rgba(213, 224, 0, 1);">This is rgba(213, 224, 0, 1) color paragraph.</p>
</body>
</html>Output
This is rgba(213, 224, 0, 1) color paragraph.
HSL Value
In HSL, H stands for hue, S stands for saturation, and L stands for lightness.
Syntax :
hsl(hue, saturation, lightness)
HSL Color values
- Hue : Hue is the color of the image. Its range is from 0 to 360. Here, 0 is for red, 120 is for green, and 240 is for blue.
- Saturation : Saturation is the intensity/clarity of the hue. Here, 0% is for a light shade of gray and 100% is for gray color. When color is fully saturated, the color is considered is in the full version.
- Lightness : Lightness is the color space’s brightness. Here, 0% is for Black, and 100% is for white.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HSL Value</title>
</head>
<body>
<p style = "color : hsla(308, 100%, 44%, 1)">This is hsla(308, 100%, 44%, 1) color paragraph.</p>
</body>
</html>Output
This is hsla(308, 100%, 44%, 1) color paragraph.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Colors in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Lists.