Foreground, Background, Border

Each named color exposes foreground, background, border, hover foreground, and hover background forms. Core Tachyons Neo does not include hover border-color utilities; those live in app.css for semantic app tokens.

<p class="dark-blue">Foreground</p>
<p class="bg-light-blue near-black">Background</p>
<p class="ba b--dark-blue">Border</p>

Form	Example
foreground	blue, near-black, white-70
background	bg-blue, bg-near-black, bg-white-10
border	b--blue, b--near-black, b--white-10
hover foreground	hover-blue, hover-white
hover background	hover-bg-blue, hover-bg-white-10

Color inheritance and reset helpers are also available: color-inherit, bg-transparent, bg-inherit, b--transparent, b--inherit, b--initial, and b--unset.

Palette

Grayscale

black

black

bg-black

b--black

hover-black

hover-bg-black

#000

near-black

near-black

bg-near-black

b--near-black

hover-near-black

hover-bg-near-black

#111

dark-gray

dark-gray

bg-dark-gray

b--dark-gray

hover-dark-gray

hover-bg-dark-gray

#333

mid-gray

mid-gray

bg-mid-gray

b--mid-gray

hover-mid-gray

hover-bg-mid-gray

#555

gray

gray

bg-gray

b--gray

hover-gray

hover-bg-gray

#777

silver

silver

bg-silver

b--silver

hover-silver

hover-bg-silver

#999

light-silver

light-silver

bg-light-silver

b--light-silver

hover-light-silver

hover-bg-light-silver

#aaa

moon-gray

moon-gray

bg-moon-gray

b--moon-gray

hover-moon-gray

hover-bg-moon-gray

#ccc

light-gray

light-gray

bg-light-gray

b--light-gray

hover-light-gray

hover-bg-light-gray

#eee

near-white

near-white

bg-near-white

b--near-white

hover-near-white

hover-bg-near-white

#f4f4f4

white

white

bg-white

b--white

hover-white

hover-bg-white

#fff

Black alpha

black-90

black-90

bg-black-90

b--black-90

hover-black-90

hover-bg-black-90

rgba(0, 0, 0, .9)

black-80

black-80

bg-black-80

b--black-80

hover-black-80

hover-bg-black-80

rgba(0, 0, 0, .8)

black-70

black-70

bg-black-70

b--black-70

hover-black-70

hover-bg-black-70

rgba(0, 0, 0, .7)

black-60

black-60

bg-black-60

b--black-60

hover-black-60

hover-bg-black-60

rgba(0, 0, 0, .6)

black-50

black-50

bg-black-50

b--black-50

hover-black-50

hover-bg-black-50

rgba(0, 0, 0, .5)

black-40

black-40

bg-black-40

b--black-40

hover-black-40

hover-bg-black-40

rgba(0, 0, 0, .4)

black-30

black-30

bg-black-30

b--black-30

hover-black-30

hover-bg-black-30

rgba(0, 0, 0, .3)

black-20

black-20

bg-black-20

b--black-20

hover-black-20

hover-bg-black-20

rgba(0, 0, 0, .2)

black-10

black-10

bg-black-10

b--black-10

hover-black-10

hover-bg-black-10

rgba(0, 0, 0, .1)

black-05

black-05

bg-black-05

b--black-05

hover-black-05

hover-bg-black-05

rgba(0, 0, 0, .05)

black-025

black-025

bg-black-025

b--black-025

hover-black-025

hover-bg-black-025

rgba(0, 0, 0, .025)

black-0125

black-0125

bg-black-0125

b--black-0125

hover-black-0125

hover-bg-black-0125

rgba(0, 0, 0, .0125)

White alpha

white-90

white-90

bg-white-90

b--white-90

hover-white-90

hover-bg-white-90

hsla(0, 0%, 100%, .9)

white-80

white-80

bg-white-80

b--white-80

hover-white-80

hover-bg-white-80

hsla(0, 0%, 100%, .8)

white-70

white-70

bg-white-70

b--white-70

hover-white-70

hover-bg-white-70

hsla(0, 0%, 100%, .7)

white-60

white-60

bg-white-60

b--white-60

hover-white-60

hover-bg-white-60

hsla(0, 0%, 100%, .6)

white-50

white-50

bg-white-50

b--white-50

hover-white-50

hover-bg-white-50

hsla(0, 0%, 100%, .5)

white-40

white-40

bg-white-40

b--white-40

hover-white-40

hover-bg-white-40

hsla(0, 0%, 100%, .4)

white-30

white-30

bg-white-30

b--white-30

hover-white-30

hover-bg-white-30

hsla(0, 0%, 100%, .3)

white-20

white-20

bg-white-20

b--white-20

hover-white-20

hover-bg-white-20

hsla(0, 0%, 100%, .2)

white-10

white-10

bg-white-10

b--white-10

hover-white-10

hover-bg-white-10

hsla(0, 0%, 100%, .1)

white-05

white-05

bg-white-05

b--white-05

hover-white-05

hover-bg-white-05

hsla(0, 0%, 100%, .05)

white-025

white-025

bg-white-025

b--white-025

hover-white-025

hover-bg-white-025

hsla(0, 0%, 100%, .025)

white-0125

white-0125

bg-white-0125

b--white-0125

hover-white-0125

hover-bg-white-0125

hsla(0, 0%, 100%, .0125)

Warm

dark-red

dark-red

bg-dark-red

b--dark-red

hover-dark-red

hover-bg-dark-red

#e7040f

red

red

bg-red

b--red

hover-red

hover-bg-red

#ff4136

light-red

light-red

bg-light-red

b--light-red

hover-light-red

hover-bg-light-red

#ff725c

orange

orange

bg-orange

b--orange

hover-orange

hover-bg-orange

#ff6300

gold

gold

bg-gold

b--gold

hover-gold

hover-bg-gold

#ffb700

yellow

yellow

bg-yellow

b--yellow

hover-yellow

hover-bg-yellow

#ffd700

light-yellow

light-yellow

bg-light-yellow

b--light-yellow

hover-light-yellow

hover-bg-light-yellow

#fbf1a9

Purple and pink

purple

purple

bg-purple

b--purple

hover-purple

hover-bg-purple

#5e2ca5

light-purple

light-purple

bg-light-purple

b--light-purple

hover-light-purple

hover-bg-light-purple

#a463f2

dark-pink

dark-pink

bg-dark-pink

b--dark-pink

hover-dark-pink

hover-bg-dark-pink

#d5008f

hot-pink

hot-pink

bg-hot-pink

b--hot-pink

hover-hot-pink

hover-bg-hot-pink

#ff41b4

pink

pink

bg-pink

b--pink

hover-pink

hover-bg-pink

#ff80cc

light-pink

light-pink

bg-light-pink

b--light-pink

hover-light-pink

hover-bg-light-pink

#ffa3d7

Green

dark-green

dark-green

bg-dark-green

b--dark-green

hover-dark-green

hover-bg-dark-green

#137752

green

green

bg-green

b--green

hover-green

hover-bg-green

#19a974

light-green

light-green

bg-light-green

b--light-green

hover-light-green

hover-bg-light-green

#9eebcf

Blue

navy

navy

bg-navy

b--navy

hover-navy

hover-bg-navy

#001b44

dark-blue

dark-blue

bg-dark-blue

b--dark-blue

hover-dark-blue

hover-bg-dark-blue

#00449e

blue

blue

bg-blue

b--blue

hover-blue

hover-bg-blue

#357edd

light-blue

light-blue

bg-light-blue

b--light-blue

hover-light-blue

hover-bg-light-blue

#96ccff

lightest-blue

lightest-blue

bg-lightest-blue

b--lightest-blue

hover-lightest-blue

hover-bg-lightest-blue

#cdecff

Washed

washed-blue

washed-blue

bg-washed-blue

b--washed-blue

hover-washed-blue

hover-bg-washed-blue

#f6fffe

washed-green

washed-green

bg-washed-green

b--washed-green

hover-washed-green

hover-bg-washed-green

#e8fdf5

washed-yellow

washed-yellow

bg-washed-yellow

b--washed-yellow

hover-washed-yellow

hover-bg-washed-yellow

#fffceb

washed-red

washed-red

bg-washed-red

b--washed-red

hover-washed-red

hover-bg-washed-red

#ffdfdf

Alpha Steps

Neo adds low-alpha black and white steps for hairline UI. They are available as foreground, background, border, hover foreground, and hover background utilities.

Black	White
black-90 through black-05	white-90 through white-05
black-025	white-025
black-0125	white-0125

<div class="bt b--black-025 bg-white-05">
  Quiet divider
</div>

Stripes

Use striped helpers on repeated children.

Class	Odd-row background
striped--light-silver	light-silver
striped--moon-gray	moon-gray
striped--light-gray	light-gray
striped--near-white	near-white
stripe-light	white-10
stripe-dark	black-10

<table class="collapse w-100">
  <tbody>
    <tr class="striped--near-white"><td>One</td></tr>
    <tr class="striped--near-white"><td>Two</td></tr>
  </tbody>
</table>