</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