- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Defining Colors in CSS3
To define colors in CSS3, use RGB, RGBA, HSL and HSLA. With that, you can use the color value and hexadecimal value can also be used for defining colors −
The CSS3 RGBA color value is for Red, Green, Blue and Alpha. The alpha is the color opacity i.e. a number between 0.0 and 1.0. Here, 1.0 would be for full opaque. Here, we can see the difference in opacity created with the Alpha parameter in RGBA −
Example
Let us now see an example for RGBA color values −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color:rgba(108,111,35,0.6);}
#demo2 {background-color:rgba(108,111,35,0.5);}
#demo3 {background-color:rgba(108,111,35,0.4);}
#demo4 {background-color:rgba(108,111,35,0.3);}
#demo5 {background-color:rgba(108,111,35,0.2);}
#demo6 {background-color:rgba(108,111,35,0.1);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>Output
The CSS3 HSL is for Hue, Saturation and Lightness when color is set for elements. Hue value is from 0 to 260, wherein 0 or 360 is for red, 240 for bluw, whereas 120 for green. Saturation and Lightness is a percentage value.
Example
Let us now see an example for HSL color values −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsl(150, 100%, 50%);}
#demo2 {background-color: hsl(150, 100%, 50%);}
#demo3 {background-color: hsl(140, 100%, 40%);}
#demo4 {background-color: hsl(120, 100%, 40%);}
#demo5 {background-color: hsl(120, 100%, 30%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>Output
The HSLA color value is for Hue, Saturation, Lightness and Alpha. The alpha is the color opacity i.e. a number between 0.0 and 1.0. Here, 0.0 is for fiully transparent, whereas 1.0 would be for full opaque.
Example
Let us now see an example −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>Output
Example
Let us now see how to set colors with hexadecimal value −
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-color: #B13838;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>Output
- Related Questions & Answers
- Defining Keyframes in CSS3
- Arrange two or more colors in linear formats using CSS3 Gradients
- PHP Defining namespace
- Defining static members in C++
- Defining Class Methods in Perl
- Defining a Function in Python
- Defining new functions in Arduino
- Sort Colors in Python
- Defining Clean Up Actions in Python
- JavaScript - Complementary Colors Builder
- 3D transforms in CSS3
- 2D transforms in CSS3
- Defining a variable reference in SAP ABAP
- Defining user lock settings in SAP HANA
- PHP Defining Multiple Namespaces in same file