Grayscale

Colors can be applied to backgrounds of an element with the .bg prefix, or can apply color to the text of the element with just its name.

Black and white opacities are similar, but their convention is their name, with the percentage of opacity at the end.

Aa .bg-black, .black = #000;
Aa .bg-near-black, .near-black = #222;
Aa .bg-dark-gray, .dark-gray = #4a4a4a;
Aa .bg-mid-gray, .mid-gray = #666;
Aa .bg-gray, .gray = #888;
Aa .bg-silver, .silver = #999;
Aa .bg-light-silver, .light-silver = #aaa;
Aa .bg-moon-gray, .moon-gray = #ccc;
Aa .bg-light-gray, .light-gray = #e0e0e0;
Aa .bg-near-white, .near-white = #f9f9f9;
Aa .bg-white, .white = #fff;

Black Opacities

Aa Aa .bg-black-90, .black-90 = rgba(0,0,0,.9);
Aa Aa .bg-black-80, .black-80 = rgba(0,0,0,.8);
Aa Aa .bg-black-70, .black-70 = rgba(0,0,0,.7);
Aa Aa .bg-black-60, .black-60 = rgba(0,0,0,.6);
Aa Aa .bg-black-50, .black-50 = rgba(0,0,0,.5);
Aa Aa .bg-black-40, .black-40 = rgba(0,0,0,.4);
Aa Aa .bg-black-30, .black-30 = rgba(0,0,0,.3);
Aa Aa .bg-black-20, .black-20 = rgba(0,0,0,.2);
Aa Aa .bg-black-10, .black-10 = rgba(0,0,0,.1);
Aa Aa .bg-black-05, .black-05 = rgba(0,0,0,.05);

White Opacities

Aa Aa .bg-white-90, .white-90 = rgba(255,255,255,.9);
Aa Aa .bg-white-80, .white-80 = rgba(255,255,255,.8);
Aa Aa .bg-white-70, .white-70 = rgba(255,255,255,.7);
Aa Aa .bg-white-60, .white-60 = rgba(255,255,255,.6);
Aa Aa .bg-white-50, .white-50 = rgba(255,255,255,.5);
Aa Aa .bg-white-40, .white-40 = rgba(255,255,255,.4);
Aa Aa .bg-white-30, .white-30 = rgba(255,255,255,.3);
Aa Aa .bg-white-20, .white-20 = rgba(255,255,255,.2);
Aa Aa .bg-white-10, .white-10 = rgba(255,255,255,.1); 
:root {
  
  --black: #000;
  --near-black: #222;
  --dark-gray: #4a4a4a;
  --mid-gray: #666;
  --gray: #888;
  --silver: #999;
  --light-silver: #aaa;
  --moon-gray: #ccc;
  --light-gray: #e0e0e0;
  --near-white: #f9f9f9;
  --white: #fff;
  
  --black-90: rgba(0,0,0,.9);
  --black-80: rgba(0,0,0,.8);
  --black-70: rgba(0,0,0,.7);
  --black-60: rgba(0,0,0,.6);
  --black-50: rgba(0,0,0,.5);
  --black-40: rgba(0,0,0,.4);
  --black-30: rgba(0,0,0,.3);
  --black-20: rgba(0,0,0,.2);
  --black-10: rgba(0,0,0,.1);
  --black-05: rgba(0,0,0,.05);
  
  --white-90: rgba(255,255,255,.9);
  --white-80: rgba(255,255,255,.8);
  --white-70: rgba(255,255,255,.7);
  --white-60: rgba(255,255,255,.6);
  --white-50: rgba(255,255,255,.5);
  --white-40: rgba(255,255,255,.4);
  --white-30: rgba(255,255,255,.3);
  --white-20: rgba(255,255,255,.2);
  --white-10: rgba(255,255,255,.1);
}


.black { color: var(--black)};
.near-black { color: var(--near-black)};
.dark-gray { color: var(--dark-gray)};
.mid-gray { color: var(--mid-gray)};
.gray { color: var(--gray)};
.silver { color: var(--silver)};
.light-silver { color: var(--light-silver)};
.moon-gray { color: var(--moon-gray)};
.light-gray { color: var(--light-gray)};
.near-white { color: var(--near-white)};
.white { color: var(--white)};


.black-90 { color: var(--black-90)};
.black-80 { color: var(--black-80)};
.black-70 { color: var(--black-70)};
.black-60 { color: var(--black-60)};
.black-50 { color: var(--black-50)};
.black-40 { color: var(--black-40)};
.black-30 { color: var(--black-30)};
.black-20 { color: var(--black-20)};
.black-10 { color: var(--black-10)};
.black-05 { color: var(--black-05)};


.white-90 { color: var(--white-90)};
.white-80 { color: var(--white-80)};
.white-70 { color: var(--white-70)};
.white-60 { color: var(--white-60)};
.white-50 { color: var(--white-50)};
.white-40 { color: var(--white-40)};
.white-30 { color: var(--white-30)};
.white-20 { color: var(--white-20)};
.white-10 { color: var(--white-10)};


.bg-black { background-color: var(--black)};
.bg-near-black { background-color: var(--near-black)};
.bg-dark-gray { background-color: var(--dark-gray)};
.bg-mid-gray { background-color: var(--mid-gray)};
.bg-gray { background-color: var(--gray)};
.bg-silver { background-color: var(--silver)};
.bg-light-silver { background-color: var(--light-silver)};
.bg-moon-gray { background-color: var(--moon-gray)};
.bg-light-gray { background-color: var(--light-gray)};
.bg-near-white { background-color: var(--near-white)};
.bg-white { background-color: var(--white)};


.bg-black-90 { background-color: var(--black-90)};
.bg-black-80 { background-color: var(--black-80)};
.bg-black-70 { background-color: var(--black-70)};
.bg-black-60 { background-color: var(--black-60)};
.bg-black-50 { background-color: var(--black-50)};
.bg-black-40 { background-color: var(--black-40)};
.bg-black-30 { background-color: var(--black-30)};
.bg-black-20 { background-color: var(--black-20)};
.bg-black-10 { background-color: var(--black-10)};
.bg-black-05 { background-color: var(--black-05)};


.bg-white-90 { background-color: var(--white-90)};
.bg-white-80 { background-color: var(--white-80)};
.bg-white-70 { background-color: var(--white-70)};
.bg-white-60 { background-color: var(--white-60)};
.bg-white-50 { background-color: var(--white-50)};
.bg-white-40 { background-color: var(--white-40)};
.bg-white-30 { background-color: var(--white-30)};
.bg-white-20 { background-color: var(--white-20)};
.bg-white-10 { background-color: var(--white-10)};