Color

The AP color system is flexible by design and can range from bold and expressive to neutral and restrained. Color application choices are always informed by the content, context and people for whom the design serves.

Color model

AP designs typically use a neutral background that is either light or dark, cool or warm. Cool neutrals tend to work better in digital applications and warmer neutrals in print and physical applications.

Color applications in task-based or productive digital products should skew more subtle and restrained where as color used in promotional or informative designs may be more bold and immersive.

Ap Color Model

Ap Ds Cerulean Desktop
Ap Ds Cerulean Dark Desktop

AP Cerulean

Primary hues
AP Cerulean Deep
#06153f
$ap-cerulean-deep
AP Cerulean Rich
#0a3175
$ap-cerulean-rich
AP Cerulean Medium
#104ba5
$ap-cerulean-medium
AP Cerulean Bright
#448bff
$ap-cerulean-bright
Secondary hues
AP Turquoise Rich
#0b7579
$ap-turquoise-rich
AP Turquoise Medium
#00a3a8
$ap-turquoise-medium
Neutral grays
AP Gray Cool Deep
#2c2c2c
$ap-gray-cool-deep
AP Gray Cool Rich
#787878
$ap-gray-cool-rich
AP Gray Cool Medium
#b5b5b6
$ap-gray-cool-medium
AP Gray Cool Bright
#ececec
$ap-gray-cool-bright
Accent hue
AP Yellow Bright
#f1be00
$ap-yellow-bright

AP Blue

Primary hues
AP Blue Deep
#06263f
$ap-blue-deep
AP Blue Rich
#0b5475
$ap-blue-rich
AP Blue Medium
#117da5
$ap-blue-medium
AP Blue Bright
#1ca7da
$ap-blue-bright
Secondary hues
AP Green Rich
#0b7579
$ap-green-rich
AP Green Medium
#00a3a8
$ap-green-medium
Neutral grays
AP Gray Cool Deep
#2c2c2c
$ap-gray-cool-deep
AP Gray Cool Rich
#787878
$ap-gray-cool-rich
AP Gray Cool Medium
#b5b5b6
$ap-gray-cool-medium
AP Gray Cool Bright
#ececec
$ap-gray-cool-bright
Accent hue
AP Orange Bright
#f1be00
$ap-orange-bright

AP Turquoise

Primary hues
AP Turquoise Deep
#0d393d
$ap-turquoise-deep
AP Turquoise Rich
#0b7579
$ap-turquoise-rich
AP Turquoise Medium
#00a3a8
$ap-turquoise-medium
AP Turquoise Bright
#00c7ae
$ap-turquoise-bright
Secondary hues
AP Yellow Rich
#95702f
$ap-yellow-rich
AP Yellow Medium
#d8a538
$ap-yellow-medium
Neutral grays
AP Gray Cool Deep
#2c2c2c
$ap-gray-cool-deep
AP Gray Cool Rich
#787878
$ap-gray-cool-rich
AP Gray Cool Medium
#b5b5b6
$ap-gray-cool-medium
AP Gray Cool Bright
#ececec
$ap-gray-cool-bright
Accent hue
AP Yellow Bright
#f1be00
$ap-yellow-bright

AP Green

Primary hues
AP Green Deep
#233500
$ap-green-deep
AP Green Rich
#507200
$ap-green-rich
AP Green Medium
#78a600
$ap-green-medium
AP Green Bright
#b1c70a
$ap-green-bright
Secondary hues
AP Blue Rich
#0b5475
$ap-blue-rich
AP Blue Medium
#117da5
$ap-blue-medium
Neutral grays
AP Gray Cool Deep
#2c2c2c
$ap-gray-cool-deep
AP Gray Cool Rich
#787878
$ap-gray-cool-rich
AP Gray Cool Medium
#b5b5b6
$ap-gray-cool-medium
AP Gray Cool Bright
#ececec
$ap-gray-cool-bright
Accent hue
AP Orange Bright
#df8600
$ap-orange-bright

AP Orange

Primary hues
AP Orange Deep
#3d2600
$ap-orange-deep
AP Orange Rich
#7b490c
$ap-orange-rich
AP Orange Medium
#b1671e
$ap-orange-medium
AP Orange Bright
#df8600
$ap-orange-bright
Secondary hues
AP Purple Rich
#660775
$ap-purple-rich
AP Purple Medium
#993399
$ap-purple-medium
Neutral warm grays
AP Gray Warm Deep
#424242
$ap-gray-warm-deep
AP Gray Warm Rich
#878781
$ap-gray-warm-rich
AP Gray Warm Medium
#c3c3b9
$ap-gray-warm-medium
AP Gray Warm Bright
#ece8df
$ap-gray-warm-bright
Accent hue
AP Turquoise Bright
#00c7ae
$ap-turquoise-bright

AP Magenta

Primary hues
AP Magenta Deep
#3d0528
$ap-magenta-deep
AP Magenta Rich
#771251
$ap-magenta-rich
AP Magenta Medium
#a91e75
$ap-magenta-medium
AP Magenta Bright
#df2c9d
$ap-magenta-bright
Secondary hues
AP Blue Rich
#95702f
$ap-yellow-rich
AP Yellow Medium
#d8a538
$ap-yellow-medium
Neutral warm grays
AP Gray Warm Deep
#424242
$ap-gray-warm-deep
AP Gray Warm Rich
#878781
$ap-gray-warm-rich
AP Gray Warm Medium
#c3c3b9
$ap-gray-warm-medium
AP Gray Warm Bright
#ece8df
$ap-gray-warm-bright
Accent hue
AP Blue Bright
#1ca7da
$ap-blue-bright

AP Purple

Primary hues
AP Purple Deep
#3e0c41
$ap-purple-deep
AP Purple Rich
#660775
$ap-purple-rich
AP Purple Medium
#993399
$ap-purple-medium
AP Purple Bright
#b82dc1
$ap-purple-bright
Secondary hues
AP Yellow Rich
#95702f
$ap-yellow-rich
AP Yellow Medium
#d8a538
$ap-yellow-medium
Neutral warm grays
AP Gray Warm Deep
#424242
$ap-gray-warm-deep
AP Gray Warm Rich
#878781
$ap-gray-warm-rich
AP Gray Warm Medium
#c3c3b9
$ap-gray-warm-medium
AP Gray Warm Bright
#ece8df
$ap-gray-warm-bright
Accent hue
AP Turquoise Bright
#00c7ae
$ap-turquoise-bright