Switch to Wilmington
Overview

Colors

Use the colors classes to alter the color of font or background colors. Be sure to follow our color guidelines and use colors at sufficient contrast to meet accessibility standards. Predefined gradient and transparency styles are included here.

Colors

These utilities control CSS properties related to color and background color.

TokenHexFont ClassBackground Class
PrimaryBase
#007856.u-color--primary-base.u-bg--primary-base
PrimaryLight
#7AB800.u-color--primary-light.u-bg--primary-light
PrimaryDark
#005C42.u-color--primary-dark.u-bg--primary-dark
YellowBase
#FFB300.u-color--yellow-base.u-bg--yellow-base
OrangeBase
#B55612.u-color--orange-base.u-bg--orange-base
OrangeLight
#FFE4CB.u-color--orange-light.u-bg--orange-light
RedBase
#BE4940.u-color--red-base.u-bg--red-base
RedLight
#FFD4D1.u-color--red-light.u-bg--red-light
GreenBase
#327E75.u-color--green-base.u-bg--green-base
GreenLight
#D8F3E4.u-color--green-light.u-bg--green-light
BlueBase
#6E86A6.u-color--blue-base.u-bg--blue-base
BlueLight
#E7EBF3.u-color--blue-light.u-bg--blue-light
GrayBase
#BABABA.u-color--gray-base.u-bg--gray-base
GrayLight
#D7D7D7.u-color--gray-light.u-bg--gray-light
GrayLighter
#EFEFEF.u-color--gray-lighter.u-bg--gray-lighter
GrayDark
#767676.u-color--gray-dark.u-bg--gray-dark
GrayDarker
#333333.u-color--gray-darker.u-bg--gray-darker
White
#FFFFFF.u-color--white.u-bg--white
Black
#000000.u-color--black.u-bg--black

Fill Variants

Solid

Use for filling objects with a single, solid color.

Hex
Green / Primary / Base#007856
Green / Secondary#EAF7EF
Gray / Lighter#EFEFEF
Gray / Darker#333333
White#FFFFFF

Gradient

Use for filling objects with a predefined gradient between two colors.

StartFinishClass
Green / Primary / Basecolor: #18864A
x, y: 0%, 0%
color: #007856
x, y: 100%, 100%
.u-bg--gradient-primary-base
Gray / Lightcolor: #EFEFEF
x, y: 0%, 0%
color: #D7D7D7
x, y: 100%, 100%
.u-bg--gradient-gray-lighter

Transparent

Use for filling objects with a single color at a predefined opacity.

HexOpacityClass
Green / Primary / Base / 85%#00785685%.u-bg--transparent-primary-base-85
Black / 15% #000 15%.u-bg--transparent-black-15
Black / 25% #000 25%.u-bg--transparent-black-25

None

Use for removing or customizing an existing fill.