Color Utilities

Table of contents

HM Colors
Just the docs default colors

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

HM Colors

HM Purples

Color value	Font color utility	Background color utility
`hm-purple-100`	`.text-hm-purple-100`	`.bg-hm-purple-100`
`hm-purple-200`	`.text-hm-purple-200`	`.bg-hm-purple-200`
`hm-purple-300`	`.text-hm-purple-300`	`.bg-hm-purple-300`
`hm-purple-400`	`.text-hm-purple-400`	`.bg-hm-purple-400`
`hm-purple-500`	`.text-hm-purple-500`	`.bg-hm-purple-500`
`hm-purple-600`	`.text-hm-purple-600`	`.bg-hm-purple-600`
`hm-purple-700`	`.text-hm-purple-700`	`.bg-hm-purple-700`
`hm-purple-800`	`.text-hm-purple-800`	`.bg-hm-purple-800`
`hm-purple-900`	`.text-hm-purple-900`	`.bg-hm-purple-900`
`hm-purple-1000`	`.text-hm-purple-1000`	`.bg-hm-purple-1000`

HM Reds

Color value	Font color utility	Background color utility
`hm-red-100`	`.text-hm-red-100`	`.bg-hm-red-100`
`hm-red-200`	`.text-hm-red-200`	`.bg-hm-red-200`
`hm-red-300`	`.text-hm-red-300`	`.bg-hm-red-300`
`hm-red-400`	`.text-hm-red-400`	`.bg-hm-red-400`
`hm-red-500`	`.text-hm-red-500`	`.bg-hm-red-500`
`hm-red-600`	`.text-hm-red-600`	`.bg-hm-red-600`
`hm-red-700`	`.text-hm-red-700`	`.bg-hm-red-700`
`hm-red-800`	`.text-hm-red-800`	`.bg-hm-red-800`
`hm-red-900`	`.text-hm-red-900`	`.bg-hm-red-900`
`hm-red-1000`	`.text-hm-red-1000`	`.bg-hm-red-1000`

HM Blues

Color value	Font color utility	Background color utility
`hm-blue-100`	`.text-hm-blue-100`	`.bg-hm-blue-100`
`hm-blue-200`	`.text-hm-blue-200`	`.bg-hm-blue-200`
`hm-blue-300`	`.text-hm-blue-300`	`.bg-hm-blue-300`
`hm-blue-400`	`.text-hm-blue-400`	`.bg-hm-blue-400`
`hm-blue-500`	`.text-hm-blue-500`	`.bg-hm-blue-500`
`hm-blue-600`	`.text-hm-blue-600`	`.bg-hm-blue-600`
`hm-blue-700`	`.text-hm-blue-700`	`.bg-hm-blue-700`
`hm-blue-800`	`.text-hm-blue-800`	`.bg-hm-blue-800`
`hm-blue-900`	`.text-hm-blue-900`	`.bg-hm-blue-900`
`hm-blue-1000`	`.text-hm-blue-1000`	`.bg-hm-blue-1000`

HM Mints

Color value	Font color utility	Background color utility
`hm-mint-100`	`.text-hm-mint-100`	`.bg-hm-mint-100`
`hm-mint-200`	`.text-hm-mint-200`	`.bg-hm-mint-200`
`hm-mint-300`	`.text-hm-mint-300`	`.bg-hm-mint-300`
`hm-mint-400`	`.text-hm-mint-400`	`.bg-hm-mint-400`
`hm-mint-500`	`.text-hm-mint-500`	`.bg-hm-mint-500`
`hm-mint-600`	`.text-hm-mint-600`	`.bg-hm-mint-600`
`hm-mint-700`	`.text-hm-mint-700`	`.bg-hm-mint-700`
`hm-mint-800`	`.text-hm-mint-800`	`.bg-hm-mint-800`
`hm-mint-900`	`.text-hm-mint-900`	`.bg-hm-mint-900`
`hm-mint-1000`	`.text-hm-mint-1000`	`.bg-hm-mint-1000`

HM Navys

Color value	Font color utility	Background color utility
`hm-navy-100`	`.text-hm-navy-100`	`.bg-hm-navy-100`
`hm-navy-200`	`.text-hm-navy-200`	`.bg-hm-navy-200`
`hm-navy-300`	`.text-hm-navy-300`	`.bg-hm-navy-300`
`hm-navy-400`	`.text-hm-navy-400`	`.bg-hm-navy-400`
`hm-navy-500`	`.text-hm-navy-500`	`.bg-hm-navy-500`
`hm-navy-600`	`.text-hm-navy-600`	`.bg-hm-navy-600`
`hm-navy-700`	`.text-hm-navy-700`	`.bg-hm-navy-700`
`hm-navy-800`	`.text-hm-navy-800`	`.bg-hm-navy-800`
`hm-navy-900`	`.text-hm-navy-900`	`.bg-hm-navy-900`
`hm-navy-1000`	`.text-hm-navy-1000`	`.bg-hm-navy-1000`

HM Neutrals

Color value	Font color utility	Background color utility
`hm-black`	`.text-hm-black`	`.bg-hm-black`
`hm-off-black`	`.text-hm-off-black`	`.bg-hm-off-black`
`hm-charcoal-grey`	`.text-hm-charcoal-grey`	`.bg-hm-charcoal-grey`
`hm-ash-grey`	`.text-hm-ash-grey`	`.bg-hm-ash-grey`
`hm-white-mist`	`.text-hm-white-mist`	`.bg-hm-white-mist`
`hm-off-white`	`.text-hm-off-white`	`.bg-hm-off-white`
`hm-white`	`.text-hm-white`	`.bg-hm-white`

Just the docs default colors

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`