UCLA Design System

Colors

Color is more than an aesthetic choice. Official colors are recognized and protected in trademark case law because they communicate identity.

Colors are also the building blocks of accessibility. After a long exploration, the standardized UCLA color palette was created to achieve good contrast in the interest of legibility across all channels and media.

Follow the specifications on this page to use the colors as a required brand element. Do not use other shades of blue and gold in publications or online.

Best Practices

We’ve developed a system of colors that plays off the new brand colors, maximizes ADA compliancy, and creates a consistent link color-strategy. The system is broken down into four main palettes that are meant for unique uses:

  • Brand colors are used for backgrounds, illustrations, and other graphical elements or fields that contribute to a pages layout.
  • Use Gray 80% for text on white background to reduce eye strain.
  • Interactive colors are used for buttons, links, tiles, and other navigational elements.
  • Denotive colors are used for error, success, warning and other types of alerts. These colors should be used minimally and for their intended meanings only.

Color contrast is very important to legibility. To meet current accessibility standards, use only approved color combinations. View the Color Contrast chart and Usage guide at https://brand.ucla.edu/identity/colors

Primary Brand Colors

UCLA Blue
39 116 174
#2774AE

UCLA Gold
255 209 0
#FFD100

White
255 255 255
#FFFFFF

Secondary Brand Colors

Darkest Blue
0 59 92
#003B5C

Darker Blue
0 85 135
#005587

Lighter Blue
139 184 232
#8BB8EE

Lightest Blue
218 235 254
#DAEBFE

Darkest Gold
255 184 28
#FFB81C

Darker Gold
255 199 44
#FFC72C

Grayscale

Black
0 0 0
#000000

Gray 80%
51 51 51
#333333

Gray 60%
102 102 102
#666666

Gray 40%
153 153 153
#999999

Gray 20%
204 204 204
#CCCCCC

Gray 10%
229 229 229
#E5E5E5

Gray 15%%
217 217 217
#D9D9D9

Gray 8%
235 235 235
#EBEBEB

Gray 5%
242 242 242
#F2F2F2

Gray 3%
247 247 247
#F7F7F7

Interactive

Default State
0 80 140
#00598C

Hover State
0 121 191
#0079BF

Active State
0 59 92
#003B5C

Focus State
0 121 191
#00568C

Visited State
82 35 176
#5223B0

Interactive Light

Default State
255 209 0
#FFD100

Hover State
255 229 0
#FFE500

Active State
255 191 15
#FFBF0F

Focus State
255 229 0
#FFE500

Visited State
255 255 255
#FFFFFF

Denotive Colors

Error
214 0 0
#D60000

Success
0 115 57
#007339

Warning
245 127 23
#F57F17

Primary Alert
139 184 232
#8BB8E8

Secondary Alert
153 153 153
#999999