Skip to main content Link Menu Expand (external link) Document Search Copy Copied

Color Utilities

Table of contents

  1. HM Colors
    1. HM Purples
    2. HM Reds
    3. HM Blues
    4. HM Mints
    5. HM Navys
    6. HM Neutrals
  2. Just the docs default colors
    1. Light Greys
    2. Dark Greys
    3. Purples
    4. Blues
    5. Greens
    6. Yellows
    7. Reds

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 valueFont color utilityBackground 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 valueFont color utilityBackground 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 valueFont color utilityBackground 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 valueFont color utilityBackground 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 valueFont color utilityBackground 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 valueFont color utilityBackground 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 valueFont color utilityBackground 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 valueFont color utilityBackground 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 valueFont color utilityBackground 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 valueFont color utilityBackground 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 valueFont color utilityBackground 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 valueFont color utilityBackground 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 valueFont color utilityBackground 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