Department of Elementary and Secondary Education Logo
DESE DesignED Playbook

Colors

We use color to establish brand consistency across all DESE digital experiences, but also to convey semantic meaning—for example in warnings and alerts—as well as to differentiate categories of information.

Brand Colors


The DESE brand colors were selected to meet our brand and accessibility standards. All DESE agencies should use these colors—along with other brand imagery—to signal to users that they are seeing official Commonwealth content.

A new color palette requires pre–approval. Minimum contrast ratio between a background and foreground color must be 4.5 or higher, (WebAIM, Contrast and Color Accessibility Tool).

Dark Blue


bg–dkblue
RGB 26 71 133
HEX 1A4785

Blue


bg–blue
RGB   51 122 183
HEX   337AB7

Medium Blue


bg–mdblue
RGB 181 222 242
HEX B5DEF2

Light Blue


bg–ltblue
RGB 237 247 253
HEX EDF7FD

Light Gray


bg–ltgrey
RGB 243 243 243
HEX F3F3F3

Orange


bg–dkorange
RGB 248 143 0
HEX FF88F00

Yellow


bg–dkyellow
RGB 255 193 7
HEX FFC107

Teal


bg–teal
RGB 69 189 178
HEX 45BDB2

Pink


bg–dkpink
RGB 196 31 140
HEX C41F8C



DESE Website Category Pages


Category pages colors are used in design as backgrounds to distinguish between top layers pages and subpages.

Deep Blue


leaf–card––dkblue1
RGB 21 62 90
HEX 153E5A

Dark Blue


leaf–card––dkblue
RGB 57 70 104
HEX 394668

Medium Blue


leaf–card––mdblue
RGB 24 119 185
HEX 1877B9

Blue


leaf–card––blue
RGB 86 109 163
HEX 566DA3

Dark Orange


leaf-card--dkorange
RGB 223 135 56
HEX DF8738

Orange


leaf–card––orange
RGB 239 168 81
HEX EFA851

Yellow


leaf–card––yellow
RGB 224 205 80
HEX E0CD50

Green


leaf–card––green
RGB 39 150 127
HEX 27967F



Accent Colors


Additional colors may be used sparingly to create variety to the color usage on a page and throughout the site. Examples: icons, graphics, calls to action, buttons, and backgrounds.


RGB 11 94 153
HEX 0B5E99


RGB 107 180 222
HEX 6BB4DE


RGB 241 101 34
HEX F16522


RGB 188 32 38
HEX BC2026


RGB 135 67 154
HEX 87439A


RGB 216 44 121
HEX D82C79


RGB 75 168 50
HEX 4BA832


RGB 255 208 65
HEX FFD041



Data Visualization Colors


Chart Colors are used in graphic charts for data visualization. Accessibility best practice — combine dark shades with light shades to create contrast.


RGB 232 30 47
HEX E81E2F


RGB 249 141 99
HEX F98D63


RGB 37 158 79
HEX 259E4F


RGB 135 189 138
HEX 87BD8A


RGB 14 79 156
HEX 0E4F9C


RGB 98 185 253
HEX 62B9FD


RGB 106 107 107
HEX 6A6B6B


RGB 206 208 211
HEX CED0D3


RGB 118 34 122
HEX 76227A


RGB 147 88 154
HEX 93589A


RGB 238 98 50
HEX EE6232


RGB 252 219 106
HEX FCDB6A



Semantic Colors


These colors add specific meanings based on UI conventions. Red connotes "stop", "warning", or "danger"; green connotes "go", or "success". For accessibility avoid using color alone to convey meaning, semantic colors should augment text and images.

Error Red


text-red
RGB 236 19 15
HEX EC130F

Warning Yellow


RGB 255 193 7
HEX FFC107

Success Green


RGB 75 168 50
HEX 4BA832

Info Highlight


RGB 107 180 222
HEX 6BB4DE

Last Updated: November 5, 2024

 
Contact Us

Massachusetts Department of Elementary and Secondary Education
135 Santilli Highway, Everett, MA 02149

Voice: (781) 338-3000
TTY: (800) 439-2370

Directions

Disclaimer: A reference in this website to any specific commercial products, processes, or services, or the use of any trade, firm, or corporation name is for the information and convenience of the public and does not constitute endorsement or recommendation by the Massachusetts Department of Elementary and Secondary Education.