Colors
FEWS NET uses colors from its base color palette. Certain colors from the palette are specified as brand and data visualization colors, as listed below. Use FEWS NET colors consistently and accurately to maintain a safe brand that is accessible to all.
Full base color palette
Brand colors
Brand colors are the only colors that should appear on FEWS NET products except where these guidelines specify otherwise.
Brand Primary and Brand Black are the two core brand colors and should appear on all FEWS NET branded materials. Brand Secondary may also be used in support of these two colors.
Brand Accent may be used sparingly for graphic elements that highlight or emphasize, while Brand Alert may be used sparingly to convey warnings or disallowed actions. Brand White is the general-use background for text and pages.
Brand Primary
#096640
R 9 G 102 B 64
Brand Black
#212721
R 33 G 39 B 33
Brand Secondary
#BDDBD6
R 189 G 219 B 214
Brand Accent
#A95B24
R 169 G 91 B 36
Brand Alert
#AC1C1E
R 172 G 28 B 30
Brand White
#FFFFFF
R 255 G 255 B 255
Darker and lighter shades of some brand colors are available. Always use the standard shade unless a different shade works better for a particular use case.
Finally, grays from FEWS NET’s base color palette are also included in the brand colors for use as lines, borders, background fills, and graphic elements.
Values
Color style name | Hex value | RGB value | Token name | Base palette token |
|---|---|---|---|---|
| #096640 | 9, 102, 64 | brand-primary | base-green-700 |
| #0B8351 | 11, 131, 81 | brand-primary-light | base-green-600 |
| #074B2F | 7, 75, 47 | brand-primary-dark | base-green-800 |
| #212721 | 33, 39, 33 | brand-black | base-black-800 |
| #090B09 | 9, 11, 9 | brand-black-dark | base-black-900 |
| #BDDBD6 | 189, 219, 214 | brand-secondary | base-sky-400 |
| #E4F1EF | 228, 241, 239 | brand-secondary-light | base-sky-200 |
| #88BFB6 | 136, 191, 182 | brand-secondary-dark | base-sky-600 |
| #A95B24 | 169, 91, 36 | brand-accent | base-rust-700 |
| #AC1C1E | 172, 28, 30 | brand-alert | base-brick-500 |
| #C15153 | 193, 81, 83 | brand-alert-light | base-brick-600 |
| #7E201F | 126, 32, 31 | brand-alert-dark | base-brick-700 |
| #FFFFFF | 255, 255, 255 | brand-white | base-gray-100 |
| #424242 | 66, 66, 66 | - | base-gray-800 |
| #585858 | 88, 88, 88 | - | base-gray-700 |
| #808080 | 128, 128, 128 | - | base-gray-600 |
| #ADADAD | 173, 173, 173 | - | base-gray-500 |
| #D1D3D4 | 209, 211, 212 | - | base-gray-400 |
| #E6E7E8 | 230, 231, 232 | - | base-gray-300 |
| #F4F5F5 | 244, 245, 245 | - | base-gray-200 |
| #FAFAFA | 250, 250, 250 | - | base-gray-150 |
Combinations
Only specific combinations of brand colors are allowed for general use. See the color contrast quick reference sheet for a table of all allowed brand color combinations and approved uses.
For text, the text color should always achieve a minimum 7:1 contrast ratio with its background color. Meaningful graphics like icons, shapes, and user interface elements should achieve a minimum 4.5:1 contrast ratio with their background color. Online tools are available to check the contrast ratio between two colors.
These standards are meant to comfortably exceed the WCAG 2.1 minimum color contrast requirements. Always aim for the highest possible contrast ratio between colors.
Recommended color combinations for text and graphics
Values
Background color | Hex value | Foreground color | Hex value |
|---|---|---|---|
| #096640 |
| #FFFFFF |
| #212721 |
| #FFFFFF |
| #BDDBD6 |
| #212721 |
| #E4F1EF |
| #212721 |
| #88BFB6 |
| #212721 |
| #FFFFFF |
| #096640 |
| #D1D3D4 |
| #212721 |
| #E6E7E8 |
| #212721 |
Color combinations for graphics only
Color combinations with contrast ratios that are 4.5:1 or greater but less than 7:1 are acceptable for graphics only. Any brand color combinations listed as “Graphics only” on the color contrast quick reference sheet fall into this category.
For example, Brand Primary and Brand Secondary may be used against each other for graphics. Brand Accent may be used against white, and Brand Primary may be used against lighter shades of gray such as Gray 400.
Prohibited color combinations
Any color combinations that do not achieve a minimum 7:1 contrast ratio for text or 4.5:1 for meaningful graphics are prohibited. Any brand color combinations that are not included on the color contrast quick reference sheet are prohibited for these uses.
Some examples of foreground / background color combinations that are prohibited for both text and graphics include: Brand Primary / Brand Secondary Dark; Brand White / Brand Secondary Dark; Brand Secondary Dark / Brand White; Gray 600 / Brand White.
Data visualization colors
Data visualization colors are intended for representing 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 the Visualizations Technical Specifications 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 accessible, and you are responsible for verifying the usability and accessibility of any data visualizations you create using these colors.
Values
Color style name | Hex value | RGB value | Base palette token |
|---|---|---|---|
Red 800 | #451914 | ||
Red 700 | #541E18 | ||
Red 600 | #6D4140 | ||
Red 500 | #7A5A5A | ||
Red 400 | #A88A8A | ||
Orange 700 | #AB4B1E | ||
Orange 600 | #B95A38 | ||
Orange 500 | #BA6B55 | ||
Orange 400 | #D6A79A | ||
Yellow 600 | |||