Colors

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


Text 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>
 

Fill Color Modifier

Fill color can be modified using the .fill-$color-$value class, for example .fill-status-danger.


Color Contrast Analyzer

Use our color contrast analyzer to make sure the Denali colors you use in components pass the WCAG color contrast standards. More information about color contrast can be found on the WCAG site.

Large Text - 26px

Small Text - 14px

Contrast Ratio

3.72:1

Text

FAIL

Headlines

AA

Components

AA


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