arrow-downarrow-leftarrow-rightarrow-upavatarcameracartchevron-upchevron-leftchevron-rightchevron-upclosecommentemailfullscreen-closefullscreen-opengridheadphonesheart-filledheart-openlockmap-geolocatormap-pushpinmenuminusng-borderpauseplayplusprintsearchsharefacebookgithubg+instagramlinkedinlinkedin_inpinterestpinterest_psnapchatsnapchat_2tumblrtwittervimeovinewhatsappspeakerstar-filledstar-openzoom-inzoom-out

Color Palette

National Geographic's visual brand is driven by stunning photography. Color should be used sparingly to indicate special importance, calls to action, or branding.

 

Using the Color Class Names

The color classes on this page may be applied to an object's background, border, or fill.

To alter an object's background color, use the mt2_bgcolor--* class. Replace the asterisk with the desired color keyword, like primary, shown below. See the bottom of this page for more keywords.

 
<div class="mt2_bgcolor--primary"></div>

To alter an object's border color, use the mt2_border--* class.

 
<div class="mt2_bordercolor--primary"></div>

To alter text color or an SVG's fill color, use the mt2_color--* class.

Yellow Text

<h3 class="mt2_h3 mt2_color--primary">Yellow Text </h3>

<svg class="mt2_icon mt2_color--primary">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitter"></use>
</svg>
 

Brand Colors

Yellow is the primary brand color for National Geographic. This should be used for most accents or calls to action. Tints are also available but should be used rarely, such as for background color fields, showing data in a graduated way, or as hover states.

 
primary
#FFCC00
 
primary--l
#FFE066
 
primary--xl
#FFEB99
 

Neutrals

Neutral grays are available in the following shades and are used mainly for type elements, background color fields, and borders.

neutral--xxd
#000000
neutral--xd
#191919
neutral--d
#333333
neutral
#808080
neutral--l
#B3B3B3
neutral--xl
#E6E6E6
neutral--xxl
#F2F2F2
neutral--xxxl
#FFFFFF
 

Transactions

Green and red swatches are provided for affirmation and warning use cases, such as calls to action or alerts.

affirmation
#1EBE28
affirmation--l
#56CE5E
danger
#F02000
danger--l
#F45840
 

Social Brands

Whenever possible,social icons should be displayed in their native brand colors, or in white on a native background color field.

social--facebook
#3B5998
social--twitter
#55ACEE
social--pinterest
#BD081C
social--google-plus
#DC4E41
social--linkedin
#0077B5
social--whatsapp
#43D854
social--tumblr
#35465C
social--instagram
#3F729B
social--youtube
#CD201F
social--vine
#00BF8F
social--snapchat
#FFFC00
social--flickr
#FF0084
social--vimeo
#1AB7EA