Colors | TED Swatches

Plain colors

Variables

Note that we intentionally avoid true black (#000000) because of its unnatural appearance on locally dimmed LED screens. Please prefer $natural-black instead.

$natural-black

$darker-gray

$dark-gray

$gray

$light-gray

$lighter-gray

$white

$ted-red

Class Names

When possible, use class names to apply colors. The following class names can be used, with the mnemonics "bg" for background and "fg" for foreground.

fg-black

fg-dark-gray

fg-natural-black

fg-darker-gray

fg-dark-gray

fg-gray

fg-light-gray

fg-lighter-gray

fg-white

fg-red

bg-black--75

bg-black--66

bg-black--50

bg-black--33

bg-black--25

bg-black--10

bg-black

bg-darker-gray

bg-dark-gray

bg-gray

bg-light-gray

bg-lighter-gray

bg-white

bg-red

fg-black--hover

fg-darker-gray--hover

fg-dark-gray--hover

fg-gray--hover

fg-light-gray--hover

fg-lighter-gray--hover

fg-white--hover

fg-red--hover

bg-black--hover

bg-darker-gray--hover

bg-dark-gray--hover

bg-gray--hover

bg-light-gray--hover

bg-lighter-gray--hover

bg-white--hover

bg-red--hover

Gradients

Use these variables with the standard CSS background-image property. For example:

background-image: $ted-red-grad;

$ted-red-grad

$light-grad

$dark-grad