Colors

Use our custom color options to add color to your backgrounds, text or to change the theme color scheme.

Theme Colors

To change the theme color, add color CSS file you wish to use inside the <head> tag, right after style.css link, in all your HTML pages. Available color options: aqua.css, green.css, leaf.css, navy.css, orange.css, pink.css, purple.css, red.css, violet.css, yellow.css, fuchsia.css, sky.css, grape.css.

Changing Primary Color

To change the primary color to a custom color, open src/assets/scss/user-variables.scss and assign your custom color value to $primary and recompile.

This quick video demonstrates changing the primary color using gulp.

Background Colors

.bg-yellow
.bg-pale-yellow
.bg-orange
.bg-pale-orange
.bg-red
.bg-pale-red
.bg-pink
.bg-pale-pink
.bg-violet
.bg-pale-violet
.bg-purple
.bg-pale-purple
.bg-blue
.bg-pale-blue
.bg-aqua
.bg-pale-aqua
.bg-green
.bg-pale-green
.bg-leaf
.bg-pale-leaf
.bg-ash
.bg-pale-ash
.bg-navy
.bg-pale-navy
.bg-fuchsia
.bg-pale-fuchsia
.bg-sky
.bg-pale-sky
.bg-grape
.bg-pale-grape
.gradient-1
.gradient-2
.gradient-3
.gradient-4
.gradient-5
.gradient-6
.gradient-7

Text Colors

.text-yellow

.text-orange

.text-red

.text-pink

.text-fuchsia

.text-violet

.text-purple

.text-blue

.text-aqua

.text-sky

.text-green

.text-leaf

.text-ash

.text-navy

.text-grape

.text-primary

.text-muted

.text-white

.gradient-1


.gradient-2


.gradient-3

.gradient-4


.gradient-5

.gradient-6


.gradient-7

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox