You must have made the web pages colorful by HTML Style Element. But, we do not get the desired result from the Style Element.
But, with CSS we can get the desired result. For this, the CSS Color Property was born. By CSS Color, we can set the color according to our choice. In this tutorial, we are giving you complete information about CSS Color. For the convenience of study, CSS Color Tutorial is divided into the following sections.
Table of Contents
- Introduction to CSS Color
- Different Methods to Use CSS Color
- Hex Value
- RGB Value
- Where to get Hex and RGB Color Codes?
- Color Name
- Name of Commonly Use CSS Colors.
- What have you learned?
Introduction to CSS Color
The color property is used to declare a color in CSS. By CSS, you can declare color for both foreground and background.
By Foreground Color, we mean the Color Settings of Elements like Font Color, Border Color, Outlines, Text Color, etc. You can easily declare color for any HTML element.
Different Methods to Add CSS Color
There are many ways to declare color. But, not all methods are supported by all browsers. That’s why we are telling about three popular methods here. These methods are supported by all browsers. Take html and css training in Delhi from the best web design and web development institute…
Because with CSS we can get the desired result. For this, the CSS Color Property was born. By CSS Color, we can set the color according to our choice. In this tutorial, we are giving you complete information about CSS Color. For the convenience of study, CSS Color Tutorial is divided into the following sections.
Three popular ways to add CSS Color:
- Hex Value
- RGB Value
- Color Name
Adding Color by Hex Value
Hex means Hexadecimal. Hexadecimal code is a 6 digit code. In which there are Hex Values of Red, Green, and Blue Colors respectively. The first two digits represent Red, the middle two digits Green and the last two digits represent Blue.
Hexadecimal values are alphanumeric. Which includes both Alphabets and Numbers. You can write Hex Value is either Lowercase or Uppercase type. Because Lowercase is easy to write and Uppercase is easy to read. You have to like it.
try it
p {
color: #000000;
,
h1 {
color:#000;
,
Above we have set the Color of the Paragraph Element to Black. Whose Hex Value is #000000. And the color of the Heading Element has also been declared Black. But, you see that only 3 Hex Values are written in it. This is called the Short Hex Value. Browsers also understand this as #000000. You can also declare color for any element in the same way.
Adding Color by RGB Value
RGB is made up of three words. In which R means Red, G means Green and B means Blue. The RGB value of the colors is written by RGB. You can also declare the RGB value in percentage.
RGB shows the intensity of a color between 0 and 255. The more value you declare for color, the more that color will appear in the color.
try it
p {
color: rgb(255,0,0);
,
Above we have declared the color red of the paragraph element. In which the Intensity of Red is Full i.e. 255, and the Intensity of the rest of the Colors is zero. You can make the color you want by mixing this.
Where to get Hex and RGB Color Codes?
It is natural to come to this question that how do we make Hex Value and RGB Value? Or can it be made from anywhere?
You can create Hex Value and RGB Value of Colors using many online Color Mixers. And You will get Color Mixer Tool for free. Can make your choice of color from Jaanega.
If you do not want to use Online Color Mixers. So you can create this value with some Graphics Tools like Adobe Photoshop, MS Paint’s Color Tool. You can take photoshop classes near me …
Color Name
You can also declare Color Value by Color Name. Which is the easiest way. However, you cannot declare all the colors by their names. Nor is it possible to do so.
It is easy to declare a color by its name, but not all browsers support the color name. Therefore this method is not used much.
One reason for this is that we humans cannot even remember the names of colors. And not all colors can be named. Because the possible number of colors is equal to 255x255x255.
About 140 colors have been considered as standard colors by the W3C – World Wide Web Consortium. Their number is also increasing continuously. These colors are supported by all browsers. The names of all these Standard Colors along with their Hex Value are given below. If you want to become an expert in this field then you should take advanced HTML CSS classes or web development course from the best web design and web development institute…
Name of Commonly Use CSS Color
- AliceBlue – #F0F8FF
- AntiqueWhite – #FAEBD7
- Aqua – #00FFFF
- Aquamarine – #7FFFD4
- Azure – #F0FFFF
- Beige – #F5F5DC
- Bisque – #FFE4C4
- Black – #000000
- BlanchedAlmond – #FFEBCD
- Blue – #0000FF
- BlueViolet – #8A2BE2
- Brown – #A52A2A
- BurlyWood – #DEB887
- CadetBlue – #5F9EA0
- Chartreuse – #7FFF00
- Chocolate – #D2691E
- Coral – #FF7F50
- CornflowerBlue – #6495ED
- Cornsilk – #FFF8DC
- Crimson – #DC143C
- Cyan – #00FFFF
- DarkBlue – #00008B
- DarkCyan – #008B8B
- DarkGoldenRod – #B8860B
- DarkGray – #A9A9A9
- DarkGrey – #A9A9A9
- DarkGreen – #006400
- DarkKhaki – #BDB76B
- DarkMagenta – #8B008B
- DarkOliveGreen – #556B2F
- DarkOrange – #FF8C00
- DarkOrchid – #9932CC
- DarkRed – #8B0000
- DarkSalmon – #E9967A
- DarkSeaGreen – #8FBC8F
- DarkSlateBlue – #483D8B
- DarkSlateGray – #2F4F4F
- DarkSlateGrey – #2F4F4F
- DarkTurquoise – #00CED1
- DarkViolet – #9400D3
- DeepPink – #FF1493
- DeepSkyBlue – #00BFFF
- DimGray – #696969
- DimGrey – #696969
- DodgerBlue – #1E90FF
- FireBrick – #B22222
- FloralWhite – #FFFAF0
- ForestGreen – #228B22
- Fuchsia – #FF00FF
- Gainsboro – #DCDCDC
- GhostWhite – #F8F8FF
- Gold – #FFD700
- GoldenRod – #DAA520
- Gray – #808080
- Grey – #808080
- Green – #008000
- GreenYellow – #ADFF2F
- HoneyDew – #F0FFF0
- HotPink – #FF69B4
- IndianRed – #CD5C5C
- Indigo – #4B0082
- Ivory – #FFFFF0
- Khaki – #F0E68C
- Lavender – #E6E6FA
- LavenderBlush – #FFF0F5
- LawnGreen – #7CFC00
- LemonChiffon – #FFFACD
- LightBlue – #ADD8E6
- LightCoral – #F08080
- LightCyan – #E0FFFF
- LightGoldenRodYellow – #FAFAD2
- LightGray – #D3D3D3
- LightGrey – #D3D3D3
- LightGreen – #90EE90
- LightPink – #FFB6C1
- LightSalmon – #FFA07A
- LightSeaGreen – #20B2AA
- LightSkyBlue – #87CEFA
- LightSlateGray – #778899
- LightSlateGrey – #778899
- LightSteelBlue – #B0C4DE
- LightYellow – #FFFFE0
- Lime – #00FF00
- LimeGreen – #32CD32
- Linen – #FAF0E6
- Magenta – #FF00FF
- Maroon – #800000
- MediumAquaMarine – #66CDAA
- MediumBlue – #0000CD
- MediumOrchid – #BA55D3
- MediumPurple – #9370DB
- MediumSeaGreen – #3CB371
- MediumSlateBlue – #7B68EE
- MediumSpringGreen – #00FA9A
- MediumTurquoise – #48D1CC
- MediumVioletRed – #C71585
- MidnightBlue – #191970
- MintCream – #F5FFFA
- MistyRose – #FFE4E1
- Moccasin – #FFE4B5
- NavajoWhite – #FFDEAD
- Navy – #000080
- OldLace – #FDF5E6
- Olive – #808000
- OliveDrab – #6B8E23
- Orange – #FFA500
- OrangeRed – #FF4500
- Orchid – #DA70D6
- PaleGoldenRod – #EEE8AA
- PaleGreen – #98FB98
- PaleTurquoise – #AFEEE
- PaleVioletRed – #DB7093
- PapayaWhip – #FFEFD5
- PeachPuff – #FFDAB9
- Peru – #CD853F
- Pink – #FFC0CB
- Plum – #DDA0DD
- PowderBlue – #B0E0E6
- Purple – #800080
- RebeccaPurple – #663399
- Red – #FF0000
- RosyBrown – #BC8F8F
- RoyalBlue – #4169E1
- SaddleBrown – #8B4513
- Salmon – #FA8072
- SandyBrown – #F4A460
- SeaGreen – #2E8B57
- SeaShell – #FFF5EE
- Sienna – #A0522D
- Silver – #C0C0C0
- SkyBlue – #87CEEB
- SlateBlue – #6A5ACD
- SlateGray – #708090
- SlateGrey – #708090
- Snow – #FFFAFA
- SpringGreen – #00FF7F
- SteelBlue – #4682B4
- Tan – #D2B48C
- Teal – #008080
- Thistle – #D8BFD8
- Tomato – #FF6347
- Turquoise – #40E0D0
- Violet – #EE82EE
- Wheat – #F5DEB3
- White – #FFFFFF
- WhiteSmoke – #F5F5F5
- Yellow – #FFFF00
- YellowGreen – #9ACD32
What have you learned?
In this tutorial, we have given you information about CSS Color properties. You have also learned to add CSS color to HTML documents in different ways. Information has also been received about the names of the more commonly used colors. We hope that this tutorial will prove useful for you. I hope you liked this post and understood the CSS Color Property. Please share it with your friends on social media platforms so that others also get the benefits…
