CSS Color
CSS Color
In this tutorial we will learn CSS Color, types of using color in HTML how we color the HTML document’s elements. If you learn more about color, like how to use color in HTML Document such as background color, text color, border color, table color etc. visit and learn HTML Color Tutorial.
Types of color in CSS
CSS color are commonly specified using three types in HTML web pages, are as given below. And below learn CSS Color Table with all Color code.
- Color Name
- RGB Color Value
- Hexadecimal Color Value
We learn here all the three types of CSS Color and also see the programming example of these color value, now we will learn these color value one by one.
1. Color Name
It defines any colors by its color name, for example blue, red, golden etc. all color are uses by its name. We use this color name all types of Stylesheets of CSS, see below the example of Color Name.
Example CSS Color
 |
Programming Example Color Name (CSS)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of Color Name</title> <style type="text/css"> p{ color: red; } div{ background: yellowgreen; width: 50px; height: 50px; color:azure; text-align: center; } </style> </head> <body> <p>Learn CSS Color by its Name</p> <center><div> Color Name</div></center> </body> </html> |
Output of above Programming Example
 |
Above in programming example of Color Name you can see we define color by its name. you see in programming example we changed color of text and div background color by color name.
2. RGB Color Value
RGB color stands for Red, Green and Blue. It defines any valid color using the rgb(here value), see the format of RGB color value rgb(number, number, number) for example; rgb(255, 255, 0) it is yellow color, You can see below table of CSS color.
Example of RGB Color Value
 |
Programming Example RGB Color Value
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of RGB Color Value</title> <style type="text/css"> p{ color:rgb(0,0,128); } div{ background:rgb(255, 255, 0); width: 50px; height: 50px; color:rgb(255, 0, 0); text-align: center; } </style> </head> <body> <p>Learn CSS Color by its Name</p> <center><div> Color Name</div></center> </body> </html> |
Output of above Programming Example
 |
Above programming example, you can see we use the RGB color value for color the text and division.
3. Hexadecimal Color Value
Hexadecimal Color Value Is also known as Hex Color Value, it is defining any color by its hash followed by letter and number, for example; #00ffff, #808000 etc. You learn Color Name, Hex Color Value and RGB Color Value below the table of CSS color.
Example of Hex Color Value
 |
Programming Example of Hex Color Value
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of Hex color value</title> <style type="text/css"> p{ color:#ff00ff; } div{ background: #00ff00 ; width: 50px; height: 60px; color: #000000 ; text-align: center; } </style> </head> <body> <p>Learn CSS Hexadecimal Color Vlaue</p> <center><div> Hex color Value</div></center> </body> </html> |
Output of above Programming Example
 |
You can see the above programming example we changed the color or text and division by used of Hexadecimal Color Value.
CSS Color Table
Given below the CSS Color Table, most common CSS color with Color Name, Hexadecimal Color Value and RGB color value.
| COLOR | COLOR NAME | HEX COLOR VALUE | RGB COLOR VALUE |
| Black | #000000 | rgb(0,0,0) | |
| Red | #ff0000 | rgb(255,0,0) | |
| Gray | #808080 | rgb(128,128,128) | |
| White | #ffffff | rgb(255,255,255) | |
| Green | #008000 | rgb(0,128,0) | |
| Yellow | #ffff00 | rgb(255,255,0) | |
| Lime | #00ff00 | rgb(0,255,0) | |
| Navy | #000080 | rgb(0,0,128) | |
| Blue | #0000ff | rgb(0,0255) | |
| Purple | #800080 | rgb(128,0,128) | |
| Brown | #800000 | rgb(128,0,0) | |
| Silver | #C0C0C0 | rgb(192,192,192) | |
| Sky blue | #629DFC | rgb(98,157,252) | |
| Orange | #FFC301 | rgb(255,195,1) | |
| Fuchsia | #EB03F1 | rgb(235,3,241) | |
| Aqua | #71DAFF | rgb(113,218,255) | |
| French Blue | #0070C0 | rgb(0,112,192) |
Above you can see and learn the CSS Color Name with Hex Color value and RGB Color Value, in this tutorial we learned CSS Color and I hope you all learn this with entertain.
Next tutorial we will learn a new topic of CSS. Visit Learn HTML Color Tutorial.
Learn This-
59 Comments
zoritoler imol · July 3, 2022 at 3:06 am
I am extremely impressed together with your writing abilities as smartly as with the format for your blog. Is that this a paid subject or did you customize it yourself? Either way keep up the nice high quality writing, it’s uncommon to look a nice blog like this one these days..
Bennie Alea · September 23, 2022 at 2:39 pm
Hello there, I found your blog via Google while searching for a related topic, your website came up, it looks great. I’ve bookmarked it in my google bookmarks.
Psychic Medium · July 2, 2023 at 11:44 am
Yesterday, while I was at work, my cousin stole my iPad and tested to see if it can survive a forty foot drop, just so she can be a youtube sensation. My iPad is now destroyed and she has 83 views. I know this is totally off topic but I had to share it with someone!
link bokep · July 31, 2023 at 1:48 pm
Hey very cool blog!! Man .. Beautiful .. Amazing .. I will bookmark your site and take the feeds also?I’m happy to find numerous useful info here in the post, we need work out more strategies in this regard, thanks for sharing. . . . . .
merchant services business model · August 3, 2023 at 5:18 am
Wow! This can be one particular of the most useful blogs We have ever arrive across on this subject. Actually Great. I’m also a specialist in this topic so I can understand your hard work.
Tarot Readings · August 5, 2023 at 5:47 pm
Thanks for your article. One other thing is that individual states have their own laws that will affect householders, which makes it quite hard for the the legislature to come up with a fresh set of guidelines concerning property foreclosures on house owners. The problem is that each state possesses own laws which may have impact in a damaging manner in relation to foreclosure policies.
bingo plus · August 15, 2023 at 1:49 am
Thanks for discussing your ideas listed here. The other element is that each time a problem comes up with a pc motherboard, persons should not take the risk involving repairing the item themselves for if it is not done correctly it can lead to permanent damage to the full laptop. It is usually safe to approach any dealer of your laptop with the repair of motherboard. They’ve got technicians who have an skills in dealing with pc motherboard issues and can have the right diagnosis and accomplish repairs.
articol seo · August 27, 2023 at 4:08 pm
I have not checked in here for some time as I thought it was getting boring, but the last few posts are good quality so I guess I?ll add you back to my everyday bloglist. You deserve it my friend 🙂
nick difrancesco · October 1, 2023 at 5:35 am
hello!,I really like your writing very so much! share we be in contact extra approximately your post on AOL? I require an expert on this house to unravel my problem. May be that’s you! Having a look ahead to peer you.
Explore the Horizon · October 21, 2023 at 12:56 am
Good site! I really love how it is easy on my eyes and the data are well written. I’m wondering how I might be notified whenever a new post has been made. I have subscribed to your RSS which must do the trick! Have a nice day!
Explore the Horizon · October 27, 2023 at 12:04 pm
great post, very informative. I wonder why the other specialists of this sector don’t notice this. You must continue your writing. I am sure, you have a huge readers’ base already!
selling point of sale systems · November 5, 2023 at 5:40 pm
With havin so much written content do you ever run into any problems of plagorism or copyright infringement? My site has a lot of unique content I’ve either created myself or outsourced but it appears a lot of it is popping it up all over the internet without my permission. Do you know any methods to help protect against content from being stolen? I’d definitely appreciate it.
W88 แทงบอลออนไลน์ · November 6, 2023 at 8:38 pm
I want to express my gratitude for your kind and encouraging words in your reply on the blog. Thank you.
start a digital payments business · November 7, 2023 at 6:32 am
excellent post, very informative. I wonder why the other experts of this sector don’t notice this. You must continue your writing. I am confident, you have a huge readers’ base already!
bokep indo · November 23, 2023 at 9:16 pm
Thanks for these guidelines. One thing I should also believe is credit cards presenting a 0 interest rate often bait consumers with zero interest rate, instant endorsement and easy online balance transfers, nonetheless beware of the number one factor that will certainly void that 0 easy neighborhood annual percentage rate as well as throw one out into the very poor house fast.
plaster · December 9, 2023 at 2:03 pm
I think this is one of the most important information for me. And i am glad reading your article. But should remark on some general things, The website style is great, the articles is really great : D. Good job, cheers
abkslot · December 16, 2023 at 7:19 am
Heya i am for the primary time here. I came across this board and I to
find It really useful & it helped me out a lot. I hope to offer
something back and aid others like you aided me.
CruiseLove · January 18, 2024 at 11:01 pm
Great info. Lucky me I found your website by accident (stumbleupon). I’ve bookmarked it for later.
jewellery · February 3, 2024 at 7:32 pm
This website was… how do I say it? Relevant!! Finally I’ve found something which helped me. Many thanks.
100 5 current transformer · February 5, 2024 at 5:08 pm
This is really interesting, You are a very skilled blogger. I’ve joined your feed and look forward to seeking more of your excellent post. Also, I have shared your site in my social networks!
먹튀폴리스 · February 22, 2024 at 11:38 am
Thank you, I’ve been seeking for information about this subject matter for ages and yours is the best I have located so far.
buy betting links · February 24, 2024 at 11:47 am
Very good article. I definitely appreciate this site. Continue the good work!
coffee sample packs · February 24, 2024 at 4:22 pm
Saved as a favorite, I love your website!
Piano co · February 25, 2024 at 2:03 pm
Howdy! I simply would like to give you a huge thumbs up for your great info you have here on this post. I will be returning to your web site for more soon.
artificial intelligence lawyer · March 3, 2024 at 2:06 am
Greetings! Very helpful advice in this particular post! It’s the little changes that make the greatest changes. Thanks for sharing!
film porno · April 9, 2024 at 1:58 pm
Thanks for another informative blog. Where else could I get that type of information written in such an ideal way? I have a project that I am just now working on, and I have been on the look out for such information.
bokep indo · April 30, 2024 at 1:05 am
Thanks , I’ve just been searching for information about this topic for ages and yours is the greatest I’ve discovered till now. But, what about the conclusion? Are you sure about the source?
situs porno · April 30, 2024 at 8:42 am
My brother suggested I might like this web site. He was entirely right. This post truly made my day. You can not imagine simply how much time I had spent for this information! Thanks!
bokep indo · April 30, 2024 at 11:34 am
I do agree with all the ideas you’ve presented in your post. They’re very convincing and will definitely work. Still, the posts are very short for novices. Could you please extend them a bit from next time? Thanks for the post.
beveiligingscamera · May 5, 2024 at 8:28 pm
Good blog post. I certainly appreciate this website. Keep it up!
situs bokep · May 5, 2024 at 11:41 pm
Greetings from California! I’m bored to death at work so I decided to browse your site on my iphone during lunch break. I enjoy the info you provide here and can’t wait to take a look when I get home. I’m surprised at how quick your blog loaded on my cell phone .. I’m not even using WIFI, just 3G .. Anyways, very good blog!
Mortgage Lenders in Amarillo TX · May 6, 2024 at 5:47 am
I was able to find good advice from your blog articles.
https://msgromi.com · May 6, 2024 at 10:43 am
It’s wonderful that you are getting thoughts from this piece of writing as well as from our discussion made at this place.
Mortgage Lender in Dallas · May 6, 2024 at 3:04 pm
You have made some really good points there. I looked on the web to find out more about the issue and found most people will go along with your views on this website.
출장마사지 · May 6, 2024 at 3:12 pm
I don’t know whether it’s just me or if everyone else encountering
issues with your blog. It appears like some of the written text within your posts are running off the screen. Can somebody else please provide feedback and let me
know if this is happening to them as well? This might be a issue with my browser because I’ve had this
happen before. Appreciate it
tlover tonet · May 6, 2024 at 3:33 pm
Hello, you used to write magnificent, but the last several posts have been kinda boringK I miss your great writings. Past several posts are just a little bit out of track! come on!
bokep indo · May 6, 2024 at 4:42 pm
Excellent site. Lots of useful information here. I am sending it to a few friends ans additionally sharing in delicious. And obviously, thanks in your effort!
situs bokep · May 6, 2024 at 9:26 pm
Excellent blog here! Also your web site loads up fast! What host are you using? Can I get your affiliate link to your host? I wish my website loaded up as quickly as yours lol
영등포 마사지 · May 6, 2024 at 11:52 pm
Excellent blog here! Also your site a lot up very fast! What host are
you the usage of? Can I am getting your affiliate link on your host?
I wish my site loaded up as fast as yours lol
출장마사지 · May 7, 2024 at 1:40 am
Excellent way of explaining, and pleasant piece of writing to obtain facts
regarding my presentation subject, which i am going to
present in university.
kontol kuda · May 9, 2024 at 12:34 pm
You can certainly see your expertise in the work you write. The world hopes for even more passionate writers like you who are not afraid to say how they believe. Always go after your heart.
casca de copiat · May 9, 2024 at 4:08 pm
Your style is very unique compared to other people I have read stuff from. Thank you for posting when you have the opportunity, Guess I’ll just bookmark this page.
신촌출장안마 · May 25, 2024 at 2:56 pm
I’d like to thank you for the efforts you’ve put in writing
this website. I am hoping to check out the same high-grade content from you later
on as well. In fact, your creative writing abilities has encouraged me to get my own, personal website now
😉
Slacks For Women · May 25, 2024 at 4:33 pm
This is the correct blog for anybody who desires to seek out out about this topic. You notice a lot its almost arduous to argue with you (not that I actually would want?HaHa). You undoubtedly put a new spin on a topic thats been written about for years. Nice stuff, simply great!
안산출장마사지 · May 25, 2024 at 6:21 pm
I really like your blog.. very nice colors & theme. Did you make this
website yourself or did you hire someone to do it for you?
Plz respond as I’m looking to design my own blog
and would like to find out where u got this from.
thanks a lot
고양출장안마 · May 25, 2024 at 6:34 pm
Hi! Do you know if they make any plugins to protect against hackers?
I’m kinda paranoid about losing everything I’ve worked hard on.
Any tips?
PSL88 · June 18, 2024 at 11:28 am
This website certainly has all the info I wanted concerning this subject and didn’t know who to ask.
출장 오피 · June 18, 2024 at 2:55 pm
I don’t even understand how I stopped up here, but I assumed
this publish was great. I don’t recognize who you are however certainly you are going to a famous blogger in case you are not already.
Cheers!
benefits of executive coaching · June 18, 2024 at 3:10 pm
That is a very good tip especially to those new to the blogosphere. Short but very precise info… Thank you for sharing this one. A must read article!
선릉출장마사지 · June 30, 2024 at 7:46 pm
Link exchange is nothing else except it is just placing the other person’s weblog link on your page at
suitable place and other person will also do same in favor of you.
강남안마 · June 30, 2024 at 11:02 pm
Hello, Neat post. There’s a problem with your website in internet explorer, might test this?
IE still is the market chief and a huge component of other people will omit your fantastic writing due to this problem.
모텔출장마사지 · July 14, 2024 at 1:47 am
I’m gone to say to my little brother, that he should
also go to see this webpage on regular basis to obtain updated
from hottest reports.
richqueen login · July 14, 2024 at 6:04 pm
Hello There. I discovered your blog using msn. That is a very smartly written article. I?ll be sure to bookmark it and come back to read more of your useful information. Thanks for the post. I will definitely comeback.
인천마사지 · July 14, 2024 at 6:29 pm
Everything is very open with a precise clarification of the challenges.
It was truly informative. Your site is very helpful.
Thanks for sharing!
lago777.com · July 14, 2024 at 8:07 pm
Hello, Neat post. There is a problem together with your site in internet explorer, might test this? IE still is the market chief and a huge section of other people will omit your fantastic writing due to this problem.
금천구출장마사지 · July 14, 2024 at 9:26 pm
I am not sure where you are getting your info, but great
topic. I needs to spend some time learning much more or understanding more.
Thanks for great information I was looking for this information for my mission.
richqueen vip · July 15, 2024 at 1:58 am
I do not even know how I ended up here, but I thought this post was great. I do not know who you are but certainly you’re going to a famous blogger if you are not already 😉 Cheers!
모텔출장안마 · July 15, 2024 at 2:33 am
Excellent post. Keep posting such kind of information on your blog.
Im really impressed by it.
Hello there, You have performed an excellent job. I will definitely digg it and in my view suggest
to my friends. I am confident they will be benefited from this web site.
화곡동출장마사지 · July 23, 2024 at 9:25 am
Hi, I do think this is an excellent blog. I stumbledupon it 😉 I may come back yet again since i have book-marked it.
Money and freedom is the greatest way to change,
may you be rich and continue to help other people.