Colors

Colors

A set of colors used to represent the Chocolatey brand in web and print.

Reference Bootstrap

Choco-theme respects all Bootstrap Color documentation

Colors

Role	Description
Primary	This color is used primary actions or elements that reflect the Chocolatey brand.
Secondary	This color is used sparingly, and only when other colors do not reflect the content.
Success	This color is used to report successful actions or enforce good practices. This color is also used as a general accent color.
Danger	This color is used to inform users of possibly destructive or breaking information. This color is also used to inform users of a failed action.
Warning	This color is used for content that is important for the user to read. This color is more elevated than `info`, but less eleveated than `danger`.
Info	This color is used to signifying something is in progress or to note specific but not urgent information.
Pink	This color is used as a general accent color.
Orange	This color is used as a general accent color.
Purple	This color is used as a general accent color.
Light	This color is mostly used on colored backgrounds and should be used sparingly since it does not change based on theme.
Dark	This color is mostly used on colored backgrounds and should be used sparingly since it does not change based on theme.
Body Background	This color is used as the main body background.
Body Background Secondary	This color is used mostly for slight contrast with the body background and the card Component.
Body Background Contrast	This color is used mostly on buttons that appear on a background that contrasts with the body background.
Body Background Tertiary	This color is used mostly on cancel buttons and will change based on the theme.

All Colors

$blue

#5c9fd8

$blue-50

$blue-100

$blue-150

$blue-200

$blue-250

$blue-300

$blue-350

$blue-400

$blue-450

$blue-500

$blue-550

$blue-600

$blue-650

$blue-700

$blue-750

$blue-800

$blue-850

$blue-900

$blue-950

$purple

#6f42c1

$purple-50

$purple-100

$purple-150

$purple-200

$purple-250

$purple-300

$purple-350

$purple-400

$purple-450

$purple-500

$purple-550

$purple-600

$purple-650

$purple-700

$purple-750

$purple-800

$purple-850

$purple-900

$purple-950

$pink

#d63384

$pink-50

$pink-100

$pink-150

$pink-200

$pink-250

$pink-300

$pink-350

$pink-400

$pink-450

$pink-500

$pink-550

$pink-600

$pink-650

$pink-700

$pink-750

$pink-800

$pink-850

$pink-900

$pink-950

$red

#f4516c

$red-50

$red-100

$red-150

$red-200

$red-250

$red-300

$red-350

$red-400

$red-450

$red-500

$red-550

$red-600

$red-650

$red-700

$red-750

$red-800

$red-850

$red-900

$red-950

$orange

#fd7e14

$orange-50

$orange-100

$orange-150

$orange-200

$orange-250

$orange-300

$orange-350

$orange-400

$orange-450

$orange-500

$orange-550

$orange-600

$orange-650

$orange-700

$orange-750

$orange-800

$orange-850

$orange-900

$orange-950

$yellow

#ffc107

$yellow-50

$yellow-100

$yellow-150

$yellow-200

$yellow-250

$yellow-300

$yellow-350

$yellow-400

$yellow-450

$yellow-500

$yellow-550

$yellow-600

$yellow-650

$yellow-700

$yellow-750

$yellow-800

$yellow-850

$yellow-900

$yellow-950

$green

#36bc98

$green-50

$green-100

$green-150

$green-200

$green-250

$green-300

$green-350

$green-400

$green-450

$green-500

$green-550

$green-600

$green-650

$green-700

$green-750

$green-800

$green-850

$green-900

$green-950