notes/docs/utilities/color.md

layout	title	nav_order	parent
default	Color	3	Utilities

Color Utilities

{:.no_toc}

Table of contents

{: .no_toc .text-delta }

1. TOC {:toc}

---

All the colors used in Just the Docs have been systemsized into a series of variables that have been extended to both font color and background color utility classes.

Light Greys

Color value	Font color utility	Background color utility
grey-lt-000	.text-grey-lt-000	.bg-grey-lt-000
grey-lt-100	.text-grey-lt-100	.bg-grey-lt-100
grey-lt-200	.text-grey-lt-200	.bg-grey-lt-200
grey-lt-300	.text-grey-lt-300	.bg-grey-lt-300

Dark Greys

Color value	Font color utility	Background color utility
grey-dk-000	.text-grey-dk-000	.bg-grey-dk-000
grey-dk-100	.text-grey-dk-100	.bg-grey-dk-100
grey-dk-200	.text-grey-dk-200	.bg-grey-dk-200
grey-dk-300	.text-grey-dk-300	.bg-grey-dk-300

Purples

Color value	Font color utility	Background color utility
purple-000	.text-purple-000	.bg-purple-000
purple-100	.text-purple-100	.bg-purple-100
purple-200	.text-purple-200	.bg-purple-200
purple-300	.text-purple-300	.bg-purple-300

Blues

Color value	Font color utility	Background color utility
blue-000	.text-blue-000	.bg-blue-000
blue-100	.text-blue-100	.bg-blue-100
blue-200	.text-blue-200	.bg-blue-200
blue-300	.text-blue-300	.bg-blue-300

Greens

Color value	Font color utility	Background color utility
green-000	.text-green-000	.bg-green-000
green-100	.text-green-100	.bg-green-100
green-200	.text-green-200	.bg-green-200
green-300	.text-green-300	.bg-green-300

Yellows

Color value	Font color utility	Background color utility
yellow-000	.text-yellow-000	.bg-yellow-000
yellow-100	.text-yellow-100	.bg-yellow-100
yellow-200	.text-yellow-200	.bg-yellow-200
yellow-300	.text-yellow-300	.bg-yellow-300

Reds

Color value	Font color utility	Background color utility
red-000	.text-red-000	.bg-red-000
red-100	.text-red-100	.bg-red-100
red-200	.text-red-200	.bg-red-200
red-300	.text-red-300	.bg-red-300