Colors

Below you will find our named color definitions. They are meant to convey the meaning of the color using a defined naming convention. When working, please use these color definitions and try to avoid introducing new unamed colors.

All colors (except restricted colors) have CSS utility classes associated with them. text-{COLOR_NAME} for text color and bg-{COLOR_NAME} for background color.

Core colors

#FFF

white

ES white

#C8DFFF

soft-blue

ES soft blue

#85B2FF

medium-blue

ES medium blue

#1B1763

dark-blue

ES dark blue

#FF9133

warm-orange

ES warm orange

Primary

#1B1763

blue-900

#162676

blue-800

#1D3297

blue-700

#2E46B9

blue-600

#4A62D4

blue-500

#688AEA

blue-400

#85B2FF

blue-300

#A7C9FF

blue-200

#C8DFFF

blue-100

#DDEDFF

blue-50

Secondary

#ED7C2B

orange-900

#FF9133

orange-800

#FF9D51

orange-700

#FFAA66

orange-600

#FFB67B

orange-500

#FFC28B

orange-400

#FFCEA0

orange-300

#FFDBB5

orange-200

#FFE7CA

orange-100

#FFF3DF

orange-50

Neutrals

#222633

gray-900

#323543

gray-800

#515362

gray-700

#646776

gray-600

#878999

gray-500

#A7AABA

gray-400

#CFD1DF

gray-300

#DFE1EB

gray-200

#EAECF4

gray-100

#F1F3FB

gray-50

Feedback

Success

#00A759

success-900

#80CE97

success-500

#CCEDD8

success-50

Warning

#F4CA11

warning-900

#F4DF83

warning-500

#F8EFCA

warning-50

Error

#DE3C50

error-900

#EFA6AF

error-500

#F7D7DB

error-50

Restricted colors

Use only for charts and data.

#3EA2BD

myrtle-cactus-blue

ES myrtle cactus blue

#FFC021

sunny-yellow

ES sunny yellow

#CA77D1

petal-purple

ES petal purple

#4A9158

leaf-green

ES leaf green

#D4B595

white-oak

ES white oak

#9A6D51

earthy-brown

ES earthy brown