Color

The UABIT Website uses an expanded version of the official color palette provided by University Relations. Each color is given a semantic name and a number value in 100 increments between 100 and 900 inclusive. 500 represents the base color, with lower numbers being tints and higher numbers being shades.

Neutral

This color is used to create depth and create divisions. The base of this color is Smoke Gray from the UAB brand toolkit. This color is referred to as its old name Stone in the code.

Neutral 100
#e6e6e7

Neutral 200
#cccdce

Neutral 300
#b3b4b6

Neutral 400
#999b9d

Neutral 500
#808285

Neutral 600
#66686a

Neutral 700
#4d4e50

Neutral 800
#333435

Neutral 900
#1a1a1b

The background color for many elements is Neutral 500 at 15% opacity.

Primary

This color is used for navigational cues and as a theme in some components. The use of this color should indicate high importance or an actionable item such as a button or link. This base of this color is UAB green from the UAB brand toolkit.

Primary 100
#d2e1dc

Primary 200
#a5c4ba

Primary 300
#78a697

Primary 400
#4b8975

Primary 500
#1e6b52

Primary 600
#185642

Primary 700
#124031

Primary 800
#0c2b21

Primary 900
#061510

Secondary

This color is typically used to provide depth, it has no defined meaning and so can be used anywhere to provide color. The base of this color is Dragon's Lair Green from the UAB brand toolkit. This color is referred to as its old name Dark Green in the code.

Secondary 100
#d4dcd7

Secondary 200
#a9b9ae

Secondary 300
#7f9786

Secondary 400
#54745d

Secondary 500
#295135

Secondary 600
#21412a

Secondary 700
#193120

Secondary 800
#102015

Secondary 900
#08100b

Accent

This color is used in two contexts, in the first it serves as an accent color on certain UI elements. In the other context, it is used to communicate a positive status. The base of this color is Campus Green in the UAB brand toolkit. This color is referred to as its old name Apple Green in the code.

Accent 100
#e6f2cc

Accent 200
#cce499

Accent 300
#b3d766

Accent 400
#99c933

Accent 500
#80bc00

Accent 600
#669600

Accent 700
#4d7100

Accent 800
#334b00

Accent 900
#1a2600

Caution

This color is typically used to indicate information or actions that the user should think about more carefully before proceeding. The base of this color is Loyal Yellow from the UAB brand toolkit. This color is referred to as its old name Blaze in the code.

Caution 100
#fff6cc

Caution 200
#ffee99

Caution 300
#ffe566

Caution 400
#ffdd33

Caution 500
#ffd400

Caution 600
#ccaa00

Caution 700
#997f00

Caution 800
#665500

Caution 900
#332a00

Caution Alt

This color should only be used if caution and warning are already being used in the same context.

Caution-alt 100
#ffeacc

Caution-alt 200
#ffd699

Caution-alt 300
#ffc166

Caution-alt 400
#ffad33

Caution-alt 500
#ff9800

Caution-alt 600
#cc7a00

Caution-alt 700
#995b00

Caution-alt 800
#663d00

Caution-alt 900
#331e00

Warning

This color should be used to highlight information that is critical to the user.

Warning 100
#ffcccc

Warning 200
#ff9999

Warning 300
#ff6666

Warning 400
#ff3333

Warning 500
#ff0000

Warning 600
#cc0000

Warning 700
#990000

Warning 800
#660000

Warning 900
#330000