Color Utilities
Table of contents
- Light Greys
- Dark Greys
- Purples
- Blues
- Greens
- Yellows
- Reds
All the colors used in Just the Docs have been systematized 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-250 |
.text-grey-dk-250 |
.bg-grey-dk-250 |
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 |