Color

The UCSF color palette reinforces a sense of strength and energy for all communications. The palette is flexible and made of bold, bright colors that create dynamic, expressive communications. Ample use of white space unifies the palette with contrast and vibrancy. By developing one enterprise-wide color palette, we present a more unified brand to our audiences. Each color was carefully selected to express the personality of our enterprise. All palette colors are evolved from familiar UCSF legacy colors, and designed to be used across all communication channels.

UCSF COLOR PALETTE

 

use of color palette

 


Interactive Colors

In digital environments, color plays a big role in accessibility — the greater the contrast, the better the readability. See Interactive Colors for more information.

 

Download a PDF of Interactive Colors to copy HEX codes.

PDF iconInteractive Colors from UCSF_BrandGuide_v2.1_083116.pdf

Color Palette

The primary palette consists of four cool tones and one warmer tone, orange. The navy blue denotes the primary color for the brand. It serves as a foundation for all colors, acting as the primary color in all brand logo lock-ups. The light blue is a prominent color used for UCSF Medical Center, and orange for UCSF Benioff Children’s Hospital. These colors will carry the most brand recognition, however the full palette is meant to be embraced by all UCSF entities and sub-brands.

 

The primary palette is supported by a bright secondary palette. Secondary palette colors serve as complementary accents to the primary palette, adding even more vibrancy to the palette. 

 

The neutral palette acts as a foundation that works with both primary and secondary palettes. Ample use of white as a canvas with monochromatic blacks and grays for elements such as type and paragraph rules will give the primary and secondary palette vibrancy and prominence.

PRIMARY PALETTE

color primary palette
SECONDARY PALETTE

color secondary palette
neutral palette

color neutral palette
Palette Resources

Since individual printers and computer screens show colors differently, the color swatches on this page should not be used for color-matching purposes. Always use the formulas provided here. Color palettes are available for you to download onto your desktop. Please see downloads section at the bottom of this page.

 

Note: when printing on uncoated stock, custom match the coated pantone chip swatch color (do not use the uncoated pantone chip swatch).


Palette Usage

The UCSF color palette is designed to be used across all communication channels through a wide range of applications. Each color in the palette has been selected to complement the others. The palette offers a number of color combinations that allows use of only a few core colors, or multiple colors in one application. The examples below start to show how you can balance primary colors with secondary colors.

 

When using a primary color as a core, as shown in the left example, both primary and secondary colors can be used to complement. The logo expression is staged in white on the bottom right corner, offering contrast and a neutral foundation that adds vibrancy to the surrounding colors.

 

When using a secondary color as a core, it is important to support the secondary color with some primary color. As shown in the right example, the predominant color is red with orange and navy used as supporting accents. Ample use of white and neutrals help balance the vibrancy of the color while the master brand signature reinforces the core color navy.

 

PRIMARY COLOR WITH SECONDARY ACCENTS

PRIMARY COLOR WITH SECONDARY ACCENTS
SECONDARY COLOR WITH PRIMARY ACCENTS

SECONDARY COLOR WITH PRIMARY ACCENTS

Tints: Primary and Secondary Palette

A tint is a mixture of a color and white in order to increase its lightness. While palette colors should typically be used at full strength, tints can be used in instances that require a more subtle color variation or need some differentiation from the UCSF color palette. Tints can be used to create hierarchy, separate colors, construct overlays and extend core colors. While this can extend the range of the primary palette, it is important to be judicious when using a variety of colors—too many colors can create unwanted complexity in a design.

 

Tints should never be used independently from full strength colors of the UCSF palette. Tints should only be used in support of primary and secondary colors as a way to extend that color for specific applications (charts, graphs, video, web or user interfaces).

 

TINTS BASED FROM UCSF PRIMARY AND SECONDARY COLOR PALETTE

TINTS BASED FROM UCSF PRIMARY COLOR PALETTE

 


Neutral Tints

Neutral colors are an essential part of the UCSF visual system. Where primary and secondary colors offer vibrancy and diversity, neutral colors unify and balance. White is an important foundational neutral. It elevates and unifies the colors in the palette. It adds sophistication and simplicity to the design. The neutral palette includes white, a warm gray (Pantone 427), a cool gray (Pantone 428) and black. These neutrals can also be broken down into tint percentages to expand the neutral palette. Using tints from either grays offers the ability to shift neutrals from warm to cool. Black should be reserved for type and should not be used as a predominant core color.

 

TINTS BASED FROM UCSF NEUTRAL COLOR PALETTE

TINTS BASED FROM UCSF NEUTRAL COLOR PALETTE

Creating Tints from Color Palette

The tints shown can be created by specifying a percentage of the palette of colors in a graphics program, or by using the specifications shown in the above sections.

 
 
INDESIGN

InDesign

To create tints in InDesign, locate the swatches panel, select the desired color from the UCSF color palette and enter in the percentage of tint desired.

ILLUSTRATOR

illustrator

To create tints in Illustrator, locate the swatches and color panel, select the desired color from swatches panel, making sure it is either a spot color or global process color, and enter in the percentage of tint in the color panel.

PHOTOSHOP

To create tints in Photoshop, create a new layer and fill it with white. Add a color overlay layer effect to the layer. In the layer style dialog box, add the desired color from the UCSF color palette. Adjust the opacity of the color overlay to the percentage of tint desired.


Tint Application

 
CREATING HIERARCHY

CREATING HIERARCHY

Tints can be used in web or digital applications to help create hierarchy in navigation and user interfaces.

 
OVERLAY COLOR BACKGROUNDS

OVERLAY COLOR BACKGROUNDS

Tints can be used to create overlays on solid color backgrounds – helping to separate blocks of information.

OVERLAY IMAGERY

OVERLAY IMAGERY

Tints can also be used with photography to overlay colors on imagery – helping to separate blocks of information.

Extending Core Color

Extending Core Color

Tints can be used to extend core colors in charts, graphs or presentations.


Color and Digital Accessibility

In digital environments, color plays a big role in accessibility — the greater the contrast, the better the readability. UCSF offers edited color formulas to our master palette for optimal levels of readability across interactive deliverables. Our interactive color formulas have been created to provide opportunities for greater contrast to meet W3C’s Web Content Accessibility Guideline (WCAG) AA level color contrast standards

 

These interactive color formulas should only be used in specific interactive situations, detailed below.

 


Interactive Color Usage

The UCSF color palette has been customized for print and interactive applications. In general terms, the medium of a deliverable will determine which color specification to use — although elements such as logos or logo expressions should always retain the master palette color specifications. For projects that span both print and digital processes, color formulas and usage should be customized with the final use in mind.

 

 


Color Contrast Ratios

Following WCAG guidance, the interactive color formulas for the UCSF color palette conform to an AA level contrast standard, which requires that color combinations meet a minimum contrast ratio for text. Below are guidelines and best practices to meet the required contrast with interactive/digital text.


4.5:1 Contrast Ratio

 

Normal-sized text in digital applications, such as 12pt text, requires a 4.5:1 contrast ratio. Type can either be on a white background or knocked out of a solid color. Only certain colors from our interactive color formulas achieve a 4.5:1 contrast ratio. For lighter colors, such as yellow and neutrals, use black text to achieve a 4.5:1 ratio.


3:1 Contrast Ratio

 

Larger text in digital applications, such as 14pt bold or 18pt regular or larger, only requires a 3:1 contrast ratio. Type can either be on a white background or knocked out of a solid color. Some of our interactive color formulas, such as green and orange, can only achieve a 3:1 contrast ratio and should not be used with normal-sized text.

 


Interactive Colors

The interactive color formulas provide five additional darker versions of UCSF’s color palette to meet required contrast ratios. All other specifications for UCSF brand colors, tints and neutrals remain unchanged. All of the colors and tints shown here conform to the WCAG AA level contrast standard, which requires that the color combination meets a minimum contrast ratio.

 

4.5:1 = normal text (12pt)

3:1 = large text (18pt or 14pt bold, or larger)

Each color formula includes relevant contrast ratio to white (#FFFFFF) or to black (#000000).

* = indicates color specific to interactive use

L = indicates AA compliant only with large text

 

UCSF PRIMARY PALETTE SHOWING MODIFIED FORMULAS FOR INTERACTIVE USE

 

UCSF SECONDARY PALETTE SHOWING MODIFIED FORMULAS FOR INTERACTIVE USE

 
NEUTRAL PALETTE

 


Interactive Primary Colors and Tints 

The five additional darker interactive colors complement and extend UCSF’s existing color palette and tints specifically for interactive use, and meet accessibility requirements. All of the colors and tints shown conform to the WCAG AA level contrast standard, which requires that the color combination meets a minimum contrast ratio.


4.5:1 = normal text (12pt)
3:1 = large text (18pt or 14pt bold, or larger)
Each color formula includes relevant contrast ratio to white (#FFFFFF) or to black (#000000).
* = indicates color specific to interactive use
L = indicates AA compliant only with large text

 

Interactive primary colors

 

interactive primary tints – same as master palette tints

 

INTERACTIVE PRIMARY COLORS

 

INTERACTIVE PRIMARY TINTS – SAME AS MASTER PALETTE TINTS

 

Interactive Secondary Colors and Tints

The five additional darker interactive colors complement and extend UCSF’s existing color palette and tints specifically for interactive use, and meet accessibility requirements. All of the colors and tints shown conform to the WCAG AA level contrast standard, which requires that the color combination meets a minimum contrast ratio.


4.5:1 = normal text (12pt)
3:1 = large text (18pt or 14pt bold, or larger)
Each color formula includes relevant contrast ratio to white (#FFFFFF) or to black (#000000).
* = indicates color specific to interactive use
L = indicates AA compliant only with large text

 

INTERACTIVE SECONDARY COLORS

 
INTERACTIVE SECONDARY TINTS – SAME AS MASTER PALETTE TINTS

 


Interactive Neutral Colors and Tints

Values for UCSF’s neutrals and tints mirror the UCSF color palette with one addition, a dark screen of black. All of the colors and tints shown here conform to the WCAG AA level contrast standard, which requires that the color combination meets a minimum contrast ratio.


4.5:1 = normal text (12pt)
3:1 = large text (18pt or 14pt bold, or larger)
Each color formula includes relevant contrast ratio to white (#FFFFFF) or to black (#000000).


For optimal body copy readability on a white background, we recommend using either 77% Process Black or 70% Process Black for the text color. Both maintain an accessible level of contrast, but they soften the harshness of 100% black type.


* = indicates color specific to interactive use
L = indicates AA compliant only with large text

 

interactive neutral colors

 

interactive neutral tints

 


Using Text - Color with White

The examples on this page show which type sizes and styles meet the minimum requirements for WCAG AA level accessibility when knocked out of a solid color or on a white background. Please note that the interactive green and interactive orange colors only work in the 18pt or larger text sizes, and the 14pt bold text.

 

 


Using Text - Color with Black

 
Primary Colors

A large number of palette colors and tints are WCAG AA level compliant when used as a background for black text. The following examples show which ones meet the minimum requirements for accessibility.

 

 


Using Text - Color with Black

 
Secondary Colors

A large number of palette colors and tints are WCAG AA level compliant when used as a background for black text. The following examples show which ones meet the minimum requirements for accessibility.

 

 


Using Text - Color with Black

 
Neutral Colors

A large number of palette colors and tints are WCAG AA level compliant when used as a background for black text. The following examples show which ones meet the minimum requirements for accessibility. 

 

Green

Incorrect Usage Examples

DO NOT USE TINTS INDEPENDENT OF FULL STRENGTH COLORS
DO NOT NEGLECT COLOR HIERARCHY
DO NOT USE TINTS OF COLORS FOR TEXT
DO NOT CREATE NEW COLORS
DO NOT USE SECONDARY PALETTE ONLY
DO NOT COMBINE COLORED TEXT AND BACKGROUND
DO NOT USE ACCENT COLORS IN LARGE AREAS
DO NOT CREATE GRADIENTS

Downloads

Color