Color

Color is crucial to our visual identity. Color brings visual interest to our communications, helps to maintain a consistent look and feel, and differentiates us from other organizations.

Color overview

The AP color palette consists of AP ID Red, a set of neutral grays in warm and cool hues and eight sub color palettes. Each neutral and individual color palette contains a deep, rich, medium and bright hue. The neutral palettes can be further extended if necessary by creating alpha transparencies using no smaller than 10% increments. AP ID Red should be used judiciously in order to maintain its prominence.

All of the color combinations represented below have a contrast ratio of at least 4.5:1 and are WCAG AA compliant, with the exception of AP ID Red and AP Cerulean Bright which are 4.02:1 and 4.24:1 respectively. Please review our color section in design systems for further guidance and examples.

Ap Color Design System

AP ID Red

AP ID Red
#EF3340
$ap-id-red

AP cool neutrals

AP Gray Cool Bright
#ececec
$ap-gray-cool-bright
AP Gray Cool Medium
#b5b5b6
$ap-gray-cool-medium
AP Gray Cool Rich
#787878
$ap-gray-cool-rich
AP Gray Cool Deep
#2C2C2C
$ap-gray-cool-deep

AP warm neutrals

AP Gray Warm Bright
#ece8df
$ap-gray-warm-bright
AP Gray Warm Medium
#c3c3b9
$ap-gray-warm-medium
AP Gray Warm Rich
#878781
$ap-gray-warm-rich
AP Gray Warm Deep
#424242
$ap-gray-warm-deep

AP Cerulean

AP Cerulean Bright
#448bff
$ap-cerulean-bright
AP Cerulean Medium
#104ba5
$ap-cerulean-medium
AP Cerulean Rich
#0a3175
$ap-cerulean-rich
AP Cerulean Deep
#06153f
$ap-cerulean-deep

AP Blue

AP Blue Bright
#1ca7da
$ap-blue-bright
AP Blue Medium
#117da5
$ap-blue-medium
AP Blue Rich
#0b5475
$ap-blue-rich
AP Blue Deep
#06263f
$ap-blue-deep

AP Turquoise

AP Turquoise Bright
#00c7ae
$ap-turquoise-bright
AP Turquoise Medium
#00a3a8
$ap-turquoise-medium
AP Turquoise Rich
#0b7579
$ap-turquoise-rich
AP Turquoise Deep
#0d393d
$ap-turquoise-deep

AP Green

AP Green Bright
#b1c70a
$ap-green-bright
AP Green Medium
#78a600
$ap-green-medium
AP Green Rich
#507200
$ap-green-rich
AP Green Deep
#233500
$ap-green-deep

AP Yellow

AP Yellow Bright
#f1be00
$ap-yellow-bright
AP Yellow Medium
#d8a538
$ap-yellow-medium
AP Yellow Rich
#95702f
$ap-yellow-rich
AP Brown Deep
#38261e
$ap-brown-deep

AP Orange

AP Orange Bright
#df8600
$ap-orange-bright
AP Orange Medium
#b1671e
$ap-orange-medium
AP Orange Rich
#7b490c
$ap-orange-rich
AP Orange Deep
#3d2600
$ap-orange-deep

AP Magenta

AP Magenta Bright
#df2c9d
$ap-magenta-bright
AP Magenta Medium
#a91e75
$ap-magenta-medium
AP Magenta Rich
#771251
$ap-magenta-rich
AP Magenta Deep
#3d0528
$ap-magenta-deep

AP Purple

AP Purple Bright
#b82dc1
$ap-purple-bright
AP Purple Medium
#993399
$ap-purple-medium
AP Purple Rich
#660775
$ap-purple-rich
AP Purple Deep
#3e0c41
$ap-purple-deep

AP color usage

Please visit our Design Systems: color usage to access our predefined color palettes and see examples of how color is applied.