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

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
Yellow $uclayellow
Dark Blue $ucladarkblue
Lite Blue $uclaliteblue

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
Green Neon $uclagreenneon
Pink Neon $uclapinkneon
Lite Blue Neon $uclaliteblueneon
Purple Neon $uclapurpleneon

White and Grey

Off White $offwhite
Grey $grey
Silver $silver

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


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
UCLA Gold $uclagold

Secondary Palette

Full Intensity Colors

Yellow Green$uclayellowgreen
Green $uclagreen
Cyan $uclacyan
Violet $uclaviolet
Purple $uclapurple

75% tint for softer colors

Soft Orange $uclaorangesoft
Soft Yellow Green $uclayellowgreensoft
Soft Green $uclagreensoft
Soft Cyan $uclacyansoft
Soft Violet $uclavioletsoft
Soft Purple $uclapurplesoft

plus 20% black

Orange + 20% K $uclaorangeplusblack
Yellow Green + 20% K $uclayellowgreenplusblack
Green + 20% K $uclagreenplusblack
Cyan + 20% K $uclacyanplusblack
Violet + 20% K $uclavioletplusblack
Purple + 20% K $uclapurpleplusblack