Color Guide

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Primary Color Palette

$color-regal-blue

#00416a
rgb(0,65,106)

$color-bahama-blue

#006098
rgb(0,96,152)

$color-curious-blue

#288dc1
rgb(40,141,193)

<div class="bg-regal-blue"></div>
<div class="bg-bahama-blue"></div>
<div class="bg-curious-blue"></div>
$color-regal-blue: #00416A; // rgb(0,65,106)
$color-bahama-blue: #006098; // rgb(0,96,152)
$color-curious-blue: #288dc1; // rgb(40,141,193)

.bg-regal-blue {
    background-color: $color-regal-blue !important;
}
.bg-bahama-blue {
    background-color: $color-bahama-blue !important;
}
.bg-curious-blue {
    background-color: $color-curious-blue !important;
}

Secondary Color Palette

$color-luxor-gold

#a89031
rgb(168,144,49)

$color-silver-rust

#c7bbb6
rgb(199,187,182)

<div class="bg-luxor-gold"></div>
<div class="bg-silver-rust"></div>
$color-luxor-gold: #a89031; // rgb(168,144,49)
$color-silver-rust: #c7bbb6; // rgb(199,187,182)

.bg-luxor-gold {
    background-color: $color-luxor-gold !important;
}
.bg-silver-rust {
    background-color: $color-silver-rust !important;
}

Tertiary Color Palette

$color-apple-green

#47a141
rgb(71,161,65)

$color-flush-orange

#ff8300
rgb(255,131,0)

<div class="bg-apple-green"></div>
<div class="bg-flush-orange"></div>
$color-apple-green: #47a141; // rgb(71,161,65)
$color-flush-orange: #ff8300; // rgb(255,131,0)

.bg-apple-green {
    background-color: $color-apple-green !important;
}
.bg-flush-orange {
    background-color: $color-flush-orange !important;
}

SDG's Color Palette

$color-sdg-6

#00aed9
rgb(0,174,217)

$color-sdg-7

#fdb713
rgb(253,183,19)

$color-sdg-9

#f36d25
rgb(243,109,37)

$color-sdg-11

#f99d26
rgb(249,157,38)

$color-sdg-12

#cf8d2a
rgb(207,141,42)

<div class="bg-sdg-6"></div>
<div class="bg-sdg-7"></div>
<div class="bg-sdg-9"></div>
<div class="bg-sdg-11"></div>
<div class="bg-sdg-12"></div>
$color-sdg-6: #00aed9; //rgba(0,174,217)
$color-sdg-7: #fdb713; //rgba(253,183,19)
$color-sdg-9: #f36d25; //rgba(243,109,37)
$color-sdg-11: #f99d26; //rgba(249,157,38)
$color-sdg-12: #cf8d2a; //rgba(207,141,42)

.bg-sdg-6  {
    background: $color-sdg-6;
}
.bg-sdg-7 {
    background: $color-sdg-7;
}
.bg-sdg-9 {
    background: $color-sdg-9;
}
.bg-sdg-11 {
    background: $color-sdg-11;
}
.bg-sdg-12 {
    background: $color-sdg-12;
}

Gradients

.bg-gradient-blue

#00416a, #006098

.bg-gradient-sdg-6

#126f87, #00aed9

.bg-gradient-sdg-7

#b18802, #fdb713

.bg-gradient-sdg-9

#ca4102, #f36d25

.bg-gradient-sdg-11

#ca7002, #f99d26

.bg-gradient-sdg-12

#b18802, #cf8d2a

<div class="bg-gradient-blue"></div>
<div class="bg-gradient-sdg-6"></div>
<div class="bg-gradient-sdg-7"></div>
<div class="bg-gradient-sdg-9"></div>
<div class="bg-gradient-sdg-11"></div>
<div class="bg-gradient-sdg-12"></div>
<div class="bg-gradient-sdg-6"></div>
.bg-gradient-blue {
    background: -moz-linear-gradient(125deg, rgba(0,65,106, 1) 0%, rgba(0,96,152, 1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(0,65,106, 1)), color-stop(100%, rgba(0,96,152, 1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(125deg, rgba(0,65,106, 1) 0%, rgba(0,96,152, 1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(125deg, rgba(0,65,106, 1) 0%, rgba(0,96,152, 1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(125deg, rgba(0,65,106, 1) 0%, rgba(0,96,152, 1) 100%); /* ie10+ */
    background: linear-gradient(125deg, rgba(0,65,106, 1) 0%, rgba(0,96,152, 1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00416a', endColorstr='#006098', GradientType=1); /* ie6-9 */
}
.bg-gradient-sdg-6 {
    background: -moz-linear-gradient(125deg, rgba(18, 111, 135, 1) 0%, rgba(0, 174, 217, 1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(18, 111, 135, 1)), color-stop(100%, rgba(0, 174, 217, 1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(125deg, rgba(18, 111, 135, 1) 0%, rgba(0, 174, 217, 1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(125deg, rgba(18, 111, 135, 1) 0%, rgba(0, 174, 217, 1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(125deg, rgba(18, 111, 135, 1) 0%, rgba(0, 174, 217, 1) 100%); /* ie10+ */
    background: linear-gradient(125deg, rgba(18, 111, 135, 1) 0%, rgba(0, 174, 217, 1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#126f87', endColorstr='#00aed9', GradientType=1); /* ie6-9 */
}
.bg-gradient-sdg-7 {
    background: -moz-linear-gradient(125deg, rgba(177, 136, 2, 1) 0%, rgba(253, 183, 19, 1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(177, 136, 2, 1)), color-stop(100%, rgba(253, 183, 19, 1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(125deg, rgba(177, 136, 2, 1) 0%, rgba(253, 183, 19, 1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(125deg, rgba(177, 136, 2, 1) 0%, rgba(253, 183, 19, 1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(125deg, rgba(177, 136, 2, 1) 0%, rgba(253, 183, 19, 1) 100%); /* ie10+ */
    background: linear-gradient(125deg, rgba(177, 136, 2, 1) 0%, rgba(253, 183, 19, 1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b18802', endColorstr='#fdb713', GradientType=1); /* ie6-9 */
}
.bg-gradient-sdg-9 {
    background: -moz-linear-gradient(125deg, rgba(202, 65, 2, 1) 0%, rgba(243, 109, 37, 1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(202, 65, 2, 1)), color-stop(100%, rgba(243, 109, 37, 1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(125deg, rgba(202, 65, 2, 1) 0%, rgba(243, 109, 37, 1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(125deg, rgba(202, 65, 2, 1) 0%, rgba(243, 109, 37, 1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(125deg, rgba(202, 65, 2, 1) 0%, rgba(243, 109, 37, 11) 100%); /* ie10+ */
    background: linear-gradient(125deg, rgba(202, 65, 2, 1) 0%, rgba(243, 109, 37, 1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ca4102', endColorstr='#f36d25', GradientType=1); /* ie6-9 */
}
.bg-gradient-sdg-11 {
    background: -moz-linear-gradient(125deg, rgba(202, 112, 2, 1) 0%, rgba(249, 157, 38, 1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(202, 112, 2, 1)), color-stop(100%, rgba(249, 157, 38, 1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(125deg, rgba(202, 112, 2, 1) 0%, rgba(249, 157, 38, 1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(125deg, rgba(202, 112, 2, 1) 0%, rgba(249, 157, 38, 1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(125deg, rgba(202, 112, 2, 1) 0%, rgba(249, 157, 38, 1) 100%); /* ie10+ */
    background: linear-gradient(125deg, rgba(202, 112, 2, 1) 0%, rgba(249, 157, 38, 1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ca7002', endColorstr='#f99d26', GradientType=1); /* ie6-9 */
}
.bg-gradient-sdg-12 {
    background: -moz-linear-gradient(125deg, rgba(123, 89, 30, 1) 0%, rgba(207, 141, 42, 1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(123, 89, 30, 1)), color-stop(100%, rgba(207, 141, 42, 1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(125deg, rgba(123, 89, 30, 1) 0%, rgba(207, 141, 42, 1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(125deg, rgba(123, 89, 30, 1) 0%, rgba(207, 141, 42, 1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(125deg, rgba(123, 89, 30, 1) 0%, rgba(207, 141, 42, 1) 100%); /* ie10+ */
    background: linear-gradient(125deg, rgba(123, 89, 30, 1) 0%, rgba(207, 141, 42, 1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b18802', endColorstr='#cf8d2a', GradientType=1); /* ie6-9 */
}