Skip to main content

Colors

Color is an important component of our visual identity. To properly strengthen and maintain its effectiveness, care must be taken to ensure correct and consistent use in every application. While these guidelines include standards for proper application of our color palette, it is equally important to keep in mind the things we cannot do to or with our colors.

To ensure both visibility and legibility and maintain the integrity of the brand, there are limited ways in which the colors can be combined.

In addition to reinforcing the brand and conveying a specific tone, colors should be used to supplement the architecture and hierarchy of a page. They are also used to differentiate specific elements, such as those that are functional or active versus those that are static or inactive.

Things to Avoid

  • Do not use colors that are outside the system
  • Do not use tints of color other than CF Light Gray or CF Dark Gray
  • Do not use unapproved color pairings
  • Do not use unapproved background colors
  • Do not create linear color gradients
  • Do not create radial gradients
  • Do not create rainbow or spectrum effects
  • Do not use color borders around any field of color
  • Do not allow secondary colors to dominate an application
  • Do not use black and white images when full color is available

Primary

Primary colors are our core colors. They are used in most touchpoints.

 

#005c3e

RGB(0,92,62) $cf-dark-green
 

#007a3e

RGB(0,122,62) $cf-green
 

#73b695

RGB(115,182,149) $cf-green-55
 

#d9ebe2

RGB(217,235,226) $cf-green-15
 

#ffffff

RGB(255,255,255) $white

Secondary

Secondary colors are our supporting colors. They help to accent and complement the primary color palette. They should not be the dominant colors in any design.

 

#3d3935

RGB(61,57,63) $black
 

#64615d

RGB(100,97,93) $black-80
 

#8b8886

RGB(139,136,134) $black-60
 

#b1b0ae

RGB(177,176,174) $black-40
 

#d8d7d7

RGB(216,215,215) $black-20
 

#ecebeb

RGB(236,235,235) $black-10
 

#236192

RGB(35,97,146) $blue
 

#86a8c3

RGB(135,168,195) $blue-55
 

#dee7ef

RGB(222,231,239) $blue-15
 

#d9c756

RGB(217,199,86) $yellow
 

#f0e9bb

RGB(240,233,187) $yellow-40

Tertiary

 

#cb7337

RGB(203,115,55) $orange
 

#f7eae1

RGB(247,234,225) $orange-15
 

#a43333

RGB(164,51,51) $red
 

#f1e0e0

RGB(241,224,224) $red-15
 

#54466d

RGB(84,70,109) $purple
 

#e5e3e9

RGB(224,221,228) $purple-15