Colors for Web

Color use is one of the most effective ways to make an immediate connection to UW–Madison. The official university colors are Badger (also referred to as Cardinal) red and white. Colors used in UW–Madison’s web themes and templates are displayed below.

Official Colors

Color SASS Variable HEX Code Purpose/Usage
UW Red $uw-red #c5050c UW–Madison’s primary color. Used for design elements, navigation bars, nonlinked headers, and backgrounds. Not used for links.
UW Red Dark $uw-red-dark #9b0000 Accent color. Used in alternating boxes component.
UW Page Background $uw-page-bg #f7f7f7 Background color.
UW Gray-Blue $uw-gray-blue #dadfe1 Background and accent color.
UW Gray Darker $uw-gray-darker #646569 Design element background color and accent color.
UW Gray Darkest $uw-gray-darkest #282728 Design element background color, accent color, and footer background color. Often used in place of black.
UW Body Font $uw-body-font #494949 Used for standard text on a white background.
UW Anchor Color $uw-anchor-color #0479a8 Used for links in standard text on a white background.
UW Gray Footer Text $uw-gray-footer-text #adadad Used for footer text.
UW Gray Footer Text Hover $uw-gray-footer-text-hover #f9f9f9 Used for links in footer text.

For easy access to the UW web color palette in Adobe applications, open the Swatches palette in your application and click on the top right menu. Select “Open Swatch Library” and then select “Other Library.” Navigate to where the downloaded swatch file is located on your computer.

Download the UW Adobe Color Palette for Web (.ase file in zip archive)

Secondary Colors

As our templates and themes evolve, University Marketing will be developing a palette of secondary colors that complement UW–Madison’s official colors. In the meantime, we’re happy to help if you have a specific color you would like to work into our themes or templates.