आपने HTML मे style attribute का इस्तेमाल करके web page को colorful बनाया होगा। लेकिन style attribute का इस्तेमाल करके आपको मन चाहा result नहीं मिला होगा।
लेकिन CSS का इस्तेमाल करके आप मन चाहा result को प्राप्त कर सकते है। इसके लिए आप CSS मे color property का इस्तेमाल कर सकते है। इस लेख मे हम CSS color के बारे मे detail मे बात करेंगे।
Introduction of color property in css
CSS मे color को declare करने के लिए color property का इस्तेमाल करते है। CSS के उपयोग से आप foreground( text color, font color, border color ) और background दोने के लिए color declare कर सकते है।
CSS colors को आप color name, Hex code या RGB value से declare कर सकते हो।
CSS Color name
CSS मे color को color name से declare किया जाता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h1 style="background-color:Tomato;">Tomato</h1> <h1 style="background-color:Blue;">Blue</h1> <h1 style="background-color:LightGray;">LightGray</h1> <h1 style="background-color:Green;">Green</h1> <h1 style="background-color:Gray;">Gray</h1> <h1 style="background-color:SlateBlue;">SlateBlue</h1> <h1 style="background-color:Violet;">Violet</h1> <h1 style="background-color:Orange;">Orange</h1> </body> </html>
W3C द्वारा 140 color को standard color माना गया है। आप Color name और उसकी HEX Value को W3schools पर से जान सकते है।
CSS HEX Value
CSS मे color को hex code से भी declare किया जाता है।
<!DOCTYPE html> <html> <body> <h1 style="background-color:#ff6347;">Tomato</h1> <h1 style="background-color:#0000FF;">Blue</h1> <h1 style="background-color:#D3D3D3;">LightGray</h1> <h1 style="background-color:#008000;">Green</h1> <h1 style="background-color:#808080;">Gray</h1> <h1 style="background-color:#6a5acd;">SlateBlue</h1> <h1 style="background-color:#EE82EE;">Violet</h1> <h1 style="background-color:#FFA500;">Orange</h1> </body> </html>
CSS RGB value
CSS मे color को RGB Value से भी declare किया जाता है।
<!DOCTYPE html> <html> <body> <h1 style="background-color:rgb(255,99,71);">Tomato</h1> <h1 style="background-color:rgb(0,0,255);">Blue</h1> <h1 style="background-color:rgb(211,211,211);">LightGray</h1> <h1 style="background-color:rgb(0,128,0)0;">Green</h1> <h1 style="background-color:rgb(128,128,128);">Gray</h1> <h1 style="background-color:rgb(106,90,205);">SlateBlue</h1> <h1 style="background-color:rgb(238,130,238);">Violet</h1> <h1 style="background-color:rgb(255,165,0);">Orange</h1> </body> </html>
CSS Text Color
आप CSS मे text के color को भी Change कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
margin-left: 50px;
}
p{
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>color property in CSS</p>
</body>
</html>
CSS Border Color
आप border के color को भी set कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
border: 2px solid Violet;
}
p{
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>color property in CSS</p>
</body>
</html>
Color name list with HEX Value
| Color name | HEX Value |
| 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 |
| DarkGray | #A9A9A9 |
| DarkGoldenRod | #B8860B |
| DarkGreen | #006400 |
| DarkKhaki | #BDB76B |
| DarkMagenta | #8B008B |
| DarkOliveGreen | #556B2F |
| DarkOrange | #FF8C00 |
| DarkOrchid | #9932CC |
| DarkRed | #8B0000 |
| DarkSalmon | #E9967A |
| DarkSeaGreen | #8FBC8F |
| DarkSlateBlue | #483D8B |
| DarkSlateGray | #2F4F4F |
| DarkTurquoise | #00CED1 |
| DarkViolet | #9400D3 |
| DeepPink | #FF1493 |
| DeepSkyBlue | #00BFFF |
| DimGray | #696969 |
| DodgerBlue | #1E90FF |
| FireBrick | #B22222 |
| FloralWhite | #FFFAF0 |
| ForestGreen | #228B22 |
| Fuchsia | #FF00FF |
| Gainsboro | #DCDCDC |
| GhostWhite | #F8F8FF |
| Gold | #FFD700 |
| GoldenRod | #DAA520 |
| Gray | #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 |
| LightGreen | #90EE90 |
| LightPink | #FFB6C1 |
| LightSalmon | #FFA07A |
| LightSeaGreen | #20B2AA |
| LightSkyBlue | #87CEFA |
| LightSlateGray | #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 | #AFEEEE |
| 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 |
| 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 |
इस तरह से आप text color, Border color, background color को बड़ी आसानी से CSS मे change कर सकते है। अगर अभी भी आपके मन मे कोई सवाल है तो आप नीचे comment box मे comment कर सकते है।