The Developer Brains


CSS3 COLOR PROPERTY

Web Designing | Web Development


SEE MORE














</CSS3 COLOR>




How to use CSS3 colors on web pages?

CSS3 contains color property by using which we can add different colors on HTML text using internal, external, and inline Style Sheets.


SEE MORE




















</CSS3 Color Property>

Add attractive colors on your web pages


Color Property

You can change the color of texts by using CSS color property.
{color  :  red;}
          
property  value

Example

Here is a simple example of the color property
when we apply 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;}.

We will discuss more about background-color in upcoming tutorials



	<!DOCTYPE html>
<html>
	<head>
		<title>Button</title>
	</head>
<body>
<p type="submit" style="color:red;">
    TDB Tutorials
</p>
</body>
</html>



Try it Yourself







</CSS3 Color Codes>

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>



Try it Yourself





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>

	
	
	

Try it Yourself





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>

	
	
	

Try it Yourself


















CSS property {color : rgb(0,0,0,0.1)} is a type of .....

1. RGB Color Code
2. RGBA Color Code
3. HSL Color Code
4. HEX Code




Check Now



CSS3 QUIZ







Next: CSS3 Box Model


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers