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.
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–dkblueRGB 26 71 133 HEX 1A4785
Blue
bg–blueRGB 51 122 183 HEX 337AB7
Medium Blue
bg–mdblueRGB 181 222 242 HEX B5DEF2
Light Blue
bg–ltblueRGB 237 247 253 HEX EDF7FD
Light Gray
bg–ltgrayRGB 243 243 243 HEX F3F3F3
Orange
bg–dkorangeRGB 248 143 0 HEX FF88F00
Yellow
bg–dkyellowRGB 255 193 7 HEX FFC107
Teal
bg–tealRGB 69 189 178 HEX 45BDB2
Pink
bg–dkpinkRGB 196 31 140 HEX C41F8C
Category pages colors are used in design as backgrounds to distinguish between top layers pages and subpages.
Deep Blue
leaf–card––dkblue1RGB 21 62 90 HEX 153E5A
leaf–card––dkblueRGB 57 70 104 HEX 394668
leaf–card––mdblueRGB 24 119 185 HEX 1877B9
leaf–card––blueRGB 86 109 163 HEX 566DA3
Dark Orange
leaf-card--dkorangeRGB 223 135 56 HEX DF8738
leaf–card––orangeRGB 239 168 81 HEX EFA851
leaf–card––yellowRGB 224 205 80 HEX E0CD50
Green
leaf–card––greenRGB 39 150 127 HEX 27967F
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
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
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
Info Highlight
Last Updated: January 30, 2024
Massachusetts Department of Elementary and Secondary Education 135 Santilli Highway, Everett, MA 02149
Voice: (781) 338-3000 TTY: (800) 439-2370
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.