Categories
CSS

CSS Color Property in Hindi की हिंदी में जानकारी

आपने HTML Style Element द्वारा Webpages को Colorful बनाया होगा. लेकिन, Style Element से हमें मन चाहा परिणाम नहीं मिल पाता हैं.

लेकिन, CSS द्वारा हम मन चाहा परिणाम प्राप्त कर सकते हैं. इसके लिए CSS Color Property का जन्म हुआ हैं. CSS Color द्वारा हम अपनी पसंद के अनुसार Color Setting कर सकते हैं. इस Tutorial में हम आपको CSS Color की पूरी जानकारी दे रहे हैं. अध्ययन की सुविधा के लिए CSS Color Tutorial को निम्न Sections में बांटा गया हैं.

CSS Color का परिचय

CSS में Color Declare करने के लिए Color Property का इस्तेमाल किया जाता हैं. CSS द्वारा आप Foreground और Background दोनों के लिए Color Declare कर सकते हैं.

Foreground Color से हमारा मतलब Font Color, Border Color, Outlines, Text Color आदि Elements की Color Settings से हैं. आप आसानी से किसी भी HTML Element के लिए Color Declare कर सकते हैं.

CSS Color Add करने की विभिन्न विधियाँ

Color Declare करने के बहुत तरीके हैं. लेकिन, सभी तरीके सभी Browsers द्वारा Support नही किए जाते हैं. इसलिए हम यहाँ तीन प्रचलित तरीकों के बारे में बता रहे हैं. ये तरीके सभी ब्राउजरों द्वारा Support किए जाते हैं.

CSS Color Add करने के तीन प्रचलित तरीके:

  1. Hex Value
  2. RGB Value
  3. Color Name

Hex Value द्वारा Color Add करना

Hex का मतलब होता हैं Hexadecimal. Hexadecimal Code एक 6 अंकों का कोड होता हैं. जिसमें क्रमश: Red, Green और Blue Colors की Hex Value होती हैं. पहले दो अंक Red, मध्य के दो अंक Green और अंतिम दो अंक Blue को Represent करते हैं.

Hexadecimal Value Alphanumeric होती हैं. जिसमें Alphabets और Numbers दोनों शामिल होते हैं. आप Hex Value को Lowercase या Uppercase दोनों में से किसी भी प्रकार में लिख सकते हैं. चुंकि Lowercase लिखने में आसान होता हैं और Uppercase पढने में आसान रहता हैं. पसंद आपको करनी हैं.

इसे Try कीजिए

p {
color: #000000;
}

 

h1 {
color:#000;
}

ऊपर हमने Paragraph Element की Color को Black Set किया हैं. जिसकी Hex Value #000000 होती हैं. और Heading Element का Color भी Black Declare किया हैं. लेकिन, आप देख रहे कि इसमे सिर्फ 3 Hex Value ही लिखि हुई हैं. इसे Short Hex Value कहते हैं. इसे भी ब्राउजर #000000 की तरह ही समझता हैं. आप भी इसी तरह किसी भी Element के लिए Color Declare कर सकते हैं.

RGB Value द्वारा Color Add करना

RGB तीन शब्दों से बना हैं. जिसमें R का मतलब Red, G का मतलब Green और B का मतलब Blue होता हैं. RGB द्वारा Colors की RGB Value को लिखा जाता हैं. आप RGB Value को प्रतिशत में भी Declare कर सकते हैं.

RGB द्वारा 0 से 255 के बीच में किसी Color की Intensity दर्शायी जाती हैं. आप जितनी ज्यादा Value किसी Color की Declare करेंगे वह Color उतना ही ज्यादा Color में दिखाई देंगा.

इसे Try कीजिए

p {
color: rgb(255,0,0);
}

 

ऊपर हमने Paragraph Element का Color Red Declare किया हैं. जिसमें Red की Intensity Full यानि 255 हैं, और बाकि Colors की Intensity शून्य हैं. आप इसी Mix करके अपने लिए मनचाहा कलर बना सकते हैं.

Hex और RGB Color Code कहाँ से प्राप्त करें?

ये प्रशन आना स्वाभाविक हैं कि हम Hex Value और RGB Value कैसे बनाये? या कहीं से बनी बनाई मिल सकती हैं?

आप Colors की Hex Value और RGB Value बहुत सारे ऑनलाईन Color Mixers के द्वारा बना सकते हैं. आपको Color Mixer Tool मुफ्त में मिल जाएंगे. जाएंगे से आप अपने लिए मन पसंद कलर बना सकते हैं.

अगर आप Online Color Mixers का इस्तेमाल करना नहीं चाहते हैं. तो आप कुछ Graphics Tools जैसे Adobe Photoshop, MS Paint के Color Tool द्वारा ये Value बना सकते हैं.

Color Name

आप Color Value को Color Name से भी Declare कर सकते हैं. जो सबसे आसान तरीका हैं. लेकिन, आप सभी Colors को उनके नाम से Declare नहीं कर सकते हैं. और ना ही ऐसा करना संभव हैं.

Color को उनके नाम से Declare करना सरल तो हैं, मगर Color Name को सभी ब्राउजर Support नहीं करते हैं. इसलिए इस विधि को ज्यादा इस्तेमाल नहीं किया जाता हैं.

इसका एक कारण ये भी हैं हम इंसान Colors के नाम भी याद नहीं रख सकते हैं. और सभी Colors को नाम भी नही दिया जा सकता हैं. क्योंकि Colors की संभावित संख्या 255x255x255 के बराबर होती हैं.

W3C – World Wide Web Consortium द्वारा लगभग 140 Colors को Standard Color माना गया हैं. इनकी संख्या में लगातार इजाफा भी हो रहा हैं. इन Colors को सभी ब्राउजरों द्वारा Support किया जाता हैं. इन सभी Standard Colors का नाम उनके Hex Value के साथ नीचे दिया जा रहा हैं.

Name of Commonly Use CSS Color

  1. AliceBlue – #F0F8FF
  2. AntiqueWhite – #FAEBD7
  3. Aqua – #00FFFF
  4. Aquamarine – #7FFFD4
  5. Azure – #F0FFFF
  6. Beige – #F5F5DC
  7. Bisque – #FFE4C4
  8. Black – #000000
  9. BlanchedAlmond – #FFEBCD
  10. Blue – #0000FF
  11. BlueViolet – #8A2BE2
  12. Brown – #A52A2A
  13. BurlyWood – #DEB887
  14. CadetBlue – #5F9EA0
  15. Chartreuse – #7FFF00
  16. Chocolate – #D2691E
  17. Coral – #FF7F50
  18. CornflowerBlue – #6495ED
  19. Cornsilk – #FFF8DC
  20. Crimson – #DC143C
  21. Cyan – #00FFFF
  22. DarkBlue – #00008B
  23. DarkCyan – #008B8B
  24. DarkGoldenRod – #B8860B
  25. DarkGray – #A9A9A9
  26. DarkGrey – #A9A9A9
  27. DarkGreen – #006400
  28. DarkKhaki – #BDB76B
  29. DarkMagenta – #8B008B
  30. DarkOliveGreen – #556B2F
  31. DarkOrange – #FF8C00
  32. DarkOrchid – #9932CC
  33. DarkRed – #8B0000
  34. DarkSalmon – #E9967A
  35. DarkSeaGreen – #8FBC8F
  36. DarkSlateBlue – #483D8B
  37. DarkSlateGray – #2F4F4F
  38. DarkSlateGrey – #2F4F4F
  39. DarkTurquoise – #00CED1
  40. DarkViolet – #9400D3
  41. DeepPink – #FF1493
  42. DeepSkyBlue – #00BFFF
  43. DimGray – #696969
  44. DimGrey – #696969
  45. DodgerBlue – #1E90FF
  46. FireBrick – #B22222
  47. FloralWhite – #FFFAF0
  48. ForestGreen – #228B22
  49. Fuchsia – #FF00FF
  50. Gainsboro – #DCDCDC
  51. GhostWhite – #F8F8FF
  52. Gold – #FFD700
  53. GoldenRod – #DAA520
  54. Gray – #808080
  55. Grey – #808080
  56. Green – #008000
  57. GreenYellow – #ADFF2F
  58. HoneyDew – #F0FFF0
  59. HotPink – #FF69B4
  60. IndianRed – #CD5C5C
  61. Indigo – #4B0082
  62. Ivory – #FFFFF0
  63. Khaki – #F0E68C
  64. Lavender – #E6E6FA
  65. LavenderBlush – #FFF0F5
  66. LawnGreen – #7CFC00
  67. LemonChiffon – #FFFACD
  68. LightBlue – #ADD8E6
  69. LightCoral – #F08080
  70. LightCyan – #E0FFFF
  71. LightGoldenRodYellow – #FAFAD2
  72. LightGray – #D3D3D3
  73. LightGrey – #D3D3D3
  74. LightGreen – #90EE90
  75. LightPink – #FFB6C1
  76. LightSalmon – #FFA07A
  77. LightSeaGreen – #20B2AA
  78. LightSkyBlue – #87CEFA
  79. LightSlateGray – #778899
  80. LightSlateGrey – #778899
  81. LightSteelBlue – #B0C4DE
  82. LightYellow – #FFFFE0
  83. Lime – #00FF00
  84. LimeGreen – #32CD32
  85. Linen – #FAF0E6
  86. Magenta – #FF00FF
  87. Maroon – #800000
  88. MediumAquaMarine – #66CDAA
  89. MediumBlue – #0000CD
  90. MediumOrchid – #BA55D3
  91. MediumPurple – #9370DB
  92. MediumSeaGreen – #3CB371
  93. MediumSlateBlue – #7B68EE
  94. MediumSpringGreen – #00FA9A
  95. MediumTurquoise – #48D1CC
  96. MediumVioletRed – #C71585
  97. MidnightBlue – #191970
  98. MintCream – #F5FFFA
  99. MistyRose – #FFE4E1
  100. Moccasin – #FFE4B5
  101. NavajoWhite – #FFDEAD
  102. Navy – #000080
  103. OldLace – #FDF5E6
  104. Olive – #808000
  105. OliveDrab – #6B8E23
  106. Orange – #FFA500
  107. OrangeRed – #FF4500
  108. Orchid – #DA70D6
  109. PaleGoldenRod – #EEE8AA
  110. PaleGreen – #98FB98
  111. PaleTurquoise – #AFEEEE
  112. PaleVioletRed – #DB7093
  113. PapayaWhip – #FFEFD5
  114. PeachPuff  – #FFDAB9
  115. Peru – #CD853F
  116. Pink – #FFC0CB
  117. Plum – #DDA0DD
  118. PowderBlue – #B0E0E6
  119. Purple – #800080
  120. RebeccaPurple – #663399
  121. Red – #FF0000
  122. RosyBrown – #BC8F8F
  123. RoyalBlue – #4169E1
  124. SaddleBrown – #8B4513
  125. Salmon – #FA8072
  126. SandyBrown – #F4A460
  127. SeaGreen – #2E8B57
  128. SeaShell – #FFF5EE
  129. Sienna – #A0522D
  130. Silver – #C0C0C0
  131. SkyBlue – #87CEEB
  132. SlateBlue – #6A5ACD
  133. SlateGray – #708090
  134. SlateGrey – #708090
  135. Snow – #FFFAFA
  136. SpringGreen – #00FF7F
  137. SteelBlue – #4682B4
  138. Tan – #D2B48C
  139. Teal – #008080
  140. Thistle – #D8BFD8
  141. Tomato – #FF6347
  142. Turquoise – #40E0D0
  143. Violet – #EE82EE
  144. Wheat – #F5DEB3
  145. White – #FFFFFF
  146. WhiteSmoke – #F5F5F5
  147. Yellow – #FFFF00
  148. YellowGreen – #9ACD32

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS Color Property के बारे में जानकारी दी हैं. आपने विभिन्न तरीकों से HTML Documents में CSS Color Add करना भी सीखा हैं. और ज्यादा उपयोग होने वाले Colors के नाम की भी जानकारी प्राप्त की हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

#BeDigital

लेख आपको पसंद आया?
👍👎

By TP Staff

लेखक: TP Staff

TP Staff, TutorialPandit की कम्प्यूटर और टेक्नोलॉजी पेशेवरों की टीम है, जिसका नेतृत्व जी पी गौतम द्वारा किया जाता है. TutorialPandit के माध्यम से भारत देश में हर साल लाखों लोग फ्री डिजिटल शिक्षा ग्रहण कर रहे है.

Leave a Reply

Your email address will not be published. Required fields are marked *