FEWS NET Brand
FEWS NET Brand
Breadcrumbs

Data Visualization Colors

Using data visualization colors

Use data visualization colors to represent data via charts, maps, and other visualizations that require many colors for clear understanding. These colors were selected for accessibility, readability, and contrast against the IPC data colors.

Refer to Visualizations for detail about when and how to use these colors. While these colors are intended to help maximize accessibility, not all combinations of these colors will be color safe, and you are responsible for verifying the usability and accessibility of any data visualizations you create using these colors.

Table of visualization colors.

Color values

Color style name

Hex value

RGB value

Token name

Sample of Red 800. Red 800

#451914

69, 25, 20

base-red-800

Sample of Red 700. Red 700

#541E18

84, 30, 24

base-red-700

Sample of Red 600. Red 600

#6D4140

109, 65, 64

base-red-600

Sample of Red 500. Red 500

#7A5A5A

122, 90, 90

base-red-500

Sample of Red 400. Red 400

#A88A8A

168, 138, 138

base-red-400

Sample of Orange 700. Orange 700

#AB4B1E

171, 75, 30

base-orange-700

Sample of Orange 600. Orange 600

#B95A38

185, 90, 56

base-orange-600

Sample of Orange 500. Orange 500

#BA6B55

186, 107, 85

base-orange-500

Sample of Orange 400. Orange 400

#D6A79A

214, 167, 154

base-orange-400

Sample of Yellow 600. Yellow 600

#FDD835

253, 216, 53

base-yellow-600

Sample of Yellow 500. Yellow 500

#FFEE58

255, 238, 88

base-yellow-500

Sample of Yellow 400. Yellow 400

#FFF59D

255, 245, 157

base-yellow-400

Sample of Yellow 200. Yellow 200

#FFF9C4

255, 249, 196

base-yellow-200

Sample of Olive 700. Olive 700

#484817

72, 72, 23

base-olive-700

Sample of Olive 600. Olive 600

#60613A

96, 97, 58

base-olive-600

Sample of Olive 500. Olive 500

#707257

112, 114, 87

base-olive-500

Sample of Olive 400. Olive 400

#9B9D80

155, 157, 128

base-olive-400

lime-600.png Lime 600

#689F38

104, 159, 56

base-lime-600

Sample of Lime 500. Lime 500

#8BC34A

139, 195, 74

base-lime-500

Sample of Lime 400. Lime 400

#AED581

174, 213, 129

base-lime-400

Sample of Lime 200. Lime 200

#DCEDC8

220, 237, 200

base-lime-200

Sample of Pine 800. Pine 800

#0C5D40

12, 93, 64

base-pine-800

Sample of Pine 700. Pine 700

#107157

16, 113, 87

base-pine-700

Sample of Pine 600. Pine 600

#2C8C79

44, 140, 121

base-pine-600

Sample of Pine 500. Pine 500

#319B86

49, 155, 134

base-pine-500

Sample of Ocean 400. Ocean 400

#BCDAE9

188, 218, 233

base-ocean-400

Sample of Blue 700. Blue 700

#305088

48, 80, 136

base-blue-700

Sample of Blue 600. Blue 600

#426FBC

66, 111, 188

base-blue-600

Sample of Blue 500. Blue 500

#688CCA

104, 140, 202

base-blue-500

Sample of Blue 400. Blue 400

#A6BFE2

166, 191, 226

base-blue-400

Sample of Purple 700. Purple 700

#492674

73, 38, 116

base-purple-700

Sample of Purple 600. Purple 600

#784595

120, 69, 149

base-purple-600

Sample of Purple 500. Purple 500

#A173B3

161, 115, 179

base-purple-500

Sample of Purple 400. Purple 400

#DBBEE0

219, 190, 224

base-purple-400

Sample of Steel 700. Steel 700

#416371

65, 99, 113

base-steel-700

Sample of Steel 600. Steel 600

#55747E

85, 116, 126

base-steel-600

Sample of Steel 500. Steel 500

#6A8188

106, 129, 136

base-steel-500

Sample of Steel 400. Steel 400

#98A9AE

152, 169, 174

base-steel-400

Sample of Charcoal 700. Charcoal 700

#0C1D28

12, 29, 40

base-charcoal-700

Sample of Charcoal 600. Charcoal 600

#3A454C

58, 69, 76

base-charcoal-600

Sample of Charcoal 500. Charcoal 500

#555E62

85, 94, 98

base-charcoal-500

Sample of Charcoal 400. Charcoal 400

#7C888D

124, 136, 141

base-charcoal-400

IPC data colors

FEWS NET uses the Integrated Food Security Phase Classification (IPC) colors on maps that display IPC-compatible analysis. See Map Body for color values and usage details.

Type

Phase

Fill color

Additional specifications

Acute Food Insecurity and Acute Malnutrition

None / Minimal

#CDFACD; RGB: 205, 250, 205


Stressed

#FAE61E; RGB: 250, 230, 030


Crisis

#E67800, RGB: 230, 120, 000


Emergency

#C80000, RGB: 200, 0, 0


Catastrophe / Famine

#640000, RGB: 100, 0, 0


Famine Likely

#640000, RGB: 100, 0, 0

Chronic Food Insecurity

None / Minimal

#CDFACD; RGB: 205, 250, 205


Mild

#CBC9E2; RGB: 203, 201, 226


Moderate

#9E9AC8; RGB: 158, 154, 200


Severe

#6A51A3; RGB: 106, 81, 163


All types

Areas not analyzed

#BDBDBD; RGB: 189, 189, 189


Contact us if you have an application question or recommended addition to these standards.