Colors

Utilities to change an element's font-color.

All font colors pass the WCAG 2.1 Level AA contrast ratio requirements (ratio >= 4.5:1) and most pass WCAG 2.1 Level AAA requirements (ratio >= 7: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 requirements.

CSS Variables

Dialtone provides a few abstracted colors CSS variables based on our color stops.

Variable Output
var(--fc-dark)
var(--black-900);
Aa
var(--fc-medium)
var(--black-800);
Aa
var(--fc-light)
var(--black-700);
Aa
var(--fc-lighter)
var(--black-600);
Aa
var(--fc-primary)
var(--primary-color);
Aa
var(--fc-purple)
var(--purple-500);
Aa
var(--fc-orange)
var(--orange-600);
Aa
var(--fc-pink)
var(--pink-600);
Aa
var(--fc-green)
var(--green-600);
Aa
var(--fc-yellow)
var(--yellow-600);
Aa
var(--fc-red)
var(--red-600);
Aa
var(--fc-success)
var(--green-600);
Aa
var(--fc-warning)
var(--yellow-600);
Aa
var(--fc-error)
var(--red-600);
Aa
var(--fc-danger)
var(--red-600);
Aa
var(--fc-muted)
var(--black-900);
Aa

Classes

Class Output
.d-fc-current
color: currentColor !important;
Aa
.d-fc-transparent
color: transparent !important;
Aa
.d-fc-unset
color: unset !important;
Aa
.d-fc-white
--fco: 100%;
color: hsla(var(--white-h) var(--white-s) var(--white-l) / var(--fco)) !important;
Aa
.d-fc-dark
--fco: 100%;
color: hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / var(--fco)) !important;
Aa
.d-fc-medium
--fco: 100%;
color: hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) / var(--fco)) !important;
Aa
.d-fc-light
--fco: 100%;
color: hsla(var(--black-700-h) var(--black-700-s) var(--black-700-l) / var(--fco)) !important;
Aa
.d-fc-lighter
--fco: 100%;
color: hsla(var(--black-600-h) var(--black-600-s) var(--black-600-l) / var(--fco)) !important;
Aa
.d-fc-primary
--fco: 100%;
color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l) / var(--fco)) !important;
Aa
.d-fc-purple
--fco: 100%;
color: hsla(var(--purple-500-h) var(--purple-500-s) var(--purple-500-l) / var(--fco)) !important;
Aa
.d-fc-orange
--fco: 100%;
color: hsla(var(--orange-600-h) var(--orange-600-s) var(--orange-600-l) / var(--fco)) !important;
Aa
.d-fc-pink
--fco: 100%;
color: hsla(var(--pink-600-h) var(--pink-600-s) var(--pink-600-l) / var(--fco)) !important;
Aa
.d-fc-green
--fco: 100%;
color: hsla(var(--green-600-h) var(--green-600-s) var(--green-600-l) / var(--fco)) !important;
Aa
.d-fc-yellow
--fco: 100%;
color: hsla(var(--yellow-600-h) var(--yellow-600-s) var(--yellow-600-l) / var(--fco)) !important;
Aa
.d-fc-red
--fco: 100%;
color: hsla(var(--red-600-h) var(--red-600-s) var(--red-600-l) / var(--fco)) !important;
Aa
.d-fc-success
--fco: 100%;
color: hsla(var(--green-600-h) var(--green-600-s) var(--green-600-l) / var(--fco)) !important;
Aa
.d-fc-warning
--fco: 100%;
color: hsla(var(--yellow-600-h) var(--yellow-600-s) var(--yellow-600-l) / var(--fco)) !important;
Aa
.d-fc-error
--fco: 100%;
color: hsla(var(--red-600-h) var(--red-600-s) var(--red-600-l) / var(--fco)) !important;
Aa
.d-fc-danger
--fco: 100%;
color: hsla(var(--red-600-h) var(--red-600-s) var(--red-600-l) / var(--fco)) !important;
Aa
.d-fc-muted
--fco: 100%;
color: hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / var(--fco)) !important;
Aa
.d-fc-black-900
--fco: 100%;
color: hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / var(--fco)) !important;
Aa
.d-fc-black-800
--fco: 100%;
color: hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) / var(--fco)) !important;
Aa
.d-fc-black-700
--fco: 100%;
color: hsla(var(--black-700-h) var(--black-700-s) var(--black-700-l) / var(--fco)) !important;
Aa
.d-fc-black-600
--fco: 100%;
color: hsla(var(--black-600-h) var(--black-600-s) var(--black-600-l) / var(--fco)) !important;
Aa
.d-fc-black-500
--fco: 100%;
color: hsla(var(--black-500-h) var(--black-500-s) var(--black-500-l) / var(--fco)) !important;
Aa
.d-fc-black-400
--fco: 100%;
color: hsla(var(--black-400-h) var(--black-400-s) var(--black-400-l) / var(--fco)) !important;
Aa
.d-fc-black-300
--fco: 100%;
color: hsla(var(--black-300-h) var(--black-300-s) var(--black-300-l) / var(--fco)) !important;
Aa
.d-fc-black-200
--fco: 100%;
color: hsla(var(--black-200-h) var(--black-200-s) var(--black-200-l) / var(--fco)) !important;
Aa
.d-fc-black-100
--fco: 100%;
color: hsla(var(--black-100-h) var(--black-100-s) var(--black-100-l) / var(--fco)) !important;
Aa
.d-fc-black-075
--fco: 100%;
color: hsla(var(--black-075-h) var(--black-075-s) var(--black-075-l) / var(--fco)) !important;
Aa
.d-fc-black-050
--fco: 100%;
color: hsla(var(--black-050-h) var(--black-050-s) var(--black-050-l) / var(--fco)) !important;
Aa
.d-fc-black-025
--fco: 100%;
color: hsla(var(--black-025-h) var(--black-025-s) var(--black-025-l) / var(--fco)) !important;
Aa
.d-fc-purple-900
--fco: 100%;
color: hsla(var(--purple-900-h) var(--purple-900-s) var(--purple-900-l) / var(--fco)) !important;
Aa
.d-fc-purple-800
--fco: 100%;
color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l) / var(--fco)) !important;
Aa
.d-fc-purple-700
--fco: 100%;
color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l) / var(--fco)) !important;
Aa
.d-fc-purple-600
--fco: 100%;
color: hsla(var(--purple-600-h) var(--purple-600-s) var(--purple-600-l) / var(--fco)) !important;
Aa
.d-fc-purple-500
--fco: 100%;
color: hsla(var(--purple-500-h) var(--purple-500-s) var(--purple-500-l) / var(--fco)) !important;
Aa
.d-fc-purple-400
--fco: 100%;
color: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) / var(--fco)) !important;
Aa
.d-fc-purple-300
--fco: 100%;
color: hsla(var(--purple-300-h) var(--purple-300-s) var(--purple-300-l) / var(--fco)) !important;
Aa
.d-fc-purple-200
--fco: 100%;
color: hsla(var(--purple-200-h) var(--purple-200-s) var(--purple-200-l) / var(--fco)) !important;
Aa
.d-fc-purple-100
--fco: 100%;
color: hsla(var(--purple-100-h) var(--purple-100-s) var(--purple-100-l) / var(--fco)) !important;
Aa
.d-fc-orange-600
--fco: 100%;
color: hsla(var(--orange-600-h) var(--orange-600-s) var(--orange-600-l) / var(--fco)) !important;
Aa
.d-fc-orange-500
--fco: 100%;
color: hsla(var(--orange-500-h) var(--orange-500-s) var(--orange-500-l) / var(--fco)) !important;
Aa
.d-fc-orange-400
--fco: 100%;
color: hsla(var(--orange-400-h) var(--orange-400-s) var(--orange-400-l) / var(--fco)) !important;
Aa
.d-fc-orange-300
--fco: 100%;
color: hsla(var(--orange-300-h) var(--orange-300-s) var(--orange-300-l) / var(--fco)) !important;
Aa
.d-fc-orange-200
--fco: 100%;
color: hsla(var(--orange-200-h) var(--orange-200-s) var(--orange-200-l) / var(--fco)) !important;
Aa
.d-fc-orange-100
--fco: 100%;
color: hsla(var(--orange-100-h) var(--orange-100-s) var(--orange-100-l) / var(--fco)) !important;
Aa
.d-fc-pink-700
--fco: 100%;
color: hsla(var(--pink-700-h) var(--pink-700-s) var(--pink-700-l) / var(--fco)) !important;
Aa
.d-fc-pink-600
--fco: 100%;
color: hsla(var(--pink-600-h) var(--pink-600-s) var(--pink-600-l) / var(--fco)) !important;
Aa
.d-fc-pink-500
--fco: 100%;
color: hsla(var(--pink-500-h) var(--pink-500-s) var(--pink-500-l) / var(--fco)) !important;
Aa
.d-fc-pink-400
--fco: 100%;
color: hsla(var(--pink-400-h) var(--pink-400-s) var(--pink-400-l) / var(--fco)) !important;
Aa
.d-fc-pink-300
--fco: 100%;
color: hsla(var(--pink-300-h) var(--pink-300-s) var(--pink-300-l) / var(--fco)) !important;
Aa
.d-fc-pink-200
--fco: 100%;
color: hsla(var(--pink-200-h) var(--pink-200-s) var(--pink-200-l) / var(--fco)) !important;
Aa
.d-fc-pink-100
--fco: 100%;
color: hsla(var(--pink-100-h) var(--pink-100-s) var(--pink-100-l) / var(--fco)) !important;
Aa
.d-fc-green-700
--fco: 100%;
color: hsla(var(--green-700-h) var(--green-700-s) var(--green-700-l) / var(--fco)) !important;
Aa
.d-fc-green-600
--fco: 100%;
color: hsla(var(--green-600-h) var(--green-600-s) var(--green-600-l) / var(--fco)) !important;
Aa
.d-fc-green-500
--fco: 100%;
color: hsla(var(--green-500-h) var(--green-500-s) var(--green-500-l) / var(--fco)) !important;
Aa
.d-fc-green-400
--fco: 100%;
color: hsla(var(--green-400-h) var(--green-400-s) var(--green-400-l) / var(--fco)) !important;
Aa
.d-fc-green-300
--fco: 100%;
color: hsla(var(--green-300-h) var(--green-300-s) var(--green-300-l) / var(--fco)) !important;
Aa
.d-fc-green-200
--fco: 100%;
color: hsla(var(--green-200-h) var(--green-200-s) var(--green-200-l) / var(--fco)) !important;
Aa
.d-fc-green-100
--fco: 100%;
color: hsla(var(--green-100-h) var(--green-100-s) var(--green-100-l) / var(--fco)) !important;
Aa
.d-fc-yellow-600
--fco: 100%;
color: hsla(var(--yellow-600-h) var(--yellow-600-s) var(--yellow-600-l) / var(--fco)) !important;
Aa
.d-fc-yellow-500
--fco: 100%;
color: hsla(var(--yellow-500-h) var(--yellow-500-s) var(--yellow-500-l) / var(--fco)) !important;
Aa
.d-fc-yellow-400
--fco: 100%;
color: hsla(var(--yellow-400-h) var(--yellow-400-s) var(--yellow-400-l) / var(--fco)) !important;
Aa
.d-fc-yellow-300
--fco: 100%;
color: hsla(var(--yellow-300-h) var(--yellow-300-s) var(--yellow-300-l) / var(--fco)) !important;
Aa
.d-fc-yellow-200
--fco: 100%;
color: hsla(var(--yellow-200-h) var(--yellow-200-s) var(--yellow-200-l) / var(--fco)) !important;
Aa
.d-fc-yellow-100
--fco: 100%;
color: hsla(var(--yellow-100-h) var(--yellow-100-s) var(--yellow-100-l) / var(--fco)) !important;
Aa
.d-fc-yellow-050
--fco: 100%;
color: hsla(var(--yellow-050-h) var(--yellow-050-s) var(--yellow-050-l) / var(--fco)) !important;
Aa
.d-fc-red-700
--fco: 100%;
color: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / var(--fco)) !important;
Aa
.d-fc-red-600
--fco: 100%;
color: hsla(var(--red-600-h) var(--red-600-s) var(--red-600-l) / var(--fco)) !important;
Aa
.d-fc-red-500
--fco: 100%;
color: hsla(var(--red-500-h) var(--red-500-s) var(--red-500-l) / var(--fco)) !important;
Aa
.d-fc-red-400
--fco: 100%;
color: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / var(--fco)) !important;
Aa
.d-fc-red-300
--fco: 100%;
color: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--fco)) !important;
Aa
.d-fc-red-200
--fco: 100%;
color: hsla(var(--red-200-h) var(--red-200-s) var(--red-200-l) / var(--fco)) !important;
Aa
.d-fc-red-100
--fco: 100%;
color: hsla(var(--red-100-h) var(--red-100-s) var(--red-100-l) / var(--fco)) !important;
Aa

Usage

Use d-fc-{color} to change an element's text color.

Changing opacity

Use d-fco{n} to change an element's text color opacity. You can also change font color opacity on :hover, :focus, or in dark mode by using the respective h:d-fco{stop}, f:d-fco{stop}, or d:d-fco{stop} prefixes.

Hover

Use h:d-fc-{color} to change an element's text color :hover state.

Focus

Use f:d-fc-{color} to change an element's text color :focus and :focus-within state.