Colors

As part of the web brand identity standards we have outlined a suite of approved web colors. The combination of background, text and link colors have been thoroughly tested for color contrast and are compliant with our accessibility policy.

While the Be Boulder visual guidelines advise adding color through photography, this styleguide provides a variety of colors to be used for backgrounds on elements of your site or application.

While there are a variety of colors available, we suggest either using one of the secondary or tertiary colors per page, or using multiple colors on a single element (for example, a row of 3 colored boxes).

Brand Colors

Neutral Colors

Links & Buttons

Secondary Colors

We recommended only using a single secondary or tertiary color per page.

Application Colors

These colors are meant to be used in web applications for highlighting error, warning, and success messages and elements.

Notification/Message Colors

These colors can be used as backgrounds for messages and notifications.

Additional Colors

Should you need other colors for your web application, we suggest choosing colors from the Google Material Color Palette, from which these colors were chosen.

Text Color

When applying the background classes, an accessible text color is also set.

Usage

Shades of Gray

There are also some utility classes for shades of gray.

Background Color Only

If you only need to apply a background color, but not set text or link colors within the element, you can use the .background-color-COLORNAME classes. These classes should only be used when the elements within do not display properly when text and link colors are set. Some of these colors will not meet color contrast accessibility standards.

Usage

Black

Gold

White

Light Gray

Dark Gray

Blue

Light Blue

Light Green

Light Gold

Medium Blue

Dark Blue

Brick

Red

Green

Amber

Light Red

Light Green

Yellow