Style Guide

New UCLA Color Palette

Primary Color

The primary color of the UCLA brand remains unchanged. UCLA Blue is our most significant visual identifier. Class name can be changed from sass value by dropping the $. To make it a background color use: background-classsname

UCLA Blue $uclablue
#3399cc

Secondary Colors

A secondary palette, including the existing UCLA Gold, has been developed to respect and complement the tradition of blue and gold while adding an additional level of brightness to the palette.

UCLA Gold $uclagold
#ffb300
Yellow $uclayellow
#ffe800
Dark Blue $ucladarkblue
#0055a6
Lite Blue $uclaliteblue
#00a5e5

Tertiary Colors

A tertiary palette has been developed to add a sense of forward-thinking energy and vibrancy to the brand. When used as an accent to the primary and secondary colors, the concept of optimism and limitless opportunity is fully brought to life.

PLEASE NOTE: In order to maintain maximum vibrancy to these colors, they will appear slightly different between screen and print. Due to printing limitations, the CMYK values are slightly duller than ideal. If your budget allows, select one tertiary color from the palette to include in your project and print it as a spot to bring the vibrancy fully to life in print.

Yellow Neon$uclayellowneon
#ffff00
Green Neon $uclagreenneon
#00ff87
Pink Neon $uclapinkneon
#ff00a5
Lite Blue Neon $uclaliteblueneon
#00ffff
Purple Neon $uclapurpleneon
#8237ff

White and Grey

Off White $offwhite
#f6f6f6
Grey $grey
#e2e2e2
Silver $silver
#ccc

CSS class names are the same as the variable name but without the $ sign.

Gradients

Old UCLA Color Palette

The first major UCLA rebranding of colors was circa 2004. We should deemphasice use of this palette but change happens slowly.

Identity Colors

UCLA Blue classic $uclablueclassic
#536895
UCLA Gold $uclagold
#ffb300

Secondary Palette

Full Intensity Colors

Orange$uclaorange
#FE921C
Yellow Green$uclayellowgreen
#71BC1F
Green $uclagreen
#3EA639
Cyan $uclacyan
#2685BB
Violet $uclaviolet
#7364AD
Purple $uclapurple
#911687

75% tint for softer colors

Soft Orange $uclaorangesoft
#FDAD4B
Soft Yellow Green $uclayellowgreensoft
#94CF4C
Soft Green $uclagreensoft
#6EBF5C
Soft Cyan $uclacyansoft
#5AA1CA
Soft Violet $uclavioletsoft
#9486BF
Soft Purple $uclapurplesoft
#AA49A1

plus 20% black

Orange + 20% K $uclaorangeplusblack
#CB7415
Yellow Green + 20% K $uclayellowgreenplusblack
#599619
Green + 20% K $uclagreenplusblack
#31852E
Cyan + 20% K $uclacyanplusblack
#1E6A95
Violet + 20% K $uclavioletplusblack
#5B508B
Purple + 20% K $uclapurpleplusblack
#74126C