Colors

Accessibility

Please note whether dark or light text is used with the desired background color to ensure that accessible color contrast ratios are used.

Color Contrast

All type color combinations must pass WCAG AA standards of 4.5:1 for default-sized text text and 3:1 for large-sized text.

Text Colors

Default Text (.text-default) - Default text is black with a 87% opacity.
.text-secondary - secondary text is black with a 54% opacity. The .text-black-transparent class is the deprecated name for secondary text.
.text-disabled - disabled text is black with a 38% opacity.
.text-scarlet - scarlet text is UNLV-red (#b10202). The .text-red class is the deprecated name for this.
.text-light - Primary light text is white with 90% opacity. The .text-white class is the deprecated name for this.
.text-light-secondary - Secondary light text is white with 70% opacity. The .text-white-transparent class is the deprecated name for this.
.text-light-disabled - Disabled light text is white with 50% opacity.

Basic Background Colors

Light

.bg-blue
.bg-gray
.bg-green
.bg-orange
.bg-purple
.bg-tan
.bg-white
.bg-yellow

Dark

.bg-black
.bg-blue-dark
.bg-gray-dark
.bg-green-dark
.bg-orange-dark
.bg-purple-dark
.bg-red-dark
.bg-yellow-dark

Semi-Transparent Background Colors

Use semi-transparent background colors on top of another color to create composite colors. The number at the end of the class names indicates the alpha percentage of that color.

White

.bg-tr-white-05
.bg-tr-white-10
.bg-tr-white-20
.bg-tr-white-30
.bg-tr-white-40
.bg-tr-white-50
.bg-tr-white-60
.bg-tr-white-70
.bg-tr-white-80
.bg-tr-white-90

Black

.bg-tr-black-05
.bg-tr-black-10
.bg-tr-black-20
.bg-tr-black-30
.bg-tr-black-40
.bg-tr-black-50
.bg-tr-black-60
.bg-tr-black-70
.bg-tr-black-80
.bg-tr-black-90

Material Design Colors

Usage

The Material Design palette's colors and numbered so you can easily find color combinations.

Basic Colors

Basic colors end in a number (50-900) are intended for backgrounds that content is placed on. Lower numbers are lighter, and higher numbers are darker.

Accent Colors

Accent colors have an "a" before the ending number (e.g. a200). These colors are brighter and more saturated, which encourages user interaction. They are intended for interactive elements like links, buttons, and form controls.

Tips
  • 500s are useful for backgrounds with primary content.
  • 300s are useful for backgrounds with secondary content.
  • 700s are useful for backgrounds with headers and status bars.
  • 50s are useful for for lighter section backgrounds with default text colors.
  • Accents should only be used for interactive elements like cursors, buttons, sliders, and links. Don't use accent for large areas of color.
  • Make sure there is enough contrast between basic and accent colors.
  • When choosing a background color, note if light or default text is used.

Pink

.bg-pink-50
.text-pink-50
.bg-pink-100
.text-pink-100
.bg-pink-200
.text-pink-200
.bg-pink-300
.text-pink-300
.bg-pink-400
.text-pink-400
.bg-pink-500
.text-pink-500
.bg-pink-600
.text-pink-600
.bg-pink-700
.text-pink-700
.bg-pink-800
.text-pink-800
.bg-pink-900
.text-pink-900
.bg-pink-a100
.text-pink-a100
.bg-pink-a200
.text-pink-a200
.bg-pink-a400
.text-pink-a400
.bg-pink-a700
.text-pink-a700

Purple

.bg-purple-50
.text-purple-50
.bg-purple-100
.text-purple-100
.bg-purple-200
.text-purple-200
.bg-purple-300
.text-purple-300
.bg-purple-400
.text-purple-400
.bg-purple-500
.text-purple-500
.bg-purple-600
.text-purple-600
.bg-purple-700
.text-purple-700
.bg-purple-800
.text-purple-800
.bg-purple-900
.text-purple-900
.bg-purple-a100
.text-purple-a100
.bg-purple-a200
.text-purple-a200
.bg-purple-a400
.text-purple-a400
.bg-purple-a700
.text-purple-a700

Deep Purple

.bg-deep-purple-50
.text-deep-purple-50
.bg-deep-purple-100
.text-deep-purple-100
.bg-deep-purple-200
.text-deep-purple-200
.bg-deep-purple-300
.text-deep-purple-300
.bg-deep-purple-400
.text-deep-purple-400
.bg-deep-purple-500
.text-deep-purple-500
.bg-deep-purple-600
.text-deep-purple-600
.bg-deep-purple-700
.text-deep-purple-700
.bg-deep-purple-800
.text-deep-purple-800
.bg-deep-purple-900
.text-deep-purple-900
.bg-deep-purple-a100
.text-deep-purple-a100
.bg-deep-purple-a200
.text-deep-purple-a200
.bg-deep-purple-a400
.text-deep-purple-a400
.bg-deep-purple-a700
.text-deep-purple-a700

Indigo

.bg-indigo-50
.text-indigo-50
.bg-indigo-100
.text-indigo-100
.bg-indigo-200
.text-indigo-200
.bg-indigo-300
.text-indigo-300
.bg-indigo-400
.text-indigo-400
.bg-indigo-500
.text-indigo-500
.bg-indigo-600
.text-indigo-600
.bg-indigo-700
.text-indigo-700
.bg-indigo-800
.text-indigo-800
.bg-indigo-900
.text-indigo-900
.bg-indigo-a100
.text-indigo-a100
.bg-indigo-a200
.text-indigo-a200
.bg-indigo-a400
.text-indigo-a400
.bg-indigo-a700
.text-indigo-a700

Blue

.bg-blue-50
.text-blue-50
.bg-blue-100
.text-blue-100
.bg-blue-200
.text-blue-200
.bg-blue-300
.text-blue-300
.bg-blue-400
.text-blue-400
.bg-blue-500
.text-blue-500
.bg-blue-600
.text-blue-600
.bg-blue-700
.text-blue-700
.bg-blue-800
.text-blue-800
.bg-blue-900
.text-blue-900
.bg-blue-a100
.text-blue-a100
.bg-blue-a200
.text-blue-a200
.bg-blue-a400
.text-blue-a400
.bg-blue-a700
.text-blue-a700

Light Blue

.bg-light-blue-50
.text-light-blue-50
.bg-light-blue-100
.text-light-blue-100
.bg-light-blue-200
.text-light-blue-200
.bg-light-blue-300
.text-light-blue-300
.bg-light-blue-400
.text-light-blue-400
.bg-light-blue-500
.text-light-blue-500
.bg-light-blue-600
.text-light-blue-600
.bg-light-blue-700
.text-light-blue-700
.bg-light-blue-800
.text-light-blue-800
.bg-light-blue-900
.text-light-blue-900
.bg-light-blue-a100
.text-light-blue-a100
.bg-light-blue-a200
.text-light-blue-a200
.bg-light-blue-a400
.text-light-blue-a400
.bg-light-blue-a700
.text-light-blue-a700

Cyan

.bg-cyan-50
.text-cyan-50
.bg-cyan-100
.text-cyan-100
.bg-cyan-200
.text-cyan-200
.bg-cyan-300
.text-cyan-300
.bg-cyan-400
.text-cyan-400
.bg-cyan-500
.text-cyan-500
.bg-cyan-600
.text-cyan-600
.bg-cyan-700
.text-cyan-700
.bg-cyan-800
.text-cyan-800
.bg-cyan-900
.text-cyan-900
.bg-cyan-a100
.text-cyan-a100
.bg-cyan-a200
.text-cyan-a200
.bg-cyan-a400
.text-cyan-a400
.bg-cyan-a700
.text-cyan-a700

Teal

.bg-teal-50
.text-teal-50
.bg-teal-100
.text-teal-100
.bg-teal-200
.text-teal-200
.bg-teal-300
.text-teal-300
.bg-teal-400
.text-teal-400
.bg-teal-500
.text-teal-500
.bg-teal-600
.text-teal-600
.bg-teal-700
.text-teal-700
.bg-teal-800
.text-teal-800
.bg-teal-900
.text-teal-900
.bg-teal-a100
.text-teal-a100
.bg-teal-a200
.text-teal-a200
.bg-teal-a400
.text-teal-a400
.bg-teal-a700
.text-teal-a700

Green

.bg-green-50
.text-green-50
.bg-green-100
.text-green-100
.bg-green-200
.text-green-200
.bg-green-300
.text-green-300
.bg-green-400
.text-green-400
.bg-green-500
.text-green-500
.bg-green-600
.text-green-600
.bg-green-700
.text-green-700
.bg-green-800
.text-green-800
.bg-green-900
.text-green-900
.bg-green-a100
.text-green-a100
.bg-green-a200
.text-green-a200
.bg-green-a400
.text-green-a400
.bg-green-a700
.text-green-a700

Light Green

.bg-light-green-50
.text-light-green-50
.bg-light-green-100
.text-light-green-100
.bg-light-green-200
.text-light-green-200
.bg-light-green-300
.text-light-green-300
.bg-light-green-400
.text-light-green-400
.bg-light-green-500
.text-light-green-500
.bg-light-green-600
.text-light-green-600
.bg-light-green-700
.text-light-green-700
.bg-light-green-800
.text-light-green-800
.bg-light-green-900
.text-light-green-900
.bg-light-green-a100
.text-light-green-a100
.bg-light-green-a200
.text-light-green-a200
.bg-light-green-a400
.text-light-green-a400
.bg-light-green-a700
.text-light-green-a700

Lime

.bg-lime-50
.text-lime-50
.bg-lime-100
.text-lime-100
.bg-lime-200
.text-lime-200
.bg-lime-300
.text-lime-300
.bg-lime-400
.text-lime-400
.bg-lime-500
.text-lime-500
.bg-lime-600
.text-lime-600
.bg-lime-700
.text-lime-700
.bg-lime-800
.text-lime-800
.bg-lime-900
.text-lime-900
.bg-lime-a100
.text-lime-a100
.bg-lime-a200
.text-lime-a200
.bg-lime-a400
.text-lime-a400
.bg-lime-a700
.text-lime-a700

Yellow

.bg-yellow-50
.text-yellow-50
.bg-yellow-100
.text-yellow-100
.bg-yellow-200
.text-yellow-200
.bg-yellow-300
.text-yellow-300
.bg-yellow-400
.text-yellow-400
.bg-yellow-500
.text-yellow-500
.bg-yellow-600
.text-yellow-600
.bg-yellow-700
.text-yellow-700
.bg-yellow-800
.text-yellow-800
.bg-yellow-900
.text-yellow-900
.bg-yellow-a100
.text-yellow-a100
.bg-yellow-a200
.text-yellow-a200
.bg-yellow-a400
.text-yellow-a400
.bg-yellow-a700
.text-yellow-a700

Amber

.bg-amber-50
.text-amber-50
.bg-amber-100
.text-amber-100
.bg-amber-200
.text-amber-200
.bg-amber-300
.text-amber-300
.bg-amber-400
.text-amber-400
.bg-amber-500
.text-amber-500
.bg-amber-600
.text-amber-600
.bg-amber-700
.text-amber-700
.bg-amber-800
.text-amber-800
.bg-amber-900
.text-amber-900
.bg-amber-a100
.text-amber-a100
.bg-amber-a200
.text-amber-a200
.bg-amber-a400
.text-amber-a400
.bg-amber-a700
.text-amber-a700

Orange

.bg-orange-50
.text-orange-50
.bg-orange-100
.text-orange-100
.bg-orange-200
.text-orange-200
.bg-orange-300
.text-orange-300
.bg-orange-400
.text-orange-400
.bg-orange-500
.text-orange-500
.bg-orange-600
.text-orange-600
.bg-orange-700
.text-orange-700
.bg-orange-800
.text-orange-800
.bg-orange-900
.text-orange-900
.bg-orange-a100
.text-orange-a100
.bg-orange-a200
.text-orange-a200
.bg-orange-a400
.text-orange-a400
.bg-orange-a700
.text-orange-a700

Deep Orange

.bg-deep-orange-50
.text-deep-orange-50
.bg-deep-orange-100
.text-deep-orange-100
.bg-deep-orange-200
.text-deep-orange-200
.bg-deep-orange-300
.text-deep-orange-300
.bg-deep-orange-400
.text-deep-orange-400
.bg-deep-orange-500
.text-deep-orange-500
.bg-deep-orange-600
.text-deep-orange-600
.bg-deep-orange-700
.text-deep-orange-700
.bg-deep-orange-800
.text-deep-orange-800
.bg-deep-orange-900
.text-deep-orange-900
.bg-deep-orange-a100
.text-deep-orange-a100
.bg-deep-orange-a200
.text-deep-orange-a200
.bg-deep-orange-a400
.text-deep-orange-a400
.bg-deep-orange-a700
.text-deep-orange-a700

Brown

.bg-brown-50
.text-brown-50
.bg-brown-100
.text-brown-100
.bg-brown-200
.text-brown-200
.bg-brown-300
.text-brown-300
.bg-brown-400
.text-brown-400
.bg-brown-500
.text-brown-500
.bg-brown-600
.text-brown-600
.bg-brown-700
.text-brown-700
.bg-brown-800
.text-brown-800
.bg-brown-900
.text-brown-900

Gray

.bg-gray-50
.text-gray-50
.bg-gray-100
.text-gray-100
.bg-gray-200
.text-gray-200
.bg-gray-300
.text-gray-300
.bg-gray-400
.text-gray-400
.bg-gray-500
.text-gray-500
.bg-gray-600
.text-gray-600
.bg-gray-700
.text-gray-700
.bg-gray-800
.text-gray-800
.bg-gray-900
.text-gray-900

Blue-Gray

.bg-blue-gray-50
.text-blue-gray-50
.bg-blue-gray-100
.text-blue-gray-100
.bg-blue-gray-200
.text-blue-gray-200
.bg-blue-gray-300
.text-blue-gray-300
.bg-blue-gray-400
.text-blue-gray-400
.bg-blue-gray-500
.text-blue-gray-500
.bg-blue-gray-600
.text-blue-gray-600
.bg-blue-gray-700
.text-blue-gray-700
.bg-blue-gray-800
.text-blue-gray-800
.bg-blue-gray-900
.text-blue-gray-900