We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.
Denali’s color library is used to style components and convey meaning.
Component color and background color can be modified using values from Denali's SCSS color map.
Component color can be modified using the .is-$color-$value
class, for example .is-orange-500
.
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
In order to guide your color selection we have organized our colors into four palettes based on their recommended usage:
#002B66
#004CB3
#016EFF
#80B6FF
#CCE2FF
#303030
#606060
#9a9a9a
#d5d5d5
#e8e8e8
#f2f2f2
#f8f8f8
#ffffff
#ea0000
#f4cb00
#15c046
#0066df
#e21717
#f17603
#fed800
#87d812
#20c05b
#19c6f4
#0072df
#6e2ebf
#9a2ead
#ff3390
We recommend using colors with the star icon first.
#990000
#ab0606
#be0c0c
#d01111
#e21717
#e94141
#f16a6a
#f89494
#ffbdbd
#9e4502
#b35102
#c85e03
#dc6a03
#f17603
#f49032
#f8a962
#fcc391
#ffdcc0
#e28b00
#e99e00
#f0b200
#f7c500
#fed800
#fee344
#ffeb71
#fff4a9
#fffcd2
#557f0b
#62950d
#6eac0f
#7bc210
#87d812
#9fe23e
#b8ec69
#d0f595
#e8ffc0
#147233
#17863d
#1a9947
#1dad51
#20c05b
#4dd079
#7ae097
#a6efb4
#d3ffd2
#106b75
#128295
#1499b5
#17afd4
#19c6f4
#43d1f7
#6dddfa
#96e8fc
#bef0fc
#003e60
#004b80
#0058a0
#0065bf
#0072df
#308ee7
#60abef
#90c7f7
#bee0fc
#20004e
#30006d
#40008b
#5413a8
#6e2ebf
#8c5bd4
#aa89ea
#c8b6ff
#d8d0fd
#41154c
#571b64
#6e227d
#842895
#9a2ead
#b152c2
#c777d6
#de9beb
#e9b7f3
#7f1c57
#9f2265
#bf2874
#df2d82
#ff3390
#ff56a4
#ff7ab8
#ff9dcc
#fabcdc
You can use these variables in a override.css
file to customize this component.
Variable Name | CSS Property |
---|---|
--color-{name}-{weight} |
Hex e.g.#016EFF |
--color-{name}-{weight}-rgb |
RGB e.g.54,151,242 |