Skip to main content

Web Colors

BYU Primary Colors

Our BYU colors are navy, white, and royal, and these should be the dominant colors in university websites. As in the web theme, header bars must use navy; navigation bars should be white.
Navy Color Block
White Color Block
Royal Color Block

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.

Web Color Palette



UI Palette Example

ui_palette_example.svg



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.

1_dobutton_updated_2.png

1_donotbutton_updated.png


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.

3_docalendar.svg
4_donotcalendar.svg


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.

5_dospeeches.svg
6_donotspeeches.svg


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

7_dotext.svg
8_donottext.svg

Text Colors

We recommend four text colors for websites.

Dark gray and navy provide the best readability. (Black on white creates a contrast that is too high for good readability online.) Medium gray is for muted text. White works well on buttons or on dark backgrounds in small amounts (a lot of white text can cause eye fatigue).
Dark Gray Text Color Block
Navy Blue Text Color Block
Medium Gray Text Color Block
White Text Color Block