<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Letter Size Color Chart</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
width: 100%;
height: 100vh;
table-layout: fixed;
}
td {
text-align: center;
vertical-align: middle;
color: #000;
font-weight: bold;
padding: 20px;
}
.label {
display: block;
font-size: 14px;
}
.hex {
display: block;
font-size: 12px;
}
</style>
</head>
<body>
<table>
<tr>
<td style="background:#B0E0E6">Powder Blue<span class="hex">#B0E0E6</span></td>
<td style="background:#4682B4; color:#fff;">Steel Blue<span class="hex">#4682B4</span></td>
<td style="background:#000080; color:#fff;">Navy<span class="hex">#000080</span></td>
<td style="background:#310C42; color:#fff;">Deep Indigo<span class="hex">#310C42</span></td>
</tr>
<tr>
<td style="background:#E6E6FA">Lavender<span class="hex">#E6E6FA</span></td>
<td style="background:#9966CC; color:#fff;">Amethyst<span class="hex">#9966CC</span></td>
<td style="background:#7851A9; color:#fff;">Royal Purple<span class="hex">#7851A9</span></td>
<td style="background:#8F00FF; color:#fff;">Violet<span class="hex">#8F00FF</span></td>
</tr>
<tr>
<td style="background:#FFDAB9">Flame Peach<span class="hex">#FFDAB9</span></td>
<td style="background:#FBCEB1">Apricot<span class="hex">#FBCEB1</span></td>
<td style="background:#FFBF00">Amber<span class="hex">#FFBF00</span></td>
<td style="background:#CC5500; color:#fff;">Deep Burnt Orange<span class="hex">#CC5500</span></td>
</tr>
<tr>
<td style="background:#C2B280">Sand<span class="hex">#C2B280</span></td>
<td style="background:#D2B48C">Tan<span class="hex">#D2B48C</span></td>
<td style="background:#954535; color:#fff;">Chestnut<span class="hex">#954535</span></td>
<td style="background:#3F2109; color:#fff;">Dark Chocolate<span class="hex">#3F2109</span></td>
</tr>
<tr>
<td style="background:#FFFACD">Pale Lemon<span class="hex">#FFFACD</span></td>
<td style="background:#EAA221">Marigold<span class="hex">#EAA221</span></td>
<td style="background:#DAA520">Goldenrod<span class="hex">#DAA520</span></td>
<td style="background:#DFFF00">Neon Yellow<span class="hex">#DFFF00</span></td>
</tr>
<tr>
<td style="background:#87CEEB">Sky Blue<span class="hex">#87CEEB</span></td>
<td style="background:#40E0D0">Turquoise<span class="hex">#40E0D0</span></td>
<td style="background:#008080; color:#fff;">Teal<span class="hex">#008080</span></td>
<td style="background:#00FFFF">Electric Cyan<span class="hex">#00FFFF</span></td>
</tr>
<tr>
<td style="background:#FFD4C4">Pink Coral<span class="hex">#FFD4C4</span></td>
<td style="background:#FF2400; color:#fff;">Scarlet<span class="hex">#FF2400</span></td>
<td style="background:#DC143C; color:#fff;">Crimson<span class="hex">#DC143C</span></td>
<td style="background:#660000; color:#fff;">Blood Red<span class="hex">#660000</span></td>
</tr>
<tr>
<td style="background:#98FF98">Mint<span class="hex">#98FF98</span></td>
<td style="background:#B2AC88">Sage<span class="hex">#B2AC88</span></td>
<td style="background:#228B22; color:#fff;">Forest Green<span class="hex">#228B22</span></td>
<td style="background:#50C878">Emerald<span class="hex">#50C878</span></td>
</tr>
</table>
</body>
</html>