Colors

Denali’s color library is used to style components and convey meaning.

Modifiers

Component color and background color can be modified using values from Denali's SCSS color map.

Color modifier

Component color can be modified using the .is-$color-$value class, for example .is-orange-500.



 
<i class="d-icon d-user-profile-circle is-medium is-orange-500"></i>

Background modifier

Background color can be modified using the .has-bg-$color-$value class, for example .has-bg-graph-purple.



 
<div class="box has-bg-graph-purple">
  <h4 class="is-grey-100">This is a box with a modifed background color.</h4>
</div>
When selecting text and background colors remember to abide by accessiblity standards and make sure the color contrast is 4.5:1. More information about color contrast can be found on the WCAG site.

Color copied to clipboard

Palettes

In order to guide your color selection we have organized our colors into four palettes based on their recommended usage:

Brand

#002B66

#004CB3

#016EFF

#80B6FF

#CCE2FF

Grey

#303030

#606060

#9a9a9a

#d5d5d5

#e8e8e8

#f2f2f2

#f8f8f8

#ffffff

Status

#ea0000

#f4cb00

#15c046

#0066df

Graph

#e21717

#f17603

#fed800

#87d812

#20c05b

#19c6f4

#0072df

#6e2ebf

#9a2ead

#ff3390

Expanded graph colors

We recommend using colors with the star icon first.

Red

#990000

#ab0606

#be0c0c

#d01111

#e21717

#e94141

#f16a6a

#f89494

#ffbdbd

Orange

#9e4502

#b35102

#c85e03

#dc6a03

#f17603

#f49032

#f8a962

#fcc391

#ffdcc0

Yellow

#e28b00

#e99e00

#f0b200

#f7c500

#fed800

#fee344

#ffeb71

#fff4a9

#fffcd2

Lime

#557f0b

#62950d

#6eac0f

#7bc210

#87d812

#9fe23e

#b8ec69

#d0f595

#e8ffc0

Green

#147233

#17863d

#1a9947

#1dad51

#20c05b

#4dd079

#7ae097

#a6efb4

#d3ffd2

Sky

#106b75

#128295

#1499b5

#17afd4

#19c6f4

#43d1f7

#6dddfa

#96e8fc

#bef0fc

Blue

#003e60

#004b80

#0058a0

#0065bf

#0072df

#308ee7

#60abef

#90c7f7

#bee0fc

Purple

#20004e

#30006d

#40008b

#5413a8

#6e2ebf

#8c5bd4

#aa89ea

#c8b6ff

#d8d0fd

Violet

#41154c

#571b64

#6e227d

#842895

#9a2ead

#b152c2

#c777d6

#de9beb

#e9b7f3

Pink

#7f1c57

#9f2265

#bf2874

#df2d82

#ff3390

#ff56a4

#ff7ab8

#ff9dcc

#fabcdc

Variables

You can use these variables in a override.css file to customize this component.

Variable Name CSS Property
--color-{name}-{weight} Hex e.g.#3697f2
--color-{name}-{weight}-rgb RGB e.g.54,151,242