HTML Color Styles

สีสำคัญมากสำหรับการให้ลักษณะที่ดีและรู้สึกดีต่อเว็บไซต์ของคุณ

Hex Code (การแทนสีแบบ Hexadecimal)

Hexadecimal เป็นการแทนสี 6 หลัก สองหลักแรก (RR) แทนค่าแดง สองหลักถัดไป (GG) แทนค่าสีเขียว และสองหลักสุดท้าย (BB) แทนค่าสีน้ำเงิน

ค่า hexadecimal สามารถได้จากซอฟต์แวร์กราฟิก เช่น Adobe Photoshop แต่ละ hexadecimal code จะนำหน้าด้วยเครื่องหมาย # ตัวอย่างสีบางสีด้วย hexadecimal notation:

มาดูตัวอย่างการใช้ Hex style ใน 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 Color Values

ค่า RGB color ถูกระบุด้วย property rgb() property นี้รับ 3 ค่า หนึ่งสำหรับแดง หนึ่งสำหรับเขียว หนึ่งสำหรับน้ำเงิน ค่าสามารถเป็น integer ระหว่าง 0 ถึง 255 หรือเปอร์เซ็นต์

ตัวอย่างสีบางสีที่แทนด้วย RGB:

มาดูตัวอย่างการใช้ RGB style ใน 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 Color Values

ด้วย HTML คุณยังสามารถตั้งค่า HUE ได้ คือ 'H' ย่อมาจาก hue, 'S' สำหรับ Saturation และ 'L' สำหรับ Lightness

มาดูตัวอย่างการใช้ HSL style ใน 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>

ผลลัพธ์: