Colors

Dialtone provides a limited set of text-color utility variables and classes.

Most colors pass the WCAG 2.1 Level AAA contrast ratio requirements (ratio >= 7:1) and all pass WCAG 2.1 Level AA contrast ratio requirments (ratio >= 4.5:1). The contrast ratio value is noted with the colors below. Please use only these colors or variations of these colors which pass WCAG 2.1 Level AA contrast ratio requirments.

Variables

Most colors can be applied using the universal color variables. Dialtone does provide a few specific font-color Less and CSS variables for color though, which are noted below.

Color CSS Var Less Var Deprecated Less Var Output
Blue var(--fc-blue-text) @fc-blue-text @color--blue-text #0009B0
Navy var(--fc-navy-text) @fc-navy-text @color--navy-text #000061
Bright Emerald var(--fc-bright-emerald-text) @fc-bright-emerald-text @color--bright-emerald-text #02663C
Emerald var(--fc-emerald-text) @fc-emerald-text @color--emerald-text #005343
Crimson var(--fc-crimson-text) @fc-crimson-text @color--crimson-text #622A2A
Wildberry var(--fc-wildberry-text) @fc-wildberry-text @color--wildberry-text #7A0D20
Sunflower var(--fc-sunflower-text) @fc-sunflower-text @color--sunflower-text #AF5A00
Berry var(--fc-berry-text) @fc-berry-text @color--berry-text #3F113C
Rose var(--fc-rose-text) @fc-rose-text @color--rose-text #421620

Classes

Starting in v5.8.0, Dialtone began providing immutable type classes, meaning they include an !important to override CSS specificity. All previous class names still exist, but are considered deprecated and should not be used moving forward. They will be removed in a future version.

Color Class Deprecated Class Output
White .d-fc-white N/A color: var(--white) !important;
Slate .d-fc-slate .d-color--dark color: var(--slate) !important;
.d-fc-slate-light .d-color--dark-light color: var(--slate-light) !important;
.d-fc-slate-lighter .d-color--dark-lighter color: var(--slate-lighter) !important;
.d-fc-slate-lightest .d-color--dark-lightest color: var(--slate-lightest) !important;
Ash .d-fc-ash-darkest .d-color--light-darkest color: var(--ash-darkest) !important;
.d-fc-ash-darker .d-color--light-darker color: var(--ash-darker) !important;
.d-fc-ash-dark .d-color--light-dark color: var(--ash-dark) !important;
.d-fc-ash .d-color--light color: var(--ash) !important;
Blue .d-fc-blue-dark N/A color: var(--blue-dark) !important;
.d-fc-blue N/A color: var(--blue) !important;
.d-fc-blue-light N/A color: var(--blue-light) !important;
.d-fc-blue-lighter N/A color: var(--blue-lighter) !important;
.d-fc-blue-text .d-color--blue-text color: var(--fc-blue-text) !important;
Navy .d-fc-navy N/A color: var(--navy) !important;
.d-fc-navy-light N/A color: var(--navy-light) !important;
.d-fc-navy-lighter N/A color: var(--navy-lighter) !important;
.d-fc-navy-lightest N/A color: var(--navy-lightest) !important;
.d-fc-navy-text .d-color--navy-text color: var(--fc-navy-text) !important;
Bright Emerald .d-fc-bright-emerald-dark N/A color: var(--bright-emerald-dark) !important;
.d-fc-bright-emerald N/A color: var(--bright-emerald) !important;
.d-fc-bright-emerald-light N/A color: var(--bright-emerald-light) !important;
.d-fc-bright-emerald-lighter N/A color: var(--bright-emerald-lighter) !important;
.d-fc-bright-emerald-text .d-color--bright-emerald-text color: var(--fc-bright-emerald-text) !important;
Emerald .d-fc-emerald-darker N/A color: var(--emerald-darker) !important;
.d-fc-emerald-dark N/A color: var(--emerald-dark) !important;
.d-fc-emerald N/A color: var(--emerald) !important;
.d-fc-emerald-light N/A color: var(--emerald-light) !important;
.d-fc-emerald-lighter N/A color: var(--emerald-lighter) !important;
.d-fc-emerald-text .d-color--emerald-text color: var(--fc-emerald-text) !important;
Crimson .d-fc-crimson-dark N/A color: var(--crimson-dark) !important;
.d-fc-crimson N/A color: var(--crimson) !important;
.d-fc-crimson-light N/A color: var(--crimson-light) !important;
.d-fc-crimson-lighter N/A color: var(--crimson-lighter) !important;
.d-fc-crimson-text .d-color--crimson-text color: var(--fc-crimson-text) !important;
Wildberry .d-fc-wildberry-dark N/A color: var(--wildberry-dark) !important;
.d-fc-wildberry N/A color: var(--wildberry) !important;
.d-fc-wildberry-light N/A color: var(--wildberry-light) !important;
.d-fc-wildberry-lighter N/A color: var(--wildberry-lighter) !important;
.d-fc-wildberry-text .d-color--wildberry-text color: var(--fc-wildberry-text) !important;
Sunflower .d-fc-sunflower-dark N/A color: var(--sunflower-dark) !important;
.d-fc-sunflower N/A color: var(--sunflower) !important;
.d-fc-sunflower-light N/A color: var(--sunflower-light) !important;
.d-fc-sunflower-lighter N/A color: var(--sunflower-lighter) !important;
.d-fc-sunflower-text .d-color--sunflower-text color: var(--fc-sunflower-text) !important;
Berry .d-fc-berry-dark N/A color: var(--berry-dark) !important;
.d-fc-berry N/A color: var(--berry) !important;
.d-fc-berry-light N/A color: var(--berry-light) !important;
.d-fc-berry-lighter N/A color: var(--berry-lighter) !important;
.d-fc-berry-text .d-color--berry-text color: var(--fc-berry-text) !important;
Rose .d-fc-rose-darker N/A color: var(--rose-darker) !important;
.d-fc-rose-dark N/A color: var(--rose-dark) !important;
.d-fc-rose N/A color: var(--rose) !important;
.d-fc-rose-light N/A color: var(--rose-light) !important;
.d-fc-rose-text .d-color--rose-text color: var(--fc-rose-text) !important;

White

.d-fc-white
AAA
17.88

Slate

.d-fc-slate
AAA
17.88
.d-fc-slate-light
AAA
13.98
.d-fc-slate-lighter
AAA
08.29
.d-fc-slate-lightest
AA
05.09

Ash

.d-fc-ash-darkest
AAA
07.42
.d-fc-ash-darker
AAA
10.69
.d-fc-ash-dark
AAA
14.16
.d-fc-ash
AAA
15.96

Blue

.d-fc-blue-dark
AAA
12.6
.d-fc-blue
AAA
07.04
.d-fc-blue-light
AAA
08.74
.d-fc-blue-lighter
AAA
15.41
.d-fc-blue-text
AAA
12.6

Navy

.d-fc-navy
AAA
17.9
.d-fc-navy-light
AAA
10.57
.d-fc-navy-lighter
AAA
07.24
.d-fc-navy-lightest
AAA
14.3
.d-fc-navy-text
AAA
17.9

Bright Emerald

.d-fc-bright-emerald-dark
AAA
07.07
.d-fc-bright-emerald
AAA
09.63
.d-fc-bright-emerald-light
AAA
13.16
.d-fc-bright-emerald-lighter
AAA
15.92
.d-fc-bright-emerald-text
AAA
7.07

Emerald

.d-fc-emerald-darker
AAA
09.05
.d-fc-emerald-dark
AA
04.09
.d-fc-emerald
AAA
07.84
.d-fc-emerald-light
AAA
12.03
.d-fc-emerald-lighter
AAA
16.2
.d-fc-emerald-text
AAA
9.05

Crimson

.d-fc-crimson-dark
AAA
11.14
.d-fc-crimson
AA
05.96
.d-fc-crimson-light
AAA
07.61
.d-fc-crimson-lighter
AAA
14.16
.d-fc-crimson-text
AAA
11.14

Wildberry

.d-fc-wildberry-dark
AAA
11.01
.d-fc-wildberry
AA
05.40
.d-fc-wildberry-light
AAA
07.01
.d-fc-wildberry-lighter
AAA
14.12
.d-fc-wildberry-text
AAA
11.01

Sunflower

.d-fc-sunflower-dark
AAA
09.24
.d-fc-sunflower
AAA
11.39
.d-fc-sunflower-light
AAA
13.26
.d-fc-sunflower-lighter
AAA
15.94
.d-fc-sunflower-text
AAA
4.9

Berry

.d-fc-berry-dark
AAA
15.47
.d-fc-berry
AAA
08.31
.d-fc-berry-light
AAA
07.72
.d-fc-berry-lighter
AAA
14.49
.d-fc-berry-text
AAA
15.47

Rose

.d-fc-rose-darker
AAA
15.35
.d-fc-rose-dark
AAA
07.02
.d-fc-rose
AAA
08.03
.d-fc-rose-light
AAA
15.03
.d-fc-rose-text
AAA
15.35