Web Colors

User Interface Palette

You can use accent colors in your website design to highlight key elements of the user interface:

• buttons
• alert messages and boxes
• background colors of small text fields
• highlighted information (e.g., a call to action)
• important text (e.g., headlines, subheads, or call-out quotes)

Avoid using an accent color in a way that implies it is an official BYU color:

• Do not use an accent color as a dominant color for your website.
• Do not use an accent color as a close companion to navy in a way that gives it equal or near-equal status.

Please ensure that your color pairings always meet accessibility standards.

We recommend the color palette below for accent colors on BYU websites, but other colors are also allowed.

UI Palette Example

Accent Color Dos and Don'ts

DO match the colors to the action in logical patterns. Green is often associated with transactions and positive actions, blue with neutral actions, and red with error messages.

DO NOT mix up accent colors in common alert messages. For instance, do not use green to indicate an error.

DO use accent colors as a call to action, creating subtle emphasis to direct user attention where you’d like them to interact with your content.

DO use accent colors to create consistency and clarity. In the example below, ticket buttons and ticket prices are in green, and all of the days are blue, with the selected day as the darkest blue.

DO NOT use many different accent colors at once, which creates confusion and reduces the effectiveness of the accent colors.

DO NOT use accent colors in large amounts or to create unnecessarily loud emphasis. This creates a jarring experience for your users; larger items will naturally draw attention and do not need color emphasis. Sparing use of accent color makes it more effective when it is used.

DO NOT use accent colors for large amounts of text; it can reduce readability.