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

Pantone: 648

Hex: #002E5D

RGB: 0 | 46 | 93

CMYK: 100 | 71 | 9 | 56

WHITE

Hex: #FFFFFF

RGB: 255 | 255 | 255

CMYK: 0 | 0 | 0 | 0

ROYAL

Pantone: 2935

Hex: #0062b8

RGB: 0 | 87 | 184

CMYK: 100 | 52 | 0 | 0


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.

Info

#006073

#1FB3D1

#B3F2FF

Success

#006141

#10A170

#E0FFE5

Warning

#8C3A00

#FFB700

#FFF9D1

Error

#A3082A

#E61744

#FFEDF1

Neutral

#141414

#666666

#8F8F8F

#C5C5C5

#E6E6E6


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.


Text Colors

We recommend four text colors for websites.

dark gray

Hex: #141414

navy blue

Hex: #002E5D

Medium Gray

Hex: #666666

White

Hex: #FFFFFF

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).