Patterns

2.3.2

Colors

Headings

light background Text
Hyperlinks
.color-light-background

Headings

mid background Text
Hyperlinks
.color-mid-background

Headings

dark background Text
Hyperlinks
.color-dark-background
primary button Text
.color-primary-button
secondary button Text
.color-secondary-button
 

Color Combinations

These utililies manage the color properties of various elements including text, background, hyperlinks, inputs, and checkboxes. The combinations are tested for adequate contrast following the distinguishability guideline of the Web Content Accessibility Guidelines (WCAG) 2.0. Hyperlinks are underlined to accommodate color blindness to avoid solely relying on color to distinguish them. WCAG AA compliance depends on the base text size. The examples may not be fully compliant because their font-size is set to a smaller size.

Hex
#24325b
Border
.border-navy
Text
.text-navy
Background
.bg-navy
Hex
#4157aa
Border
.border-navy-70t
Text
.text-navy-70t
Background
.bg-navy-70t
Hex
#8195dc
Border
.border-navy-50t
Text
.text-navy-50t
Background
.bg-navy-50t
Hex
#cdd8ef
Border
.border-navy-30t
Text
.text-navy-30t
Background
.bg-navy-30t
Hex
#284cca
Border
.border-blue
Text
.text-blue
Background
.bg-blue
Hex
#568adf
Border
.border-blue-70t
Text
.text-blue-70t
Background
.bg-blue-70t
Hex
#96beff
Border
.border-blue-50t
Text
.text-blue-50t
Background
.bg-blue-50t
Hex
#d2e8ff
Border
.border-blue-30t
Text
.text-blue-30t
Background
.bg-blue-30t
Hex
#fc5d52
Border
.border-red
Text
.text-red
Background
.bg-red
Hex
#ff8787
Border
.border-red-70t
Text
.text-red-70t
Background
.bg-red-70t
Hex
#ffafaf
Border
.border-red-50t
Text
.text-red-50t
Background
.bg-red-50t
Hex
#ffdbdb
Border
.border-red-30t
Text
.text-red-30t
Background
.bg-red-30t
Hex
#7c7f83
Border
.border-grey
Text
.text-grey
Background
.bg-grey
Hex
#999ca4
Border
.border-grey-70t
Text
.text-grey-70t
Background
.bg-grey-70t
Hex
#c1c6cb
Border
.border-grey-50t
Text
.text-grey-50t
Background
.bg-grey-50t
Hex
#e6e8ec
Border
.border-grey-30t
Text
.text-grey-30t
Background
.bg-grey-30t
Hex
#F3F3F3
Border
.border-white
Text
.text-white
Background
.bg-white
Hex
#F6F6F6
Border
.border-white-70t
Text
.text-white-70t
Background
.bg-white-70t
Hex
#F9F9FA
Border
.border-white-50t
Text
.text-white-50t
Background
.bg-white-50t
Hex
#FBFCFC
Border
.border-white-30t
Text
.text-white-30t
Background
.bg-white-30t
Hex
#faa302
Border
.border-orange
Text
.text-orange
Background
.bg-orange
Hex
#fbb95a
Border
.border-orange-70t
Text
.text-orange-70t
Background
.bg-orange-70t
Hex
#fbd8a1
Border
.border-orange-50t
Text
.text-orange-50t
Background
.bg-orange-50t
Hex
#ffeecd
Border
.border-orange-30t
Text
.text-orange-30t
Background
.bg-orange-30t
Hex
#f9a5da
Border
.border-pink
Text
.text-pink
Background
.bg-pink
Hex
#ffc0f6
Border
.border-pink-70t
Text
.text-pink-70t
Background
.bg-pink-70t
Hex
#fbd9ff
Border
.border-pink-50t
Text
.text-pink-50t
Background
.bg-pink-50t
Hex
#fff0fe
Border
.border-pink-30t
Text
.text-pink-30t
Background
.bg-pink-30t
Hex
#000000
Border
.border-base-black
Text
.text-base-black
Background
.bg-base-black
Hex
#FFFFFF
Border
.border-base-white
Text
.text-base-white
Background
.bg-base-white
 
 

Color Utilities

Color Utilities are enabled through Tailwind.css. The background, text, and border color can be set for the static, hover, and responsive states of any element using the proper prefex below.

/* Background Color */
.bg-{{ color }}

/* Text Color */
.text-{{ color }}

/* Border Color */
.border-{{ color }}

/* Hover State (for the background property) */
.hover:bg-{{ color }}

/* Responsive State (for the background property) */
.{{ screen size }}:bg-{{ color }}

More details about the configuration can be found in the Tailwind Utilities documentation.