ALC Colors

The ALC Colors are made up of bold colors, red, yellow, green, orange, blue, purple, and gray.

Each color palette has a number of shades numbered 50 to 900 and a set of accent colors between A100 to A700. The base color is 500. You can see the full ALC Color palette here. The bars below represent the the 100, 500 (base), and 700 of each color in our palette.

#F5D3D5

#FEF9E9

#DBEEDB

#E8F5FB

#FCEBE1

#AE5A84

#BEBEBE

#DD6B71

#FAD56E

#84C584

#7DC6E6

#F29C6C

#5C2D45

#7F7F7F

#D23941

#F8C433

#5AB25A

#4AAFDC

#ED7634

#331926

#606060

#A8262D

#E6AB08

#428D42

#2693C3

#D15713

#0A0507

#414141

#761B20

#AB7F06

#2E632E

#1C6C90

#993F0E

#000000

#232323

Usage

Colors are applied with CSS classes using this pattern: .color-colorName-number (e.g. .color-red-300) by adding -bkg to the end of a class (e.g. .color-red-300-bk) it will apply the color as a background.

Example

The TEXT will be red 500

<span class="color-red-500">The TEXT will be red 500</span>

The background of this span will be red 500

<span class="color-red-500-bkg">The background of this span will be red 500</span>

Palettes

The following palettes represent the basic colors you'll need to get started. Each color palette starts with the base color 500. The 100 color is used as the light accent and 700 for the dark accent. The full palettes are available on the ALC Color palette page.

Primary Red: red-500 #D23941

Primary light: red-100 #F5D3D5

Primary dark: red-700 #A8262D

See full red palette

Primary Red (500)	Red Light (100)	Red Dark (700)
`#D23941`	`#F5D3D5`	`#A8262D`

Primary Yellow: yellow-500 #F8C433

Primary light: yellow-100 #FEF9E9

Primary dark: yellow-700 #E6AB08

See full yellow palette

Primary Yellow (500)	Yellow Light (100)	Yellow Dark (700)
`#F8C433`	`#FEF9E9`	`#E6AB08`

Primary Green: green-500 #5AB25A

Primary light: green-100 #DBEEDB

Primary dark: green-700 #428D42

See full green palette

Primary Green (500)	Green Light (100)	Green Dark (700)
`#5AB25A`	`#DBEEDB`	`#428D42`

Primary Blue: blue-500 #4AAFDC

Primary light: blue-100 #E8F5FB

Primary dark: blue-700 #2693C3

See full blue palette

Primary Blue (500)	Blue Light (100)	Blue Dark (700)
`#4AAFDC`	`#E8F5FB`	`#2693C3`

Primary Orange: orange-500 #ED7634

Primary light: orange-100 #FCEBE1

Primary dark: orange-700 #D15713

See full orange palette

Primary Orange (500)	Orange Light (100)	Orange Dark (700)
`#ED7634`	`#FCEBE1`	`#D15713`

Primary Purple: purple-500 #331926

Primary light: purple-100 #AE5A84

Primary dark: purple-700 #0A0507

See full purple palette

Primary Purple (500)	Purple Light (100)	Purple Dark (700)
`#331926`	`#AE5A84`	`#0A0507`

Primary Gray: gray-500 #606060

Primary light: gray-100 #BEBEBE

Primary dark: gray-700 #414141

See full gray palette

Primary Gray (500)	Gray Light (100)	Gray Dark (700)
`#606060`	`#BEBEBE`	`#414141`

Colors