Colors

  • Template 4.0 updates the 7 theme colors and adds four new colors (slate, cyan, indigo, and amber). New colors are based upon Google Material design.
  • Template 4.0 also provides 6 shades of gray.
  • Programs will now have the opportunity to select 2 colors for their site design, a primary and a secondary color.

WCMS Specifications

  • Sites may choose one primary color or a primary and a secondary color (or no secondary color for a monochromatic theme).
  • WCMS will house rules related to text color and background color to ensure that each background color is associated with the text color that passes 508 standards. 508 testing results.
  • Need to measure which colors are used most as primary colors and which colors are used most as secondary colors.

Color Combinations

Color Class Hex / RGB
Text White Link White theme-blue
bg-primary
#005eaa
rgb(0, 94, 170)
Text Black Link Black theme-blue
bg-secondary
#88c3ea
rgb(136, 195, 234)
Text Black Link Blue theme-blue
bg-tertiary
#c0e9ff
rgb(192, 233, 255)
Text Black Link Blue theme-blue
bg-quaternary
#edf9ff
rgb(237,249,255)
Text White Link White theme-purple
bg-primary
#712177
rgb(113, 33, 119)
Text Black Link Black theme-purple
bg-secondary
#b890bb
rgb(184, 144, 187)
Text Black Link Blue theme-purple
bg-tertiary
#e3d3e4
rgb(227, 211, 228)
Text Black Link Blue theme-purple
bg-quaternary
#f7f2f7
rgb(247,242,247)
Text White Link White theme-teal
bg-primary
#00695c
rgb(0, 105, 92)
Text Black Link Black theme-teal
bg-secondary
#4ebaaa
rgb(78, 186, 170)
Text Black Link Blue theme-teal
bg-tertiary
#ceece7
rgb(206, 236, 231)
Text Black Link Blue theme-teal
bg-quaternary
#ebf7f5
rgb(235,247,245)
Text White Link White theme-green
bg-primary
#4b830d
rgb(75, 131, 13)
Text Black Link Black theme-green
bg-secondary
#84bc49
rgb(132, 188, 73)
Text Black Link Blue theme-green
bg-tertiary
#dcedc8
rgb(220, 237, 200)
Text Black Link Blue theme-green
bg-quaternary
#f1f8e9
rgb(241,248,233)
Text White Link White theme-orange
bg-primary
#bb4d00
rgb(187, 77, 0)
Text Black Link Black theme-orange
bg-secondary
#ffad42
rgb(255, 173, 66)
Text Black Link Blue theme-orange
bg-tertiary
#ffe97d
rgb(255, 233, 125)
Text Black Link Blue theme-orange
bg-quaternary
#fff4cf
rgb(255,244,207)
Text White Link White theme-brown
bg-primary
#705043
rgb(112, 80, 67)
Text Black Link Black theme-brown
bg-secondary
#ad907b
rgb(173, 144, 123)
Text Black Link Blue theme-brown
bg-tertiary
#d7ccc8
rgb(214, 205, 200)
Text Black Link Blue theme-brown
bg-quaternary
#f2ebe8
rgb(242,235,232)
Text White Link White theme-pink
bg-primary
#af4448
rgb(175, 68, 72)
Text Black Link Black theme-pink
bg-secondary
#e57373
rgb(229, 115, 115)
Text Black Link Blue theme-pink
bg-tertiary
#ffc2c2
rgb(255, 194, 194)
Text Black Link Blue theme-pink
bg-quaternary
#ffe7e7
rgb(255,231,231)
Text Black Link Black theme-amber
bg-primary
#fbab18
rgb(251, 171, 24)
Text Black Link Black theme-amber
bg-secondary
#ffd54f
rgb(255, 213, 79)
Text Black Link Blue theme-amber
bg-tertiary
#ffecb3
rgb(255, 236, 179)
Text Black Link Blue theme-amber
bg-quaternary
#fff7e1
rgb(255,247,225)
Text White Link White theme-slate
bg-primary
#29434e
rgb(41, 67, 78)
Text Black Link Black theme-slate
bg-secondary
#7e9ba5
rgb(126, 155, 165)
Text Black Link Blue theme-slate
bg-tertiary
#b6c6d2
rgb(182, 198, 210)
Text Black Link Blue theme-slate
bg-quaternary
#e2e8ed
rgb(226,232,237)
Text White Link White theme-indigo
bg-primary
#26418f
rgb(38, 65, 143)
Text Black Link Black theme-indigo
bg-secondary
#92a6dd
rgb(146, 166, 221)
Text Black Link Blue theme-indigo
bg-tertiary
#dee8ff
rgb(222, 232, 255)
Text Black Link Blue theme-indigo
bg-quaternary
#f2f6ff
rgb(242,246,255)
Text White Link White theme-cyan
bg-primary
#007c91
rgb(0, 124, 145)
Text Black Link Black theme-cyan
bg-secondary
#65b0bd
rgb(101, 176, 189)
Text Black Link Blue theme-cyan
bg-tertiary
#cce5e9
rgb(204, 229, 233)
Text Black Link Blue theme-cyan
bg-quaternary
#ebf5f6
rgb(235,245,246)
Text White Link White gray-darker #333333
rgb(51, 51, 51)
Text White Link White gray-dark #555555
rgb(85, 85, 85)
Text Black Link Black gray #bdbdbd
rgb(189, 189, 189)
Text Black Link Blue gray-light #e0e0e0
rgb(224, 224, 224)
Text Black Link Blue gray-lighter #f0f0f0
rgb(240, 240, 240)
Text Black Link Blue gray-lightest #f5f5f5
rgb(245, 245, 245)
View Page In: PDF [150k] DOC [150k]
Page last reviewed: