FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 494

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>

 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer