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