Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Background

Easily set the background by using .cd-bg-* color classes

Primary Color

Hex Code: #0054a6

RGB Code: rgb(0, 84, 166)

RGBa Code: rgba(0, 84, 166, 1)

Secondary Color

Hex Code: #58595b

RGB Code: rgb(88, 89, 91)

RGBa Code: rgb(88, 89, 91, 1)

Success Color

Hex Code: #71bf44

RGB Code: rgb(113, 191, 68)

RGBa Code: rgb(113, 191, 68, 1)

Information Color

Hex Code: #00aeef

RGB Code: rgb(0, 174, 239)

RGBa Code: rgb(0, 174, 239, 1)

Warning Color

Hex Code: #fbac18

RGB Code: rgb(251, 172, 24)

RGBa Code: rgb(251, 172, 24, 1)

Danger Color

Hex Code: #ef4723

RGB Code: rgb(239, 71, 35)

RGBa Code: rgb(239, 71, 35, 1)

Light Color

Hex Code: #dcddde

RGB Code: rgb(220, 221, 222)

RGBa Code: rgb(220, 221, 222, 1)

Dark Color

Hex Code: #262626

RGB Code: rgb(38, 38, 38)

RGBa Code: rgb(38, 38, 38, 1)

Text

You can use the .cd-link-* classes to colorize the text.

.cd-text-primary

.cd-text-secondary

.cd-text-success

.cd-text-danger

.cd-text-warning

.cd-text-info

.cd-text-light

.cd-text-dark

.cd-text-body

.cd-text-muted

.cd-text-white

Links

You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state.

Primary link Secondary link Success link Danger link Warning link Info link Light link Dark link

Color palette

Blue Palette

.blue-50 #f5f8fb

.blue-100 #ccdded

.blue-200 #99bbdb

.blue-300 #6698ca

.blue-400 #3376b8

.blue-500 #0054a6

.blue-600 #003f7d

.blue-700 #002a53

.blue-800 #001529

.blue-900 #000811

Cyne Palette

.cyan-50#e5f8ff

.cyan-100#b3eaff

.cyan-200#80dcff

.cyan-300#4dceff

.cyan-400#1ac1ff

.cyan-500#00a7e6

.cyan-600#0082b3

.cyan-700#005d80

.cyan-800#00384d

.cyan-900#00131a

Indigo Palette

.indigo-50 #f9f5fe

.indigo-100 #e0cffc

.indigo-200 #c29ffa

.indigo-300 #a370f7

.indigo-400 #8540f5

.indigo-500 #6610f2

.indigo-600 #4d0cb5

.indigo-700 #330879

.indigo-800 #19043d

.indigo-900 #080016

Purple Palette

.purple-50 #f6eef6

.purple-100 #e4cce5

.purple-200 #d2aad4

.purple-300 #c088c3

.purple-400 #ad66b2

.purple-500 #944d99

.purple-600 #733c77

.purple-700 #522b55

.purple-800 #311a33

.purple-900 #100911

Red Palette

.red-50#fdebe7

.red-100#fac3b8

.red-200#f69c88

.red-300#f37459

.red-400#ef4c29

.red-500#d63310

.red-600#a6270c

.red-700#771c09

.red-800#471105

.red-900#180602

Orange Palette

.orange-50 #fff6ee

.orange-100#fed1aa

.orange-200#febc85

.orange-300#fea75f

.orange-400#fd933a

.orange-500#fd7e14

.orange-600#d56a11

.orange-700#ac560e

.orange-800#84420a

.orange-900#5b2d07

Yellow Palette

.yellow-50#fcfbed

.yellow-100#fefcd3

.yellow-200#fef8a6

.yellow-300#fdf57a

.yellow-400#fdf14d

.yellow-500#fcee21

.yellow-600#bdb319

.yellow-700#7e7711

.yellow-800#3f3c08

.yellow-900#161401

Green Palette

.green-50#f6fcfb

.green-100#d1f0ea

.green-200#a3e1d4

.green-300#76d1bf

.green-400#48c2a9

.green-500#1ab394

.green-600#14866f

.green-700#0d5a4a

.green-800#062d25

.green-900#00110d

Gray Palette

.gray-50#f8f8f8

.gray-100#dedede

.gray-200#bcbdbd

.gray-300#9b9b9d

.gray-400#797a7c

.gray-500#58595b

.gray-600#424344

.gray-700#2c2d2e

.gray-800#161617

.gray-900#000000