कलर्स आपकी वेबसाइट को अच्छा लुक एंड फील देने के लिए बहुत महत्वपूर्ण हैं।
हेक्स कोड (हेक्साडेसिमल कलर रिप्रेजेंटेशन)
एक हेक्साडेसिमल कलर का 6 अंकों का प्रतिनिधित्व है। पहले दो अंक (RR) लाल मान को दर्शाते हैं, अगले दो हरे मान (GG) को दर्शाते हैं, और अंतिम दो नीले मान (BB) को दर्शाते हैं।
हेक्साडेसिमल मान किसी भी ग्राफिक्स सॉफ्टवेयर जैसे Adobe Photoshop से लिया जा सकता है। प्रत्येक हेक्साडेसिमल कोड एक पाउंड या हैश साइन # से पहले होगा। हेक्साडेसिमल नोटेशन का उपयोग करके कुछ रंगों की सूची निम्नलिखित है। हेक्साडेसिमल रंगों के कुछ उदाहरण निम्नलिखित हैं:
आइए HTML में हेक्स स्टाइल को लागू करने का एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 2px solid black; } </style> </head> <body> <h2>Result</h2> <table> <colgroup> <col span = "3" style = "background-color:#00FF00;"> <col style = "background-color:#00FFFF;"> </colgroup> <tr> <th>Id</th> <th>Name</th> <th>Percentage</th> <th>Rank</th> </tr> <tr> <td>009</td> <td>Tom</td> <td>98</td> <td>1</td> </tr> <tr> <td>011</td> <td>Kieron</td> <td>97</td> <td>2</td> </tr> <tr> <td>039</td> <td>Gayle</td> <td>95</td> <td>3</td> </tr> <tr> <td>017</td> <td>Shaun</td> <td>92</td> <td>4</td> </tr> <tr> <td>009</td> <td>Kane</td> <td>91</td> <td>5</td> </tr> <tr> <td>025</td> <td>Steve</td> <td>87</td> <td>6</td> </tr> <tr> <td>013</td> <td>Jack</td> <td>85</td> <td>7</td> </tr> <tr> <td>023</td> <td>Tim</td> <td>84</td> <td>8</td> </tr> </table> </body> </html>
आउटपुट
RGB कलर वैल्यूज
RGB कलर वैल्यू को rgb() प्रॉपर्टी का उपयोग करके निर्दिष्ट किया जाता है। यह प्रॉपर्टी तीन मान लेती है, लाल, हरे और नीले के लिए एक-एक। मान 0 और 255 के बीच एक पूर्णांक या प्रतिशत हो सकता है।
RGB के साथ दर्शाए गए कुछ रंग निम्नलिखित हैं:
आइए HTML में रंगों को दर्शाने के लिए RGB स्टाइल को लागू करने का एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 2px solid black; } </style> </head> <body> <h2>Result</h2> <table> <colgroup> <col span = "3" style = "background-color:rgb(255,0,0);"> <col style = "background-color:rgb(255,255,0);"> </colgroup> <tr> <th>Id</th> <th>Name</th> <th>Percentage</th> <th>Rank</th> </tr> <tr> <td>009</td> <td>Tom</td> <td>98</td> <td>1</td> </tr> <tr> <td>011</td> <td>Kieron</td> <td>97</td> <td>2</td> </tr> <tr> <td>039</td> <td>Gayle</td> <td>95</td> <td>3</td> </tr> <tr> <td>017</td> <td>Shaun</td> <td>92</td> <td>4</td> </tr> <tr> <td>009</td> <td>Kane</td> <td>91</td> <td>5</td> </tr> <tr> <td>025</td> <td>Steve</td> <td>87</td> <td>6</td> </tr> <tr> <td>013</td> <td>Jack</td> <td>85</td> <td>7</td> </tr> <tr> <td>023</td> <td>Tim</td> <td>84</td> <td>8</td> </tr> </table> </body> </html>
आउटपुट
HSL कलर वैल्यूज
HTML के साथ, आप HUE भी सेट कर सकते हैं यानी 'H' ह्यू के लिए है, 'S' सैचुरेशन के लिए और 'L' लाइटनेस के लिए।
आइए HTML में रंगों को दर्शाने के लिए HSL स्टाइल को लागू करने का एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 2px solid black; } </style> </head> <body> <h2>Result</h2> <table> <colgroup> <col span = "3" style = "background-color: hsl(300, 75%, 85%); "> <col style = "background-color: hsl(200, 30%, 40%);"> </colgroup> <tr> <th>Id</th> <th>Name</th> <th>Percentage</th> <th>Rank</th> </tr> <tr> <td>009</td> <td>Tom</td> <td>98</td> <td>1</td> </tr> <tr> <td>011</td> <td>Kieron</td> <td>97</td> <td>2</td> </tr> <tr> <td>039</td> <td>Gayle</td> <td>95</td> <td>3</td> </tr> <tr> <td>017</td> <td>Shaun</td> <td>92</td> <td>4</td> </tr> <tr> <td>009</td> <td>Kane</td> <td>91</td> <td>5</td> </tr> <tr> <td>025</td> <td>Steve</td> <td>87</td> <td>6</td> </tr> <tr> <td>013</td> <td>Jack</td> <td>85</td> <td>7</td> </tr> <tr> <td>023</td> <td>Tim</td> <td>84</td> <td>8</td> </tr> </table> </body> </html>
यह निम्नलिखित आउटपुट देगा:
