DHS Color Palette
The DHS Color Palette is the only approved color system used for DHS and its components – variation from these colors is strictly prohibited. The consistent use of the DHS color palette helps ensure uniformity and strong brand recognition. These colors have been rigorously tested, in web and print media, for consistent color representation. The DHS Color Palette also aligns with the color system used by the US Web Design System.
Primary and Secondary Colors
The primary DHS colors are required for use in key design elements (such as headings, features, etc.). Secondary colors should be used sparingly and are meant to supplement the primary colors or draw attention to specific areas of content.
| Primary Colors | Secondary Colors | |||||
|---|---|---|---|---|---|---|
|
dhs-blue HTML: #005288 RGB: 0 | 82 | 136 CMYK: 100 | 45 | 0 | 37 |
dhs-gray HTML: #c0c2c4 RGB: 192 | 194 | 196 CMYK: 0 | 0 | 0 | 28 |
dhs-dark-gray HTML: #5a5b5d RGB: 90 | 91 | 93 CMYK: 0 | 0 | 0 | 79 |
dhs-red HTML: #c41230 RGB: 196 | 18 | 48 CMYK: 0 | 100 | 79 | 20 |
dhs-light-blue HTML: #0078ae RGB: 0 | 120 | 174 CMYK: 100 | 16 | 0 | 27 |
dhs-green HTML: #5e9732 RGB: 94 | 151 | 50 CMYK: 56 | 0 | 100 | 27 |
|
Gradient Colors (Color Wheel)
Gradient colors may be used as background colors and to create graphic elements, illustrations, etc. Additionally:
- All colors must be used correctly to provide high contrast for Section 508 accessibility compliance.
- All HTML/RGB colors are used for web, video, mobile, and desktop printing.
- All CMYK colors are used for offset printing.
NOTE: The primary and secondary DHS colors are also included below and indicated with a star. They correspond with a "50" value on the USWDS color wheel.
View the DHS Color Palette in: PDF format | Excel format
|
black HTML: #000000 RGB: 0 | 0 | 0 CMYK: 0 | 0 | 0 | 100 |
||||||
|
dhs-blue-90 HTML: #000305 RGB: 0 | 3 | 5
CMYK: 100 | 40 | 0 | 98 |
dhs-gray-90 HTML: #080808 RGB: 8 | 8 | 8 CMYK: 0 | 0 | 0 | 97 |
dhs-dark-gray-90 HTML: #040404 RGB: 4 | 4 | 4 CMYK: 0 | 0 | 0 | 98 |
dhs-red-90 HTML: #080102 RGB: 8 | 1 | 2 CMYK: 0 | 88 | 75 | 97 |
dhs-light-blue-90 HTML: #000507 RGB: 0 | 5 | 7 CMYK: 100 | 29 | 0 | 97 |
dhs-green-90 HTML: #040602 RGB: 4 | 6 | 2 CMYK: 33 | 0 | 67 | 98 |
|
|
dhs-blue-80 HTML: #001726 RGB: 0 | 23 | 38 CMYK: 100 | 39 | 0 | 85 |
dhs-gray-80 HTML: #363637 RGB: 54 | 54 | 55 CMYK: 2 | 2 | 0 | 78 |
dhs-dark-gray-80 HTML: #19191a RGB: 25 | 25 | 26 CMYK: 73 | 67 | 64 | 78 |
dhs-red-80 HTML: #37050d RGB: 55 | 5 | 13 CMYK: 0 | 91 | 76 | 78 |
dhs-light-blue-80 HTML: #002231 RGB: 0 | 34 | 49 CMYK: 100 | 31 | 0 | 81 |
dhs-green-80 HTML: #1a2a0e RGB: 26 | 42 | 14 CMYK: 38 | 0 | 67 | 84 |
|
|
dhs-blue-70 HTML: #002b47 RGB: 0 | 43 | 71 CMYK: 100 | 39 | 0 | 72 |
dhs-gray-70 HTML: #646566 RGB: 100 | 101 | 102 CMYK: 2 | 1 | 0 | 60 |
dhs-dark-gray-70 HTML: #2f2f30 RGB: 47 | 47 | 48 CMYK: 70 | 64 | 62 | 61 |
dhs-red-70 HTML: #660919 RGB: 102 | 9 | 25 CMYK: 34 | 99 | 82 | 51 |
dhs-light-blue-70 HTML: #003e5a RGB: 0 | 62 | 90 CMYK: 100 | 31 | 0 | 65 |
dhs-green-70 HTML: #314f1a RGB: 49 | 79 | 26 CMYK: 76 | 44 | 100 | 44 |
|
|
dhs-blue-60 HTML: #003e67 RGB: 0 | 62 | 103 CMYK: 100 | 40 | 0 | 60 |
dhs-gray-60 HTML: #929395 RGB: 146 | 147 | 149 CMYK: 2 | 1 | 0 | 42 |
dhs-dark-gray-60 HTML: #444547 RGB: 68 | 69 | 71 CMYK: 68 | 60 | 57 | 42 |
dhs-red-60 HTML: #950e24 RGB: 149 | 14 | 36 CMYK: 26 | 100 | 91 | 26 |
dhs-light-blue-60 HTML: #005b84 RGB: 0 | 91 | 132 CMYK: 100 | 31 | 0 | 48 |
dhs-green-60 HTML: #477326 RGB: 71 | 115 | 38 CMYK: 74 | 33 | 100 | 21 |
|
★ |
dhs-blue HTML: #005288 RGB: 0 | 82 | 136 CMYK: 100 | 45 | 0 | 37 |
dhs-gray HTML: #c0c2c4 RGB: 192 | 194 | 196 CMYK: 0 | 0 | 0 | 28 |
dhs-dark-gray HTML: #5a5b5d RGB: 90 | 91 | 93 CMYK: 0 | 0 | 0 | 79 |
dhs-red HTML: #c41230 RGB: 196 | 18 | 48 CMYK: 0 | 100 | 79 | 20 |
dhs-light-blue HTML: #0078ae RGB: 0 | 120 | 174 CMYK: 100 | 16 | 0 | 27 |
dhs-green HTML: #5e9732 RGB: 94 | 151 | 50 CMYK: 56 | 0 | 100 | 27 |
|
dhs-blue-40 HTML: #3d7ca5 RGB: 61 | 124 | 165 CMYK: 79 | 44 | 19 | 1 |
dhs-gray-40 HTML: #cfd1d2 RGB: 207 | 209 | 210 CMYK: 18 | 13 | 13 | 0 |
dhs-dark-gray-40 HTML: #828284 RGB: 130 | 130 | 132 CMYK: 51 | 43 | 41 | 6 |
dhs-red-40 HTML: #d24b62 RGB: 210 | 75 | 98 CMYK: 14 | 85 | 51 | 1 |
dhs-light-blue-40 HTML: #3d98c1 RGB: 61 | 152 | 193 CMYK: 73 | 27 | 12 | 0 |
dhs-green-40 HTML: #85b063 RGB: 133 | 176 | 99 CMYK: 53 | 13 | 79 | 1 |
|
|
dhs-blue-30 HTML: #7aa5c1 RGB: 122 | 165 | 193 CMYK: 54 | 25 | 15 | 0 |
dhs-gray-30 HTML: #dedfe0 RGB: 222 | 223 | 224 CMYK: 12 | 8 | 8 | 0 |
dhs-dark-gray-30 HTML: #a9aaab RGB: 169 | 170 | 171 CMYK: 35 | 28 | 28 | 0 |
dhs-red-30 HTML: #e08493 RGB: 224 | 132 | 147 CMYK: 9 | 59 | 27 | 0 |
dhs-light-blue-30 HTML: #7ab9d5 RGB: 122 | 185 | 213 CMYK: 50 | 13 | 9 | 0 |
dhs-green-30 HTML: #abc994 RGB: 171 | 201 | 148 CMYK: 36 | 7 | 52 | 0 |
|
|
dhs-blue-20 HTML: #b8cfde RGB: 184 | 207 | 222 CMYK: 27 | 10 | 7 | 0 |
dhs-gray-20 HTML: #edeeee RGB: 237 | 238 | 238 CMYK: 0 | 0 | 0 | 7 |
dhs-dark-gray-20 HTML: #d1d1d2 RGB: 209 | 209 | 210 CMYK: 0 | 0 | 0 | 18 |
dhs-red-20 HTML: #eebdc5 RGB: 238 | 189 | 197 CMYK: 4 | 30 | 11 | 0 |
dhs-light-blue-20 HTML: #b8d9e8 RGB: 184 | 217 | 232 CMYK: 26 | 5 | 5 | 0 |
dhs-green-20 HTML: #d2e2c6 RGB: 210 | 226 | 198 CMYK: 18 | 3 | 25 | 0 |
|
|
dhs-blue-15 HTML: #d6e3ec RGB: 214 | 227 | 236 CMYK: 15 | 5 | 4 | 0 |
dhs-gray-15 HTML: #f5f5f6 RGB: 245 | 245 | 246 CMYK: 0 | 0 | 0 | 4 |
dhs-dark-gray-15 HTML: #e5e5e5 RGB: 229 | 229 | 229 CMYK: 0 | 0 | 0 | 10 |
dhs-red-15 HTML: #f6d9de RGB: 246 | 217 | 222 CMYK: 2 | 16 | 5 | 0 |
dhs-light-blue-15 HTML: #d6e9f2 RGB: 214 | 233 | 242 CMYK: 15 | 2 | 2 | 0 |
dhs-green-15 HTML: #e5eede RGB: 229 | 238 | 222 CMYK: 10 | 1 | 14 | 0 |
|
|
dhs-blue-10 HTML: #f5f8fa RGB: 245 | 248 | 250 CMYK: 3 | 1 | 1 | 0 |
dhs-gray-10 HTML: #fcfdfd RGB: 252 | 253 | 253 CMYK: 0 | 0 | 0 | 1 |
dhs-dark-gray-10 HTML: #f8f8f9 RGB: 248 | 248 | 249 CMYK: 0 | 0 | 0 | 2 |
dhs-red-10 HTML: #fdf6f7 RGB: 253 | 246 | 247 CMYK: 0 | 3 | 1 | 0 |
dhs-light-blue-10 HTML: #f5fafc RGB: 245 | 250 | 252 CMYK: 3 | 0 | 0 | 0 |
dhs-green-10 HTML: #f9fbf7 RGB: 249 | 251 | 247 CMYK: 2 | 0 | 2 | 0 |
|
|
white HTML: #ffffff RGB: 255 | 255 | 255 CMYK: 0 | 0 | 0 | 0 |
||||||
Example
The image below has a mix of key and secondary design elements and demonstrates the correct usage of the DHS Color Wheel.
| # | Design Element | Design Element Type | Primary Color Required | Color Used |
|---|---|---|---|---|
| 1 | Outer Ring, Text, Inner Feature | Key | Yes | dhs-blue |
| 2 | Ring Background | Secondary | No | dhs-blue-15 |
| 3 | Green Figure | Key | Yes | dhs-green |
| 4 | Green Figure Accent | Secondary | No | dhs-green-30 |
| 5 | Red Figure | Key | Yes | dhs-red |
| 6 | Red Figure Accent | Secondary | No | dhs-red-30 |
| 7 | Blue Figure | Key | Yes | dhs-light-blue |
| 8 | Blue Figure Accent | Secondary | No | dhs-light-blue-30 |
US Government Colors
In addition, these are the official colors of the U.S. government – named Old Glory Blue and Old Glory Red.
|
Old Glory Blue HTML: #002868 RGB: 0 | 40 | 104 CMYK: 100 | 92 | 32 | 23 |
Old Glory Red HTML: #bf0a30 RGB: 191 | 10 | 48 CMYK: 17 | 100 | 86 | 7 |
Accessibility
When using the DHS color palette, it is the designer's responsibility to ensure that materials prepared meet DHS criteria for Section 508 Accessibility compliance, especially in terms of color dependence and color contrast.
Requirement (8 Color): Color must not be the only means of conveying information, indicating an action, prompting a response, or indicating status. Information conveyed through color must also be provided in text displayed on the screen or by visual differentiation.
Requirement (9 Color Contrast): There must be contrasting color/shades at a minimum ration of 4.5:1 for discerning between background and foreground content.
Note: the Color Contrast Analyzer (CCA) tool helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators. It is available for download both as part of the WAT 2015 and WAT 2012 toolsets and as a standalone application at
https://www.dhs.gov/
Accessibility Exemption for the DHS Seal
As designed, the DHS seal inherently fails the color contrast requirement for Section 508 Accessibility. Since the design of the seal is mandated by law there is an exemption in place for its use. This exemption has been issued by the DHS Office of Accessible Systems and Technology, and the DHS Assistant Secretary for Public Affairs.
