Skip to main content

Color

These utilities are generated by Bootstrap when we override Bootstrap’s color variables. Further down the page are examples for text color. But they work for buttons btn-{color}, backgrounds bg-{color}, and border colors border-{color}. Where {color} can be one of the following:

Color Suffixes

Primary Palette

wvu-blue
#002855

wvu-gold
#EAAA00

Accent Palette

wvu-accent--blue-dark
#1C2B39

wvu-accent--blue-light
#9DDAE6

wvu-accent--blue
#0062A3

wvu-accent--yellow
#FFE539

wvu-accent--old-gold
#B3A169

wvu-accent--sunset
#F58672

Neutral Palette

wvu-neutral--off-white
#F7F7F7

wvu-neutral--warm-gray-light
#BEB7B3

wvu-neutral--warm-gray-dark
#554741

wvu-neutral--warm-gray-medium
#988E8B

wvu-neutral--cream
#F2E6C2

wvu-neutral--tan
#7F6310

Make sure when using these classes to keep in mind our Accessibility Guidelines for color contrast.

Background Color Examples

bg-wvu-blue text-white
bg-wvu-gold
bg-wvu-accent--blue-dark text-white
bg-wvu-accent--blue-light
bg-wvu-accent--blue text-white
bg-wvu-accent--yellow
bg-wvu-accent--old-gold text-white
bg-wvu-accent--sunset
bg-wvu-neutral--off-white
bg-wvu-neutral--warm-gray-light
bg-wvu-neutral--warm-gray-medium
bg-wvu-neutral--warm-gray-dark text-white
bg-wvu-neutral--cream
bg-wvu-neutral--tan

Text Color Examples

text-wvu-blue
text-wvu-gold
text-wvu-accent--blue-dark
text-wvu-accent---light-blue
text-wvu-accent--blue
text-wvu-accent--yellow
text-wvu-accent--old-gold
text-wvu-accent--sunset
text-wvu-neutral--off-white
text-wvu-neutral--warm-gray-light
text-wvu-neutral--warm-gray-dark
text-wvu-neutral--warm-gray-medium
text-wvu-neutral--cream
text-wvu-neutral--tan

Button Color Examples

<a href="#" class="btn btn-wvu-blue">Call to Action</a>
<a href="#" class="btn btn-wvu-gold">Call to Action</a>
<a href="#" class="btn btn-wvu-accent--blue-dark">Call to Action</a>
<a href="#" class="btn btn-wvu-accent--blue-light">Call to Action</a>
<a href="#" class="btn btn-wvu-accent--blue">Call to Action</a>
<a href="#" class="btn btn-wvu-accent--yellow">Call to Action</a>
<a href="#" class="btn btn-wvu-accent--old-gold">Call to Action</a>
<a href="#" class="btn btn-wvu-accent--sunset">Call to Action</a>
<a href="#" class="btn btn-wvu-neutral--off-white">Call to Action</a>
<a href="#" class="btn btn-wvu-neutral--warm-gray-light">Call to Action</a>
<a href="#" class="btn btn-wvu-neutral--warm-gray-dark text-white">Call to Action</a>
<a href="#" class="btn btn-wvu-neutral--warm-gray-medium">Call to Action</a>
<a href="#" class="btn btn-wvu-neutral--cream">Call to Action</a>
<a href="#" class="btn btn-wvu-neutral--tan">Call to Action</a>

Accessible Color Combinations for Text

Large Text

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa

Normal Text

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa

bg-wvu-blue

Large Text

Aa
Aa
Aa

Normal Text

Aa
Aa

bg-wvu-gold

Large Text

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa

Normal Text

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa

bg-wvu-accent--blue-dark

Large Text

Aa
Aa
Aa
Aa

Normal Text

Aa
Aa
Aa

bg-wvu-accent--blue-light

Large Text

Aa
Aa
Aa
Aa
Aa
Aa

Normal Text

Aa
Aa
Aa

bg-wvu-accent--blue

Large Text

Aa
Aa
Aa
Aa
Aa

Normal Text

Aa
Aa
Aa
Aa

bg-wvu-accent--yellow

Large Text

Aa
Aa
Aa

Normal Text

Aa
Aa

bg-wvu-accent--old-gold

Large Text

Aa
Aa
Aa

Normal Text

Aa
Aa

bg-wvu-accent--sunset

Large Text

Aa
Aa
Aa
Aa
Aa

Normal Text

Aa
Aa
Aa
Aa
Aa

bg-wvu-neutral--off-white

Large Text

Aa
Aa
Aa
Aa

Normal Text

Aa
Aa

bg-wvu-neutral--warm-gray-light

Large Text

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa

Normal Text

Aa
Aa
Aa
Aa

bg-wvu-neutral--warm-gray-dark

Large Text

Aa

Normal Text

Aa

bg-wvu-neutral--warm-gray-medium

Large Text

Aa
Aa
Aa
Aa
Aa

Normal Text

Aa
Aa
Aa
Aa
Aa

bg-wvu-neutral--cream

Large Text

Aa
Aa
Aa

Normal Text

Aa
Aa

bg-wvu-neutral--tan