<table border>
<thead>
<tr>
<th>Color</th>
<th>Color variable</th>
<th>HEX/RGBA Code<br><small>(For reference! Use variables)</small></th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color: var(--w3c-classic)"></td>
<td>--w3c-classic</td>
<td>#005A9C</td>
<td>Header color, link color</td>
</tr>
<tr>
<td style="background-color: var(--w3c-blue)"></td>
<td>--w3c-blue</td>
<td>#003366</td>
<td>Some other colors, navigation</td>
</tr>
<tr>
<td style="background-color: var(--wai-green)"></td>
<td>--wai-green</td>
<td>#005A6A</td>
<td>For headings, some interactive elements</td>
</tr>
<tr>
<td style="background-color: var(--off-black);"></td>
<td>--off-black</td>
<td>#1d1d1d</td>
<td>Main text color</td>
</tr>
<tr>
<td style="background-color: var(--dk-grey)"></td>
<td>--dk-grey</td>
<td>#3b3b3b</td>
<td>Footer color</td>
</tr>
<tr>
<td style="background-color: var(--faded-red);"></td>
<td>--faded-red</td>
<td>#c0272d</td>
<td rowspan="8">Decorative Colors</td>
</tr>
<tr>
<td style="background-color: var(--red-subtle);"></td>
<td>--red-subtle</td>
<td>#f1d0e1</td>
</tr>
<tr>
<td style="background-color: var(--light-blue);"></td>
<td>--light-blue</td>
<td>#196cac</td>
</tr>
<tr>
<td style="background-color: var(--dk-blue);"></td>
<td>--dk-blue</td>
<td>#091832</td>
</tr>
<tr>
<td style="background-color: var(--gold);"></td>
<td>--gold</td>
<td>#eed009</td>
</tr>
<tr>
<td style="background-color: var(--ocean);"></td>
<td>--ocean</td>
<td>#00818d</td>
</tr>
<tr>
<td style="background-color: var(--cloudy);"></td>
<td>--cloudy</td>
<td>#bccbd3</td>
</tr>
<tr>
<td style="background-color: var(--cloudy-subtle);"></td>
<td>--cloudy-subtle</td>
<td>#d0e1f1</td>
</tr>
<tr>
<td style="background-color: var(--grey);"></td>
<td>--grey</td>
<td>#686868</td>
<td></td>
</tr>
<tr>
<td style="background-color: var(--line-grey);"></td>
<td>--line-grey</td>
<td>#ddd</td>
<td> Grey lines under headings</td>
</tr>
<tr>
<td style="background-color: var(--trans-line-grey);"></td>
<td>--trans-line-grey</td>
<td>rgba(221, 221, 221, 0.32)</td>
<td>Grey line only used in the footer</td>
</tr>
<tr>
<td style="background-color: var(--off-white);"></td>
<td>--off-white</td>
<td>#f2f2f2</td>
<td rowspan="4">Several very similar whites</td>
</tr>
<tr>
<td style="background-color: var(--body-bg);"></td>
<td>--body-bg</td>
<td>#FAFAFC</td>
</tr>
<tr>
<td style="background-color: var(--lt-off-white);"></td>
<td>--lt-off-white</td>
<td>#fafafa</td>
</tr>
<tr>
<td style="background-color: var(--pure-white);"></td>
<td>--pure-white</td>
<td>#ffffff</td>
</tr>
<tr>
<td style="background-color: var(--visited-link);"></td>
<td>--visited-link</td>
<td>#660066</td>
<td>Visited link color (to be changed)</td>
</tr>
<tr>
<td style="background-color: var(--footer-grey);"></td>
<td>--footer-grey</td>
<td>#efefef</td>
<td>Page footer background color</td>
</tr>
</tbody>
</table>
<table border>
<thead>
<tr>
<th>Color</th>
<th>Color variable</th>
<th>HEX/RGBA Code<br><small>(For reference! Use variables)</small></th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr><td style="background-color: var(--w3c-classic)"></td><td>--w3c-classic</td><td>#005A9C</td><td>Header color, link color</td></tr>
<tr><td style="background-color: var(--w3c-blue)"></td><td>--w3c-blue</td><td>#003366</td><td>Some other colors, navigation</td></tr>
<tr><td style="background-color: var(--wai-green)"></td><td>--wai-green</td><td>#005A6A</td><td>For headings, some interactive elements</td></tr>
<tr><td style="background-color: var(--off-black);"></td><td>--off-black</td><td>#1d1d1d</td><td>Main text color</td></tr>
<tr><td style="background-color: var(--dk-grey)"></td><td>--dk-grey</td><td>#3b3b3b</td><td>Footer color</td></tr>
<tr><td style="background-color: var(--faded-red);"></td><td>--faded-red</td><td>#c0272d</td><td rowspan="8">Decorative Colors</td></tr>
<tr><td style="background-color: var(--red-subtle);"></td><td>--red-subtle</td><td>#f1d0e1</td></tr>
<tr><td style="background-color: var(--light-blue);"></td><td>--light-blue</td><td>#196cac</td></tr>
<tr><td style="background-color: var(--dk-blue);"></td><td>--dk-blue</td><td>#091832</td></tr>
<tr><td style="background-color: var(--gold);"></td><td>--gold</td><td>#eed009</td></tr>
<tr><td style="background-color: var(--ocean);"></td><td>--ocean</td><td>#00818d</td></tr>
<tr><td style="background-color: var(--cloudy);"></td><td>--cloudy</td><td>#bccbd3</td></tr>
<tr><td style="background-color: var(--cloudy-subtle);"></td><td>--cloudy-subtle</td><td>#d0e1f1</td></tr>
<tr><td style="background-color: var(--grey);"></td><td>--grey</td><td>#686868</td><td></td></tr>
<tr><td style="background-color: var(--line-grey);"></td><td>--line-grey</td><td>#ddd</td><td> Grey lines under headings</td></tr>
<tr><td style="background-color: var(--trans-line-grey);"></td><td>--trans-line-grey</td><td>rgba(221, 221, 221, 0.32)</td><td>Grey line only used in the footer</td></tr>
<tr><td style="background-color: var(--off-white);"></td><td>--off-white</td><td>#f2f2f2</td><td rowspan="4">Several very similar whites</td></tr>
<tr><td style="background-color: var(--body-bg);"></td><td>--body-bg</td><td>#FAFAFC</td></tr>
<tr><td style="background-color: var(--lt-off-white);"></td><td>--lt-off-white</td><td>#fafafa</td></tr>
<tr><td style="background-color: var(--pure-white);"></td><td>--pure-white</td><td>#ffffff</td></tr>
<tr><td style="background-color: var(--visited-link);"></td><td>--visited-link</td><td>#660066</td><td>Visited link color (to be changed)</td></tr>
<tr><td style="background-color: var(--footer-grey);"></td><td>--footer-grey</td><td>#efefef</td><td>Page footer background color</td></tr>
</tbody>
</table>
/* No context defined for this component. */
There are no notes for this item.