ওয়েবসাইটকে ভালো লুক এবং ফিল দিতে কালার খুব গুরুত্বপূর্ণ।
হেক্স কোড (হেক্সাডেসিমাল কালার রিপ্রেজেন্টেশন)
একটি হেক্সাডেসিমাল একটি কালারের ৬-ডিজিট রিপ্রেজেন্টেশন। প্রথম দুটি ডিজিট (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() প্রপার্টি ব্যবহার করে নির্দিষ্ট করা হয়। এই প্রপার্টি তিনটি ভ্যালু নেয়, প্রতিটি রেড, গ্রিন, এবং ব্লুর জন্য। ভ্যালু ০ থেকে ২৫৫ এর মধ্যে একটি ইন্টিজার বা পারসেন্টেজ হতে পারে।
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' মানে hue, 'S' মানে saturation এবং 'L' মানে lightness।
এখন 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>
এটি নিচের আউটপুট দেবে:
