How to use CSS3 colors on web pages?
2021-11-16 11:10 · 7 min read
CSS3 contains color property by using which we can add different colors on HTML text using internal, external, and inline Style Sheets.
Color Property
You can change the color of texts by using the CSS color property.
{color : red;}
/*property:value*/
Example
Here is a simple example of the color property
when we apply the color property on <p> Tag, then the text color change to red color. we can't use the color property to change the background color. If you want to change background-color then we can use background-color property {background-color: red;}.
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
</head>
<body>
<p type="submit" style="color:red;">
TDB Tutorials
</p>
</body>
</html>We use different color codes on our web page
CSS3 Color Codes
Some popular color codes are
- RGB Value
- HEX Code
- HSL Code
RGB Values
The RGB color model uses 3 colors red, green, and blue color. These colors are added together to reproduce a broad array of colors.
{color : rgb(0,0,0)}
property value
rgb(0,0,0)
produces Black Color
RGBA Values
rgba() function define colors using the Red-green-blue-alpha model. Here alpha which specifies the opacity of the color.
{color : rgb(0,0,0,0.1)}
property value
Range of Alpha
0 to 1
<!DOCTYPE html>
<html>
<head>
<style>
.tdb-school{color:rgb(255,255,255);
background-color:rgb(0,0,0);
padding:10px 35px;
border:none;
border-radius:5px}
h2{color:rgb(0,0,0,.5);}
</style>
</head>
<!--Body-->
<body>
<h2>This is a button<h2>
<button type="submit" class="tdb-school">
Press
</button>
</body>
</html>
Hex Code
A color hex code is a way of specifying color using hexadecimal values. The code itself is a hex triplet, which represents three separate values that specify the levels of the component colors
{color : #000000}
property value
#000000 produces Black Color
Example
#000000-> black color
#ffffff-> white color
#ff0000-> red color
#008000-> green color
#0000ff-> blue color
<head>
<style>
.tdb-school{color:#ffffff;background-color:#000000;padding:10px 35px;border:none;border-radius:5px}
</style>
</head>
<!--Body-->
<body>
<button type="submit" class="tdb-school">
Press
</button>
</body>
Hue, Saturation, Lightness
HSL (Hue, Saturation, Lightness) is the color representation. It is user-friendly because without a big knowledge, you can imagine how specific color looks like.
{color : hsl(0,0%,0%)}
property value
hsl(0,0%,0%) produces Black Color
Example
hsl(0,0%,0%)-> black color
hsl(0,0%,100%)-> white color
hsl(0,100%,50%)-> red color
hsl(120,100%,50%)-> green color
hsl(240,100%,50%)-> blue color
<head>
<style>
.tdb-school{color:hsl(0,0%,100%);background-color:hsl(0,0%,0%);padding:10px 35px;border:none;border-radius:5px}
</style>
</head>
<!--Body-->
<body>
<button type="submit" class="tdb-school">
Press
</button>
</body>
