Màu sắc rất quan trọng để mang lại giao diện đẹp cho trang web của bạn.
Mã hệ thập lục phân (Biểu thị màu hệ thập lục phân)
Hệ thập lục phân là biểu diễn màu gồm 6 chữ số. Hai chữ số đầu tiên (RR) biểu thị giá trị màu đỏ, hai chữ số tiếp theo là giá trị màu xanh lá cây (GG) và chữ số cuối cùng là giá trị màu xanh lam (BB).
Giá trị thập lục phân có thể được lấy từ bất kỳ phần mềm đồ họa nào như Adobe Photoshop. Mỗi mã thập lục phân sẽ được đặt trước dấu thăng hoặc dấu thăng #. Sau đây là danh sách một số màu sử dụng ký hiệu thập lục phân. Sau đây là một số ví dụ về màu thập lục phân -
Hãy để chúng tôi xem một ví dụ để triển khai kiểu Hex trong HTML để biểu thị màu sắc -
Ví dụ
<!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> Đầu ra
Giá trị màu RGB
Giá trị màu RGB được chỉ định bằng thuộc tính rgb (). Thuộc tính này nhận ba giá trị, mỗi giá trị cho màu đỏ, xanh lục và xanh lam. Giá trị có thể là một số nguyên từ 0 đến 255 hoặc một phần trăm.
Sau đây là một số màu được biểu thị bằng RGB -
Hãy để chúng tôi xem một ví dụ để triển khai kiểu RGB trong HTML để biểu thị màu sắc -
Ví dụ
<!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> Đầu ra
Giá trị màu HSL
Với HTML, bạn cũng có thể đặt HUE, tức là ‘H’ là viết tắt của màu sắc, ‘S’ là độ bão hòa và ‘L’ là độ sáng.
Hãy để chúng tôi xem một ví dụ để triển khai kiểu HSL trong HTML để biểu thị màu sắc -
Ví dụ
<!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> Điều này sẽ tạo ra kết quả sau -
