สีมีความสำคัญมากในการทำให้เว็บไซต์ของคุณดูดี
รหัสฐานสิบหก (การแสดงสีฐานสิบหก)
เลขฐานสิบหกคือการแสดงสี 6 หลัก ตัวเลขสองหลักแรก (RR) แทนค่าสีแดง สองหลักถัดไปคือค่าสีเขียว (GG) และค่าสุดท้ายคือค่าสีน้ำเงิน (BB)
ค่าเลขฐานสิบหกสามารถนำมาจากซอฟต์แวร์กราฟิกใดๆ เช่น Adobe Photoshop แต่ละรหัสเลขฐานสิบหกจะขึ้นต้นด้วยปอนด์หรือเครื่องหมายแฮช # ต่อไปนี้คือรายการสีสองสามสีที่ใช้สัญกรณ์ฐานสิบหก ต่อไปนี้เป็นตัวอย่างสีเลขฐานสิบหก -
เรามาดูตัวอย่างการใช้รูปแบบ Hex ใน 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 −
ให้เรามาดูตัวอย่างการใช้รูปแบบ RGB ใน 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: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' แทนความอิ่มตัว และ 'L' สำหรับความสว่าง
ให้เรามาดูตัวอย่างการใช้รูปแบบ HSL ใน 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: 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>
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -