Color

The UCSF color palette reinforces a sense of strength and energy, with a diverse spectrum of colors for the creation of dynamic, expressive communications. By using it consistently, we present a more unified brand to our audiences, with each color carefully selected to express UCSF’s personality.

Grid of squares and rectangles in various colors with a white UCSF logo in the center

The UCSF Color Palette

A fundamental set of core, neutral brand colors can be paired with primary hues within six color ranges: blue, teal, green, purple, violet and magenta. Each value within these ranges is tailored to work harmoniously with UCSF’s core colors, allowing vibrant and unique design expressions.

In addition to these essential hues, a unique call-to-action (CTA) blue has been specially formulated for digital applications, ensuring a consistent experience for all buttons and links while effectively engaging visitors.

Lastly, when and if needed, a set of secondary colors are available for specific use cases such as alerts or notifications within digital applications.

When displaying text or elements that are meant to be interactive, please be aware that UCSF must comply with WCAG 2.0 AA standards. Contrast levels are listed below for either navy text (#502049) or white text (#FFFFFF) on each color background.

The visual presentation of text and images of text must have a contrast ratio of at least 4.5:1, except for large text. Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 18 pts / 24 pixels and larger, or 14 pts / 8.67 pixels if it is bold.

When using the UCSF color palette, pair navy as a base color with neutrals (white, blues, grays) and up to three additional colors. Please see the PDF brand guidelines for further details on color usage.

Downloads

Download versions of the color palette for easy use in either your design applications or on your desktop.

Download Color Palette

Accessibility

When combining colors, check contrast levels for minimum legibility.

Check Contrast Levels for Legibility

Extended Palette

If you’re a graphic or web designer working on a major project for UCSF, please contact [email protected] for access to the extended color palette.

Neutrals

A1 UCSF Navy

  • #052049
  • R5 G32 B73
  • C100 M53 Y0 K72
  • PMS 7463
  • Contrast 16.03:1

I6

  • #F2F3F4
  • R242 G243 B244
  • C4 M2 Y2 K0
  • Contrast 14.43:1

J5

  • #E1E3E5
  • R225 G227 B230
  • C9 M5 Y3 K0
  • Contrast 12.46:1

K3 Gray

  • #D1D3D3
  • R209 G211 B211
  • C24 M17 Y15 K0
  • PMS Cool Gray 4
  • Contrast 10.66:1

J3 Cool Gray

  • #B4B9BF
  • R180 G185 B191
  • C21 M13 Y8 K0
  • PMS 428
  • Contrast 8.12:1

J2

  • #878D96
  • R135 G141 B150
  • C35 M23 Y19 K2
  • PMS 429
  • Contrast 4.79:1

I3 Blue Gray

  • #506380
  • R80 G99 B128
  • C73 M53 Y16 K20
  • PMS 2374
  • Contrast 6.1:1

White

  • #FFFFFF
  • R255 G255 B255
  • C0 M0 Y10 K0
  • Contrast 16.03:1

Black

  • #000000
  • R0 G0 B0
  • C0 M0 Y0 K100
  • Contrast 21:1

Primary Colors

A1 UCSF Navy

  • #052049
  • R5 G32 B73
  • C100 M53 Y0 K72
  • PMS 7463
  • Contrast 16.03:1

C1

  • #0E5258
  • R14 G82 B88
  • C100 M0 Y29 K64
  • PMS 3165
  • Contrast 8.87:1

D1

  • #00483A
  • R0 G72 B58
  • C92 M14 Y67 K70
  • PMS 3308
  • Contrast 10.56:1

F1

  • #2E2872
  • R46 G40 B114
  • C99 M97 Y0 K15
  • PMS 2372
  • Contrast 12.63:1

G1

  • #461850
  • R70 G24 B80
  • C83 M100 Y0 K44
  • PMS 2627
  • Contrast 13.93:1

H1

  • #561038
  • R86 G16 B56
  • C26 M100 Y0 K57
  • PMS 2357
  • Contrast 13.75:1

A2

  • #0F388A
  • R15 G56 B138
  • C100 M81 Y0 K17
  • PMS 2146
  • Contrast 10.75:1

C2

  • #14828C
  • R20 G130 B140
  • C100 M0 Y29 K24
  • PMS 7713
  • Contrast 4.56:1

D2

  • #007242
  • R0 G114 B66
  • C94 M3 Y78 K44
  • PMS 7728
  • Contrast 6.02:1

F2

  • #443E8C
  • R68 G62 B140
  • C80 M83 Y0 K1
  • PMS 7671
  • Contrast 9.07:1

G2

  • #6C247C
  • R108 G36 B124
  • C64 M100 Y0 K7
  • PMS 259
  • Contrast 9.62:1

H2

  • #821A56
  • R130 G26 B86
  • C18 M100 Y0 K37
  • PMS 235
  • Contrast 9.41:1

B3 Blue

  • #178CCB
  • R23 G140 B203
  • C100 M15 Y0 K6
  • PMS Process Blue
  • Contrast 4.31:1**

C3 Teal

  • #16A0AC
  • R22 G160 B172
  • C91 M0 Y30 K0
  • PMS 7466
  • Contrast 5.08:1

D3 Green

  • #32A03E
  • R50 G160 B62
  • C81 M0 Y100 K0
  • PMS 2423
  • Contrast 4.76:1

F3 Purple

  • #6C62D0
  • R108 G98 B208
  • C67 M58 Y0 K0
  • PMS 2366
  • Contrast 4.88:1

G3 Violet

  • #A238BA
  • R162 G56 B186
  • C41 M77 Y0 K0
  • PMS 2582
  • Contrast 5.51:1

H3 Magenta

  • #C42882
  • R196 G40 B130
  • C0 M100 Y0 K2
  • PMS 226
  • Contrast 5.28:1

B5

  • #B8E6FA
  • R184 G230 B250
  • C25 M0 Y0 K0
  • Contrast 12.01:1

C4

  • #60D0DA
  • R96 G208 B218
  • C60 M0 Y16 K0
  • PMS 319
  • Contrast 8.8:1

E3 Chartreuse

  • #84C234
  • R132 G194 B52
  • C50 M0 Y100 K0
  • PMS 3561
  • Contrast 7.44:1

F4 Yosemite

  • #8A8CE3
  • R138 G140 B227
  • C52 M37 Y0 K0
  • PMS 7452
  • Contrast 5.3:1

G4

  • #C45ED8
  • R196 G94 B216
  • C23 M49 Y0 K0
  • PMS 2572
  • Contrast 4.53:1

H4

  • #E266AE
  • R226 G102 B174
  • C0 M72 Y1 K0
  • PMS 2038
  • Contrast 5.15:1

B6

  • #E2F4FC
  • R226 G244 B252
  • C9 M0 Y0 K0
  • Contrast 14.19:1

C5

  • #B4E2E8
  • R180 G226 B232
  • C27 M0 Y8 K0
  • Contrast 11.44:1

E4 Point Reyes

  • #B4DC55
  • R180 G220 B85
  • C26 M0 Y95 K0
  • PMS 2297
  • Contrast 10.16:1

F5

  • #C0C0EA
  • R192 G192 B234
  • C23 M21 Y0 K0
  • Contrast 9.14:1

G5

  • #EACCF0
  • R234 G204 B240
  • C8 M20 Y0 K0
  • Contrast 10.99:1

H5

  • #F2C2DE
  • R242 G194 B222
  • C2 M28 Y0 K0
  • Contrast 10.34:1

A1 UCSF Navy

  • #052049
  • R5 G32 B73
  • C100 M53 Y0 K72
  • PMS 7463
  • Contrast 16.03:1

C1

  • #0E5258
  • R14 G82 B88
  • C100 M0 Y29 K64
  • PMS 3165
  • Contrast 8.87:1

D1

  • #00483A
  • R0 G72 B58
  • C92 M14 Y67 K70
  • PMS 3308
  • Contrast 10.56:1

A2

  • #0F388A
  • R15 G56 B138
  • C100 M81 Y0 K17
  • PMS 2146
  • Contrast 10.75:1

C2

  • #14828C
  • R20 G130 B140
  • C100 M0 Y29 K24
  • PMS 7713
  • Contrast 4.56:1

D2

  • #007242
  • R0 G114 B66
  • C94 M3 Y78 K44
  • PMS 7728
  • Contrast 6.02:1

B3 Blue

  • #178CCB
  • R23 G140 B203
  • C100 M15 Y0 K6
  • PMS Process Blue
  • Contrast 4.31:1**

C3 Teal

  • #16A0AC
  • R22 G160 B172
  • C91 M0 Y30 K0
  • PMS 7466
  • Contrast 5.08:1

D3 Green

  • #32A03E
  • R50 G160 B62
  • C81 M0 Y100 K0
  • PMS 2423
  • Contrast 4.76:1

B5

  • #B8E6FA
  • R184 G230 B250
  • C25 M0 Y0 K0
  • Contrast 12.01:1

C4

  • #60D0DA
  • R96 G208 B218
  • C60 M0 Y16 K0
  • PMS 319
  • Contrast 8.8:1

E3 Chartreuse

  • #84C234
  • R132 G194 B52
  • C50 M0 Y100 K0
  • PMS 3561
  • Contrast 7.44:1

B6

  • #E2F4FC
  • R226 G244 B252
  • C9 M0 Y0 K0
  • Contrast 14.19:1

C5

  • #B4E2E8
  • R180 G226 B232
  • C27 M0 Y8 K0
  • Contrast 11.44:1

E4 Point Reyes

  • #B4DC55
  • R180 G220 B85
  • C26 M0 Y95 K0
  • PMS 2297
  • Contrast 10.16:1

F1

  • #2E2872
  • R46 G40 B114
  • C99 M97 Y0 K15
  • PMS 2372
  • Contrast 12.63:1

G1

  • #461850
  • R70 G24 B80
  • C83 M100 Y0 K44
  • PMS 2627
  • Contrast 13.93:1

H1

  • #561038
  • R86 G16 B56
  • C26 M100 Y0 K57
  • PMS 2357
  • Contrast 13.75:1

F2

  • #443E8C
  • R68 G62 B140
  • C80 M83 Y0 K1
  • PMS 7671
  • Contrast 9.07:1

G2

  • #6C247C
  • R108 G36 B124
  • C64 M100 Y0 K7
  • PMS 259
  • Contrast 9.62:1

H2

  • #821A56
  • R130 G26 B86
  • C18 M100 Y0 K37
  • PMS 235
  • Contrast 9.41:1

F3 Purple

  • #6C62D0
  • R108 G98 B208
  • C67 M58 Y0 K0
  • PMS 2366
  • Contrast 4.88:1

G3 Violet

  • #A238BA
  • R162 G56 B186
  • C41 M77 Y0 K0
  • PMS 2582
  • Contrast 5.51:1

H3 Magenta

  • #C42882
  • R196 G40 B130
  • C0 M100 Y0 K2
  • PMS 226
  • Contrast 5.28:1

F4 Yosemite

  • #8A8CE3
  • R138 G140 B227
  • C52 M37 Y0 K0
  • PMS 7452
  • Contrast 5.3:1

G4

  • #C45ED8
  • R196 G94 B216
  • C23 M49 Y0 K0
  • PMS 2572
  • Contrast 4.53:1

H4

  • #E266AE
  • R226 G102 B174
  • C0 M72 Y1 K0
  • PMS 2038
  • Contrast 5.15:1

F5

  • #C0C0EA
  • R192 G192 B234
  • C23 M21 Y0 K0
  • Contrast 9.14:1

G5

  • #EACCF0
  • R234 G204 B240
  • C8 M20 Y0 K0
  • Contrast 10.99:1

H5

  • #F2C2DE
  • R242 G194 B222
  • C2 M28 Y0 K0
  • Contrast 10.34:1

**Color combination can only be used for large text.

Call-to-Action (CTA)

A3 CTA Blue

  • #006BE9
  • R0 G107 B233
  • C91 M60 Y0 K0
  • PMS 2387
  • Contrast 4.9:1

Secondary Colors

L3 Yellow

  • #FEB80A
  • R254 G184 B10
  • C0 M22 Y100 K0
  • PMS 7549
  • Contrast 9.22:1

M3 Orange

  • #FA6E1E
  • R250 G110 B330
  • C0 M66 Y99 K0
  • PMS 1585
  • Contrast 5.58:1

N3 Red

  • #E61048
  • R230 G16 B72
  • C0 M100 Y52 K0
  • PMS 1925
  • Contrast 4.63:1