Website Colors

<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>