CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" version="XHTML+RDFa 1.0" dir="ltr" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#"> <head profile="http://www.w3.org/1999/xhtml/vocab"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Generator" content="Drupal 7 (http://drupal.org)" /> <link rel="canonical" href="/brand-guide/color" /> <link rel="shortlink" href="/node/66" /> <link rel="shortcut icon" href="https://identity.ucsf.edu/profiles/ucsf_b1gfoot/themes/ucsf_b1gfoot_theme/favicon.ico" type="image/vnd.microsoft.icon" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta property="og:image" content="https://identity.ucsf.edu/profiles/ucsf_b1gfoot/themes/ucsf_b1gfoot_theme/img/img-metatag.jpg" /> <meta property="og:image:width" content="940" /> <meta property="twitter:image" content="https://identity.ucsf.edu/profiles/ucsf_b1gfoot/themes/ucsf_b1gfoot_theme/img/img-metatag.jpg" /> <meta property="twitter:card" content="summary" /> <meta property="og:site_name" content="UCSF Brand Identity" /> <meta property="twitter:url" content="https://identity.ucsf.edu/brand-guide/color" /> <meta property="og:url" content="https://identity.ucsf.edu/brand-guide/color" /> <meta property="twitter:title" content="Color | UCSF Brand Identity" /> <meta property="og:title" content="Color" /> <title>Color | UCSF Brand Identity</title> <link type="text/css" rel="stylesheet" href="https://identity.ucsf.edu/sites/g/files/tkssra266/f/css/css_kShW4RPmRstZ3SpIC-ZvVGNFVAi0WEMuCnI0ZkYIaFw.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://identity.ucsf.edu/sites/g/files/tkssra266/f/css/css_EJL_7lrjsH8BZ6q38g9TN9dgvY5IouUd4PiJZQyBEFI.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://identity.ucsf.edu/sites/g/files/tkssra266/f/css/css_rV3Wod_e6ST6El0CA65NgFrvcFHnCpm1z0SGwM9reQg.css" media="all" /> <style type="text/css" media="all"> <![CDATA[/*> </style> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hopscotch/0.2.5/css/hopscotch.min.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://identity.ucsf.edu/sites/g/files/tkssra266/f/css/css_-5KGL3kpG9BJtjhjan_sSs2LNKUh8DXr0FbFKbHMQxM.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://identity.ucsf.edu/sites/g/files/tkssra266/f/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="print" /> <style type="text/css" media="all"> <![CDATA[/*> </style> <link type="text/css" rel="stylesheet" href="https://identity.ucsf.edu/sites/g/files/tkssra266/f/css/css_StcZZY5AYSkYDUkI_3QyJhnZmk-OFdJWVY2A4NU11NA.css" media="all" /> <script type="text/javascript" src="https://identity.ucsf.edu/sites/g/files/tkssra266/f/js/js_Pt6OpwTd6jcHLRIjrE-eSPLWMxWDkcyYrPTIrXDSON0.js"></script> <script type="text/javascript" src="https://identity.ucsf.edu/sites/g/files/tkssra266/f/js/js_onbE0n0cQY6KTDQtHO_E27UBymFC-RuqypZZ6Zxez-o.js"></script> <script type="text/javascript" src="https://identity.ucsf.edu/sites/g/files/tkssra266/f/js/js_MItSgdSkwVZBTl5MsdgLy94Mp-HJ6pvBHirm2wMSuzA.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hopscotch/0.2.5/js/hopscotch.min.js"></script> <script type="text/javascript" src="https://identity.ucsf.edu/sites/g/files/tkssra266/f/js/js_Md_O18EkEkENyifmdSaTOM057n9-b6JB039etuiVtGE.js"></script> <script type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=UA-174314-5"></script> <script type="text/javascript"> <![CDATA[//><!]]> </script> <script type="text/javascript"> <![CDATA[//><!]]> </script> <script type="text/javascript" src="https://identity.ucsf.edu/sites/g/files/tkssra266/f/js/js_3KU2G0XuUwThidq7lpTBQghUO1g1ty4dEdv-co66Xqw.js"></script> <script type="text/javascript" src="https://identity.ucsf.edu/sites/g/files/tkssra266/f/js/js__pev76oqunwyHrozBOUwthVLhzUZgLLfKlmOonOmdkg.js"></script> <script type="text/javascript"> <![CDATA[//><!]]> </script> </head> <body class="html not-front not-logged-in page-node page-node- page-node-66 node-type-page header--navy ucsf-b1gfoot font--header--helveticaneue nav--lock profile--grid sidebar sidebar--left sidebar-color--white" > <div id="skip-link"> <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a> </div> <div id="page-wrapper"> <div id="page"> <div class="ucsf-top-header row-full-width no-logo"> <div class="inside"> <ul class="menu"> <li class="first"><a href="https://www.ucsf.edu">University of California San Francisco</a></li> <li><a href="https://www.ucsfhealth.org/">UCSF Health</a></li> <li><a href="https://www.ucsf.edu/search" title="">Search UCSF</a></li> <li><a href="https://www.ucsf.edu/about">About UCSF</a></li> </ul> </div> </div> <div id="header" class="row-full-width"> <div class="inside clearfix"> <h1 id="site-name"> <a href="/" title="Home" rel="home"> UCSF Brand Identity </a> </h1> <div class="region region-header"> <div id="block-search-form" class="block block-search"> <div class="content"> <form onsubmit="if(this.search_block_form.value=='Search'){ alert('Please enter a search'); return false; }" action="/brand-guide/color" method="post" id="search-block-form" accept-charset="UTF-8"><div><div class="container-inline"> <h2 class="element-invisible">Search form</h2> <div class="form-item form-type-textfield form-item-search-block-form"> <label class="element-invisible" for="edit-search-block-form--2">Search... </label> <input title="Enter the terms you wish to search for." placeholder="Search..." class="text-input fa fa-search form-text" aria-hidden="" type="text" id="edit-search-block-form--2" name="search_block_form" value="" size="40" maxlength="128" /> </div> <div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="" class="form-submit" /></div><input type="hidden" name="form_build_id" value="form-zQ6olhAhJgaI_Ntjn_68peOWK_TKP8AJ9A6TjzyEszA" /> <input type="hidden" name="form_id" value="search_block_form" /> </div> </div></form> </div> </div> <div id="block-ucsf-b1gfoot-tweaks-header-socialmedia" class="block block-ucsf-b1gfoot-tweaks"> <div class="content"> <div class="nav-social"></div> </div> </div> <div id="block-menu-block-1" class="block block-menu-block"> <div class="content"> <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1"> <ul class="menu"><li class="first expanded active-trail menu-mlid-1776"><a href="/brand-guide" class="active-trail">Brand Guide</a><ul class="menu"><li class="first leaf menu-mlid-1811"><a href="/brand-guide/brand-story">Brand Story</a></li> <li class="leaf menu-mlid-1781"><a href="/brand-guide/logos">Logos</a></li> <li class="leaf active-trail active menu-mlid-1786"><a href="/brand-guide/color" class="active-trail active">Color</a></li> <li class="leaf menu-mlid-1791"><a href="/brand-guide/fonts">Font/Typography</a></li> <li class="leaf menu-mlid-1796"><a href="/brand-guide/editorial-expression">Editorial Expression</a></li> <li class="leaf menu-mlid-1801"><a href="/brand-guide/visual-framework">Visual Framework</a></li> <li class="leaf menu-mlid-16836"><a href="/brand-guide/patterns" title="Patterns">Patterns</a></li> <li class="leaf menu-mlid-16831"><a href="/brand-guide/iconography">Iconography</a></li> <li class="leaf menu-mlid-1806"><a href="/brand-guide/using-ucsf-name">Using the UCSF Name</a></li> <li class="last leaf has-children menu-mlid-1816"><a href="/brand-guide/ucsf-health">UCSF Health Guidelines</a></li> </ul></li> <li class="expanded menu-mlid-2226"><a href="/print-digital">Print & Digital</a><ul class="menu"><li class="first leaf menu-mlid-1826"><a href="/print-digital/print-guidelines">Print Guidelines</a></li> <li class="leaf menu-mlid-1861"><a href="/print-digital/digital-guidelines">Digital Guidelines</a></li> <li class="leaf menu-mlid-1841"><a href="/print-digital/websites">Websites</a></li> <li class="last leaf menu-mlid-1866"><a href="/print-digital/social-media">Social Media</a></li> </ul></li> <li class="expanded menu-mlid-1731"><a href="/photography-video">Photography & Video</a><ul class="menu"><li class="first leaf menu-mlid-1846"><a href="/photography-and-video/photography-standards">Photography Standards</a></li> <li class="leaf menu-mlid-1876"><a href="/photography-video/brand-photography-library">Brand Photography Library</a></li> <li class="last leaf menu-mlid-1851"><a href="/photography-video/video-standards">Video Standards</a></li> </ul></li> <li class="expanded menu-mlid-1726"><a href="/templates-examples">Templates & Examples</a><ul class="menu"><li class="first leaf menu-mlid-1741"><a href="/templates-examples/correspondence">Correspondence</a></li> <li class="leaf menu-mlid-1756"><a href="/templates-examples/presentation">Presentation</a></li> <li class="leaf menu-mlid-2231"><a href="/templates-examples/print-materials">Print Materials</a></li> <li class="leaf menu-mlid-2236"><a href="/templates-examples/posters-digital-signage">Posters & Digital Signage</a></li> <li class="leaf menu-mlid-1766"><a href="/templates-examples/campus-signage">Campus Signage</a></li> <li class="leaf menu-mlid-1771"><a href="/templates-examples/merchandise">Merchandise</a></li> <li class="last leaf menu-mlid-13056"><a href="/zoom-backgrounds">Zoom Backgrounds</a></li> </ul></li> <li class="last leaf menu-mlid-1736"><a href="/faq-contact">FAQ</a></li> </ul></div> </div> </div> </div> </div> </div> <div id="breadcrumb" class="row-full-width"><div class="inside"><h2 class="element-invisible">You are here</h2><div class="breadcrumb"><a href="/">Home</a> > <a href="/brand-guide">Brand Guide</a> > <span class="breadcrumb-page-title">Color</span></div></div></div> <div class="content-top"> <div class="region region-content-top"> <div id="block-fieldblock-node-page-default-field-hero-header-content" class="block block-fieldblock"> <div class="content"> <div class="field field-name-field-hero-header-content field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><h1>Color</h1> <p>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鈥檚 personality.</p> </div></div></div> </div> </div> </div> </div> <div id="main-wrapper"> <div id="main" class="clearfix"> <div id="content" class="column"> <div class="inside"> <a id="main-content"></a> <div class="tabs"></div> <div class="region region-content"> <div id="block-system-main" class="block block-system"> <div class="content"> <div id="node-66" class="node node-page header--navy clearfix" about="/brand-guide/color" typeof="sioc:Item foaf:Document"> <span property="dc:title" content="Color" class="rdf-meta element-hidden"></span><span property="sioc:num_replies" content="0" datatype="xsd:integer" class="rdf-meta element-hidden"></span> <div class="content"> <div class="field field-name-field-body field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p><img alt="Grid of squares and rectangles in various colors with a white UCSF logo in the center" height="1104" src="/sites/g/files/tkssra266/f/wysiwyg/UCSF-color-grid.jpg" width="1788" /></p> <h2>The UCSF Color Palette</h2> <div class="wysiwyg_twocols layout--60-40"> <div class="wysiwyg_twocols--first bg--transparent"> <p class="feature-text">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鈥檚 core colors, allowing vibrant and unique design expressions.</p> <p>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.</p> <p>Lastly, when and if needed, a set of secondary colors are available for specific use cases such as alerts or notifications within digital applications.</p> <p>When displaying text or elements that are meant to be interactive, please be aware that UCSF must comply with <a href="https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum">WCAG 2.0 AA standards</a>. Contrast levels are listed below for either navy text (#052049) or white text (#FFFFFF) on each color background.</p> <p>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 / 18.67 pixels <em>if</em> it is bold.</p> <p>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 <a href="https://ucsf.app.box.com/file/238615561051?s=n2lb6gfiqr0fbh9qdn16b9td887ti1i5" target="_blank">PDF brand guidelines</a> for further details on color usage.</p> </div> <div class="wysiwyg_twocols--second bg--interactive-light-navy"> <h4>Downloads</h4> <p>Download versions of the color palette for easy use in either your design applications or on your desktop.</p> <p><a class="btn--small btn--more--white btn--full-width" href="https://ucsf.box.com/s/bjj6c3ciep60zkr517kpdl67wrspth2g">Download Color Palette</a></p> <h4>Accessibility</h4> <p>When combining colors, check contrast levels for minimum legibility.</p> <p><a class="btn--small btn--more--white btn--full-width" href="https://webaim.org/resources/contrastchecker/">Check Contrast Levels for Legibility</a></p> <h4>Extended Palette</h4> <p>If you鈥檙e a graphic or web designer working on a major project for UCSF, please contact <a href="/cdn-cgi/l/email-protection#0a636e6f647e637e734a7f69796c246f6e7f"><span class="__cf_email__" data-cfemail="1b727f7e756f726f625b6e78687d357e7f6e">[email protected]</span></a> for access to the extended color palette.</p> </div> </div> <h3>Neutrals</h3> <div class="color-row"> <div class="color-swatch color-a1-navy color-swatch-full"> <h4>A1 UCSF Navy</h4> <ul> <li>#052049</li> <li>R5 G32 B73</li> <li>C100 M53 Y0 K72</li> <li>PMS 7463</li> <li>Contrast 16.03:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-i6-gray"> <h4>I6</h4> <ul> <li>#F2F3F4</li> <li>R242 G243 B244</li> <li>C4 M2 Y2 K0</li> <li>Contrast 14.43:1</li> </ul> </div> <div class="color-swatch color-j5-gray"> <h4>J5</h4> <ul> <li>#E1E3E5</li> <li>R225 G227 B230</li> <li>C9 M5 Y3 K0</li> <li>Contrast 12.46:1</li> </ul> </div> <div class="color-swatch color-k3-gray"> <h4>K3 Gray</h4> <ul> <li>#D1D3D3</li> <li>R209 G211 B211</li> <li>C24 M17 Y15 K0</li> <li>PMS Cool Gray 4</li> <li>Contrast 10.66:1</li> </ul> </div> <div class="color-swatch color-j3-gray"> <h4>J3 Cool Gray</h4> <ul> <li>#B4B9BF</li> <li>R180 G185 B191</li> <li>C21 M13 Y8 K0</li> <li>PMS 428</li> <li>Contrast 8.12:1</li> </ul> </div> <div class="color-swatch color-j2-gray"> <h4>J2</h4> <ul> <li>#878D96</li> <li>R135 G141 B150</li> <li>C35 M23 Y19 K2</li> <li>PMS 429</li> <li>Contrast 4.79:1</li> </ul> </div> <div class="color-swatch color-i3-gray"> <h4>I3 Blue Gray</h4> <ul> <li>#506380</li> <li>R80 G99 B128</li> <li>C73 M53 Y16 K20</li> <li>PMS 2374</li> <li>Contrast 6.1:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-ff-white"> <h4>White</h4> <ul> <li>#FFFFFF</li> <li>R255 G255 B255</li> <li>C0 M0 Y10 K0</li> <li>Contrast 16.03:1</li> </ul> </div> <div class="color-swatch color-swatch-end color-00-black"> <h4>Black</h4> <ul> <li>#000000</li> <li>R0 G0 B0</li> <li>C0 M0 Y0 K100</li> <li>Contrast 21:1</li> </ul> </div> </div> <h3>Primary Colors</h3> <div class="color-row-desktop"> <div class="color-row"> <div class="color-swatch color-a1-navy"> <h4>A1 UCSF Navy</h4> <ul> <li>#052049</li> <li>R5 G32 B73</li> <li>C100 M53 Y0 K72</li> <li>PMS 7463</li> <li>Contrast 16.03:1</li> </ul> </div> <div class="color-swatch color-c1-teal"> <h4>C1</h4> <ul> <li>#0E5258</li> <li>R14 G82 B88</li> <li>C100 M0 Y29 K64</li> <li>PMS 3165</li> <li>Contrast 8.87:1</li> </ul> </div> <div class="color-swatch color-d1-green"> <h4>D1</h4> <ul> <li>#00483A</li> <li>R0 G72 B58</li> <li>C92 M14 Y67 K70</li> <li>PMS 3308</li> <li>Contrast 10.56:1</li> </ul> </div> <div class="color-swatch color-f1-purple"> <h4>F1</h4> <ul> <li>#2E2872</li> <li>R46 G40 B114</li> <li>C99 M97 Y0 K15</li> <li>PMS 2372</li> <li>Contrast 12.63:1</li> </ul> </div> <div class="color-swatch color-g1-violet"> <h4>G1</h4> <ul> <li>#461850</li> <li>R70 G24 B80</li> <li>C83 M100 Y0 K44</li> <li>PMS 2627</li> <li>Contrast 13.93:1</li> </ul> </div> <div class="color-swatch color-h1-magenta"> <h4>H1</h4> <ul> <li>#561038</li> <li>R86 G16 B56</li> <li>C26 M100 Y0 K57</li> <li>PMS 2357</li> <li>Contrast 13.75:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-a2-blue"> <h4>A2</h4> <ul> <li>#0F388A</li> <li>R15 G56 B138</li> <li>C100 M81 Y0 K17</li> <li>PMS 2146</li> <li>Contrast 10.75:1</li> </ul> </div> <div class="color-swatch color-c2-teal"> <h4>C2</h4> <ul> <li>#14828C</li> <li>R20 G130 B140</li> <li>C100 M0 Y29 K24</li> <li>PMS 7713</li> <li>Contrast 4.56:1</li> </ul> </div> <div class="color-swatch color-d2-green"> <h4>D2</h4> <ul> <li>#007242</li> <li>R0 G114 B66</li> <li>C94 M3 Y78 K44</li> <li>PMS 7728</li> <li>Contrast 6.02:1</li> </ul> </div> <div class="color-swatch color-f2-purple"> <h4>F2</h4> <ul> <li>#443E8C</li> <li>R68 G62 B140</li> <li>C80 M83 Y0 K1</li> <li>PMS 7671</li> <li>Contrast 9.07:1</li> </ul> </div> <div class="color-swatch color-g2-violet"> <h4>G2</h4> <ul> <li>#6C247C</li> <li>R108 G36 B124</li> <li>C64 M100 Y0 K7</li> <li>PMS 259</li> <li>Contrast 9.62:1</li> </ul> </div> <div class="color-swatch color-h2-magenta"> <h4>H2</h4> <ul> <li>#821A56</li> <li>R130 G26 B86</li> <li>C18 M100 Y0 K37</li> <li>PMS 235</li> <li>Contrast 9.41:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-b3-blue"> <h4>B3 Blue</h4> <ul> <li>#178CCB</li> <li>R23 G140 B203</li> <li>C100 M15 Y0 K6</li> <li>PMS Process Blue</li> <li><em>Contrast 4.31:1**</em></li> </ul> </div> <div class="color-swatch color-c3-teal"> <h4>C3 Teal</h4> <ul> <li>#16A0AC</li> <li>R22 G160 B172</li> <li>C91 M0 Y30 K0</li> <li>PMS 7466</li> <li>Contrast 5.08:1</li> </ul> </div> <div class="color-swatch color-d3-green"> <h4>D3 Green</h4> <ul> <li>#32A03E</li> <li>R50 G160 B62</li> <li>C81 M0 Y100 K0</li> <li>PMS 2423</li> <li>Contrast 4.76:1</li> </ul> </div> <div class="color-swatch color-f3-purple"> <h4>F3 Purple</h4> <ul> <li>#6C62D0</li> <li>R108 G98 B208</li> <li>C67 M58 Y0 K0</li> <li>PMS 2366</li> <li>Contrast 4.88:1</li> </ul> </div> <div class="color-swatch color-g3-violet"> <h4>G3 Violet</h4> <ul> <li>#A238BA</li> <li>R162 G56 B186</li> <li>C41 M77 Y0 K0</li> <li>PMS 2582</li> <li>Contrast 5.51:1</li> </ul> </div> <div class="color-swatch color-h3-magenta"> <h4>H3 Magenta</h4> <ul> <li>#C42882</li> <li>R196 G40 B130</li> <li>C0 M100 Y0 K2</li> <li>PMS 226</li> <li>Contrast 5.28:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-b5-blue"> <h4>B5</h4> <ul> <li>#B8E6FA</li> <li>R184 G230 B250</li> <li>C25 M0 Y0 K0</li> <li>Contrast 12.01:1</li> </ul> </div> <div class="color-swatch color-c4-teal"> <h4>C4</h4> <ul> <li>#60D0DA</li> <li>R96 G208 B218</li> <li>C60 M0 Y16 K0</li> <li>PMS 319</li> <li>Contrast 8.8:1</li> </ul> </div> <div class="color-swatch color-e3-green"> <h4>E3 Chartreuse</h4> <ul> <li>#84C234</li> <li>R132 G194 B52</li> <li>C50 M0 Y100 K0</li> <li>PMS 3561</li> <li>Contrast 7.44:1</li> </ul> </div> <div class="color-swatch color-f4-purple"> <h4>F4 Yosemite</h4> <ul> <li>#8A8CE3</li> <li>R138 G140 B227</li> <li>C52 M37 Y0 K0</li> <li>PMS 7452</li> <li>Contrast 5.3:1</li> </ul> </div> <div class="color-swatch color-g4-violet"> <h4>G4</h4> <ul> <li>#C45ED8</li> <li>R196 G94 B216</li> <li>C23 M49 Y0 K0</li> <li>PMS 2572</li> <li>Contrast 4.53:1</li> </ul> </div> <div class="color-swatch color-h4-magenta"> <h4>H4</h4> <ul> <li>#E266AE</li> <li>R226 G102 B174</li> <li>C0 M72 Y1 K0</li> <li>PMS 2038</li> <li>Contrast 5.15:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-b6-blue"> <h4>B6</h4> <ul> <li>#E2F4FC</li> <li>R226 G244 B252</li> <li>C9 M0 Y0 K0</li> <li>Contrast 14.19:1</li> </ul> </div> <div class="color-swatch color-c5-teal"> <h4>C5</h4> <ul> <li>#B4E2E8</li> <li>R180 G226 B232</li> <li>C27 M0 Y8 K0</li> <li>Contrast 11.44:1</li> </ul> </div> <div class="color-swatch color-e4-green"> <h4>E4 Point Reyes</h4> <ul> <li>#B4DC55</li> <li>R180 G220 B85</li> <li>C26 M0 Y95 K0</li> <li>PMS 2297</li> <li>Contrast 10.16:1</li> </ul> </div> <div class="color-swatch color-f5-purple"> <h4>F5</h4> <ul> <li>#C0C0EA</li> <li>R192 G192 B234</li> <li>C23 M21 Y0 K0</li> <li>Contrast 9.14:1</li> </ul> </div> <div class="color-swatch color-g5-violet"> <h4>G5</h4> <ul> <li>#EACCF0</li> <li>R234 G204 B240</li> <li>C8 M20 Y0 K0</li> <li>Contrast 10.99:1</li> </ul> </div> <div class="color-swatch color-h5-magenta"> <h4>H5</h4> <ul> <li>#F2C2DE</li> <li>R242 G194 B222</li> <li>C2 M28 Y0 K0</li> <li>Contrast 10.34:1</li> </ul> </div> </div> </div>  <div class="color-row-mobile"> <div class="color-row"> <div class="color-swatch color-a1-navy"> <h4>A1 UCSF Navy</h4> <ul> <li>#052049</li> <li>R5 G32 B73</li> <li>C100 M53 Y0 K72</li> <li>PMS 7463</li> <li>Contrast 16.03:1</li> </ul> </div> <div class="color-swatch color-c1-teal"> <h4>C1</h4> <ul> <li>#0E5258</li> <li>R14 G82 B88</li> <li>C100 M0 Y29 K64</li> <li>PMS 3165</li> <li>Contrast 8.87:1</li> </ul> </div> <div class="color-swatch color-d1-green"> <h4>D1</h4> <ul> <li>#00483A</li> <li>R0 G72 B58</li> <li>C92 M14 Y67 K70</li> <li>PMS 3308</li> <li>Contrast 10.56:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-a2-blue"> <h4>A2</h4> <ul> <li>#0F388A</li> <li>R15 G56 B138</li> <li>C100 M81 Y0 K17</li> <li>PMS 2146</li> <li>Contrast 10.75:1</li> </ul> </div> <div class="color-swatch color-c2-teal"> <h4>C2</h4> <ul> <li>#14828C</li> <li>R20 G130 B140</li> <li>C100 M0 Y29 K24</li> <li>PMS 7713</li> <li>Contrast 4.56:1</li> </ul> </div> <div class="color-swatch color-d2-green"> <h4>D2</h4> <ul> <li>#007242</li> <li>R0 G114 B66</li> <li>C94 M3 Y78 K44</li> <li>PMS 7728</li> <li>Contrast 6.02:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-b3-blue"> <h4>B3 Blue</h4> <ul> <li>#178CCB</li> <li>R23 G140 B203</li> <li>C100 M15 Y0 K6</li> <li>PMS Process Blue</li> <li><em>Contrast 4.31:1**</em></li> </ul> </div> <div class="color-swatch color-c3-teal"> <h4>C3 Teal</h4> <ul> <li>#16A0AC</li> <li>R22 G160 B172</li> <li>C91 M0 Y30 K0</li> <li>PMS 7466</li> <li>Contrast 5.08:1</li> </ul> </div> <div class="color-swatch color-d3-green"> <h4>D3 Green</h4> <ul> <li>#32A03E</li> <li>R50 G160 B62</li> <li>C81 M0 Y100 K0</li> <li>PMS 2423</li> <li>Contrast 4.76:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-b5-blue"> <h4>B5</h4> <ul> <li>#B8E6FA</li> <li>R184 G230 B250</li> <li>C25 M0 Y0 K0</li> <li>Contrast 12.01:1</li> </ul> </div> <div class="color-swatch color-c4-teal"> <h4>C4</h4> <ul> <li>#60D0DA</li> <li>R96 G208 B218</li> <li>C60 M0 Y16 K0</li> <li>PMS 319</li> <li>Contrast 8.8:1</li> </ul> </div> <div class="color-swatch color-e3-green"> <h4>E3 Chartreuse</h4> <ul> <li>#84C234</li> <li>R132 G194 B52</li> <li>C50 M0 Y100 K0</li> <li>PMS 3561</li> <li>Contrast 7.44:1</li> </ul> </div> </div> <div class="color-row color-row-space"> <div class="color-swatch color-b6-blue"> <h4>B6</h4> <ul> <li>#E2F4FC</li> <li>R226 G244 B252</li> <li>C9 M0 Y0 K0</li> <li>Contrast 14.19:1</li> </ul> </div> <div class="color-swatch color-c5-teal"> <h4>C5</h4> <ul> <li>#B4E2E8</li> <li>R180 G226 B232</li> <li>C27 M0 Y8 K0</li> <li>Contrast 11.44:1</li> </ul> </div> <div class="color-swatch color-e4-green"> <h4>E4 Point Reyes</h4> <ul> <li>#B4DC55</li> <li>R180 G220 B85</li> <li>C26 M0 Y95 K0</li> <li>PMS 2297</li> <li>Contrast 10.16:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-f1-purple"> <h4>F1</h4> <ul> <li>#2E2872</li> <li>R46 G40 B114</li> <li>C99 M97 Y0 K15</li> <li>PMS 2372</li> <li>Contrast 12.63:1</li> </ul> </div> <div class="color-swatch color-g1-violet"> <h4>G1</h4> <ul> <li>#461850</li> <li>R70 G24 B80</li> <li>C83 M100 Y0 K44</li> <li>PMS 2627</li> <li>Contrast 13.93:1</li> </ul> </div> <div class="color-swatch color-h1-magenta"> <h4>H1</h4> <ul> <li>#561038</li> <li>R86 G16 B56</li> <li>C26 M100 Y0 K57</li> <li>PMS 2357</li> <li>Contrast 13.75:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-f2-purple"> <h4>F2</h4> <ul> <li>#443E8C</li> <li>R68 G62 B140</li> <li>C80 M83 Y0 K1</li> <li>PMS 7671</li> <li>Contrast 9.07:1</li> </ul> </div> <div class="color-swatch color-g2-violet"> <h4>G2</h4> <ul> <li>#6C247C</li> <li>R108 G36 B124</li> <li>C64 M100 Y0 K7</li> <li>PMS 259</li> <li>Contrast 9.62:1</li> </ul> </div> <div class="color-swatch color-h2-magenta"> <h4>H2</h4> <ul> <li>#821A56</li> <li>R130 G26 B86</li> <li>C18 M100 Y0 K37</li> <li>PMS 235</li> <li>Contrast 9.41:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-f3-purple"> <h4>F3 Purple</h4> <ul> <li>#6C62D0</li> <li>R108 G98 B208</li> <li>C67 M58 Y0 K0</li> <li>PMS 2366</li> <li>Contrast 4.88:1</li> </ul> </div> <div class="color-swatch color-g3-violet"> <h4>G3 Violet</h4> <ul> <li>#A238BA</li> <li>R162 G56 B186</li> <li>C41 M77 Y0 K0</li> <li>PMS 2582</li> <li>Contrast 5.51:1</li> </ul> </div> <div class="color-swatch color-h3-magenta"> <h4>H3 Magenta</h4> <ul> <li>#C42882</li> <li>R196 G40 B130</li> <li>C0 M100 Y0 K2</li> <li>PMS 226</li> <li>Contrast 5.28:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-f4-purple"> <h4>F4 Yosemite</h4> <ul> <li>#8A8CE3</li> <li>R138 G140 B227</li> <li>C52 M37 Y0 K0</li> <li>PMS 7452</li> <li>Contrast 5.3:1</li> </ul> </div> <div class="color-swatch color-g4-violet"> <h4>G4</h4> <ul> <li>#C45ED8</li> <li>R196 G94 B216</li> <li>C23 M49 Y0 K0</li> <li>PMS 2572</li> <li>Contrast 4.53:1</li> </ul> </div> <div class="color-swatch color-h4-magenta"> <h4>H4</h4> <ul> <li>#E266AE</li> <li>R226 G102 B174</li> <li>C0 M72 Y1 K0</li> <li>PMS 2038</li> <li>Contrast 5.15:1</li> </ul> </div> </div> <div class="color-row"> <div class="color-swatch color-f5-purple"> <h4>F5</h4> <ul> <li>#C0C0EA</li> <li>R192 G192 B234</li> <li>C23 M21 Y0 K0</li> <li>Contrast 9.14:1</li> </ul> </div> <div class="color-swatch color-g5-violet"> <h4>G5</h4> <ul> <li>#EACCF0</li> <li>R234 G204 B240</li> <li>C8 M20 Y0 K0</li> <li>Contrast 10.99:1</li> </ul> </div> <div class="color-swatch color-h5-magenta"> <h4>H5</h4> <ul> <li>#F2C2DE</li> <li>R242 G194 B222</li> <li>C2 M28 Y0 K0</li> <li>Contrast 10.34:1</li> </ul> </div> </div> </div>  <p><em>**Color combination can only be used for large text.</em></p> <h3>Call-to-Action (CTA)</h3> <div class="color-row"> <div class="color-swatch color-a3-blue-cta"> <h4>A3 CTA Blue</h4> <ul> <li>#006BE9</li> <li>R0 G107 B233</li> <li>C91 M60 Y0 K0</li> <li>PMS 2387</li> <li>Contrast 4.9:1</li> </ul> </div> </div> <h3>Secondary Colors</h3> <div class="color-row"> <div class="color-swatch color-l3-yellow"> <h4>L3 Yellow</h4> <ul> <li>#FEB80A</li> <li>R254 G184 B10</li> <li>C0 M22 Y100 K0</li> <li>PMS 7549</li> <li>Contrast 9.22:1</li> </ul> </div> <div class="color-swatch color-m3-orange"> <h4>M3 Orange</h4> <ul> <li>#FA6E1E</li> <li>R250 G110 B330</li> <li>C0 M66 Y99 K0</li> <li>PMS 1585</li> <li>Contrast 5.58:1</li> </ul> </div> <div class="color-swatch color-n3-red"> <h4>N3 Red</h4> <ul> <li>#E61048</li> <li>R230 G16 B72</li> <li>C0 M100 Y52 K0</li> <li>PMS 1925</li> <li>Contrast 4.63:1</li> </ul> </div> </div> </div></div></div> </div> </div> </div> </div> </div> </div> </div> <div id="sidebar" class="column"> <div class="sidebar"> <div class="section"> <div class="region region-sidebar"> <div id="block-fieldblock-node-page-default-field-textarea-hero-sidebar" class="block block-fieldblock sidebar-banner"> <div class="content"> <div class="field field-name-field-textarea-hero-sidebar field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p><a href="/brand-guide/brand-story">Brand Story 禄</a></p> <p><a href="/brand-guide/logos">Logos 禄</a></p> <p><strong><a href="/brand-guide/color">Color 禄</a></strong></p> <p><a href="/brand-guide/fonts">Fonts/Typography 禄</a></p> <p><a href="/brand-guide/editorial-expression">Editorial Expression 禄</a></p> <p><a href="/brand-guide/visual-framework">Visual Framework 禄</a></p> <p><a href="/brand-guide/patterns">Patterns 禄</a></p> <p><a href="/brand-guide/iconography">Iconography 禄</a></p> <p><a href="/brand-guide/using-ucsf-name">Using the UCSF Name 禄</a></p> <p><a href="/brand-guide/ucsf-health">UCSF Health Guidelines 禄</a></p> </div></div></div> </div> </div> </div> </div> </div> </div> </div></div> <div id="footer"> <div class="section"> <div class="region region-footer"> <div id="block-block-41" class="block block-block"> <div class="content"> <div class="wysiwyg_threecols layout--33-33-33"> <div class="wysiwyg_threecols--first bg--undefined bg--transparent"> <h5><a href="/brand-guide" style="color: #ffffff;">BRAND GUIDE</a></h5> <hr color="white" /> <p><a href="/brand-guide/logos" style="color: #ffffff;">Brand Story</a><br /> <a href="/brand-guide/logos" style="color: #ffffff;">Logos</a><br /> <a href="/brand-guide/color" style="color: #ffffff;">Colors</a><br /> <a href="/brand-guide/fonts" style="color: #ffffff;">Fonts/Typography</a><br /> <a href="/brand-guide/editorial-expression" style="color: #ffffff;">Editorial Expression</a><br /> <a href="/brand-guide/visual-framework" style="color: #ffffff;">Visual Framework</a><br /> <a href="/brand-guide/using-ucsf-name" style="color: #ffffff;">Using the UCSF Name</a><br /> <a href="/brand-guide/ucsf-health" style="color: #ffffff;">UCSF Health Guidelines</a></p> <p>聽</p> </div> <div class="wysiwyg_threecols--second bg--undefined bg--transparent"> <h5><a href="/print-digital" style="color: #ffffff;">PRINT & DIGITAL</a></h5> <hr color="white" /> <p><a href="/print-digital/digital-guidelines" style="color: #ffffff;">Print Guidelines</a><br /> <a href="/print-digital/digital-guidelines" style="color: #ffffff;">Digital Guidelines</a><br /> <a href="/print-digital/digital-colors" style="color: #ffffff;">Digital Colors</a><br /> <a href="/print-digital/websites" style="color: #ffffff;">Websites</a><br /> <a href="/print-digital/social-media" style="color: #ffffff;">Social Media</a></p> <p>聽</p> <h5><a href="/photography-video" style="color: #ffffff;">PHOTOGRAPHY & VIDEO</a></h5> <hr color="white" /> <p><a href="/photography-and-video/photography-standards" style="color: #ffffff;">Photography Standards</a><br /> <a href="/photography-video/brand-photography-library" style="color: #ffffff;">Brand Photography Library</a><br /> <a href="/photography-video/video-standards" style="color: #ffffff;">Video Standards</a></p> <p>聽</p> </div> <div class="wysiwyg_threecols--third bg--undefined bg--transparent"> <h5><a href="/templates-examples" style="color: #ffffff;">TEMPLATES & EXAMPLES</a></h5> <hr color="white" /> <p><a href="/templates-examples/correspondence" style="color: #ffffff;">Correspondence</a><br /> <a href="/templates-examples/presentation" style="color: #ffffff;">Presentation</a><br /> <a href="/templates-examples/print-materials" style="color: #ffffff;">Print Materials</a><br /> <a href="/templates-examples/posters-digital-signage" style="color: #ffffff;">Posters and Digital Signage</a><br /> <a href="/templates-examples/campus-signage" style="color: #ffffff;">Campus聽Signage</a><br /> <a href="/templates-examples/merchandise" style="color: #ffffff;">Merchandise</a></p> </div> </div> </div> </div> </div> <div class="footer-bottom"> <nav aria-label="Footer Navigation" class="footer--navigation"> <ul> <li><a href="https://www.ucsf.edu/accessibility-resources">Accessibility</a></li> <li><a href="https://www.ucsf.edu/website-privacy-policy">Privacy Policy</a></li> <li><a href="https://websites.ucsf.edu/website-terms-use">Terms of Use </a></li> <li><a href="https://websites.ucsf.edu/azlist">A-Z Website List</a></li> </ul> </nav> <div class="footer--copyright"> <p>© 2024 The Regents of the University of California</p> </div> </div> </div> </div> </div> </div> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript"> <![CDATA[//><!]]> </script> <script type="text/javascript"> /*<![CDATA[*/ (function() { var sz = document.createElement('script'); sz.type = 'text/javascript'; sz.async = true; sz.src = '//siteimproveanalytics.com/js/siteanalyze_8343.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sz, s); })(); /*]]>*/ </script> </body> </html>