Colors

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

Changing Primary Color

To change the primary color to a custom color, open src/input.css OR dist/your_file.html and assign your custom color like this text-[#your_color_code] and recompile.

//src/input.css OR dist/your_file.html
                      text-[#3f78e0]

Background Colors

.bg-[#fab758]
.bg-[#fef3e4]
.bg-[#fff8ee]
.bg-[#f78b77]
.bg-[#feece9]
.bg-[#fef4f2]
.bg-[#e2626b]
.bg-[#fae6e7]
.bg-[#fcf0f1]
.bg-[#d16b86]
.bg-[#f8e7ec]
.bg-[#fbf1f4]
.bg-[#a07cc5]
.bg-[#f0eaf6]
.bg-[#f6f3f9]
.bg-[#747ed1]
.bg-[#e9eaf8]
.bg-[#f2f3fb]
.bg-[#3f78e0]
.bg-[#e0e9fa]
.bg-[#edf2fc]
.bg-[#54a8c7]
.bg-[#e4f1f6]
.bg-[#eff7fa]
.bg-[#45c4a0]
.bg-[#e1f6f0]
.bg-[#edf9f6]
.bg-[#7cb798]
.bg-[#eaf3ef]
.bg-[#f3f8f5]
.bg-[#9499a3]
.bg-[#a4aec633]
.bg-[#f5f5f6]
.bg-[#343f52]
.bg-[#dfe0e3]
.bg-[#ecedef]
.bg-[#e668b3]
.bg-[#fbe7f3]
.bg-[#fdf1f8]
.bg-[#5eb9f0]
.bg-[#e5f4fd]
.bg-[#f0f8fe]
.bg-[#605dba]
.bg-[#e6e5f4]
.bg-[#f0f0f8]
.gradient-1
.gradient-2
.gradient-3
.gradient-4
.gradient-5
.gradient-6
.gradient-7
.gradient-8
<div class="bg-[#fab758]"></div>
<div class="bg-[#fef3e4]"></div>
<div class="bg-[#fff8ee]"></div>
  
<div class="bg-[#f78b77]"></div>
<div class="bg-[#feece9]"></div>
<div class="bg-[#fef4f2]"></div>
  
<div class="bg-[#e2626b]"></div>
<div class="bg-[#fae6e7]"></div>
<div class="bg-[#fcf0f1]"></div>
  
<div class="bg-[#d16b86]"></div>
<div class="bg-[#f8e7ec]"></div>
<div class="bg-[#fbf1f4]"></div>
  
<div class="bg-[#a07cc5]"></div>
<div class="bg-[#f0eaf6]"></div>
<div class="bg-[#f6f3f9]"></div>
  
<div class="bg-[#747ed1]"></div>
<div class="bg-[#e9eaf8]"></div>
<div class="bg-[#f2f3fb]"></div>
  
<div class="bg-[#3f78e0]"></div>
<div class="bg-[#e0e9fa]"></div>
<div class="bg-[#edf2fc]"></div>
  
<div class="bg-[#54a8c7]"></div>
<div class="bg-[#e4f1f6]"></div>
<div class="bg-[#eff7fa]"></div>
  
<div class="bg-[#45c4a0]"></div>
<div class="bg-[#e1f6f0]"></div>
<div class="bg-[#edf9f6]"></div>
  
<div class="bg-[#7cb798]"></div>
<div class="bg-[#eaf3ef]"></div>
<div class="bg-[#f3f8f5]"></div>
  
<div class="bg-[#9499a3]"></div>
<div class="bg-[#a4aec633]"></div>
<div class="bg-[#f5f5f6]"></div>
  
<div class="bg-[#343f52]"></div>
<div class="bg-[#dfe0e3]"></div>
<div class="bg-[#ecedef]"></div>

<div class="bg-[#e668b3]"></div>
<div class="bg-[#fbe7f3]"></div>
<div class="bg-[#fdf1f8]"></div>

<div class="bg-[#5eb9f0]"></div>
<div class="bg-[#e5f4fd]"></div>
<div class="bg-[#f0f8fe]"></div>

<div class="bg-[#605dba]"></div>
<div class="bg-[#e6e5f4]"></div>
<div class="bg-[#f0f0f8]"></div>

<div class="gradient-1"></div>
<div class="gradient-2"></div>
<div class="gradient-3"></div>
<div class="gradient-4"></div>
<div class="gradient-5"></div>
<div class="gradient-6"></div>
<div class="gradient-7"></div>
<div class="gradient-8"></div>

Text Colors

.text-[#fab758]

.text-[#f78b77]

.text-[#e2626b]

.text-[#d16b86]

.text-[#e668b3]

.text-[#a07cc5]

.text-[#747ed1]

.text-[#3f78e0]

.text-[#54a8c7]

.text-[#5eb9f0]

.text-[#45c4a0]

.text-[#7cb798]

.text-[#9499a3]

.text-[#343f52]

.text-[#605dba]

.text-[#3f78e0]

.text-[#aab0bc]

.text-white

.gradient-1


.gradient-2


.gradient-3

.gradient-4


.gradient-5


.gradient-6

.gradient-7


.gradient-8

<span class="text-[#fab758]"></span>
<span class="text-[#f78b77]"></span>
<span class="text-[#e2626b]"></span>
<span class="text-[#d16b86]"></span>
<span class="text-[#a07cc5]"></span>
<span class="text-[#747ed1]"></span>
<span class="text-[#3f78e0]"></span>
<span class="text-[#54a8c7]"></span>
<span class="text-[#45c4a0]"></span>
<span class="text-[#7cb798]"></span>
<span class="text-[#9499a3]"></span>
<span class="text-[#343f52]"></span>
<span class="text-[#e668b3]"></span>
<span class="text-[#5eb9f0]"></span>
<span class="text-[#605dba]"></span>

<span class="text-[#3f78e0]"></span>
<span class="text-[#aab0bc]"></span>
<span class="text-white"></span>

<span class="text-gradient gradient-1"></span>
<span class="text-gradient gradient-2"></span>
<span class="text-gradient gradient-3"></span>
<span class="text-gradient gradient-4"></span>
<span class="text-gradient gradient-5"></span>
<span class="text-gradient gradient-6"></span>
<span class="text-gradient gradient-7"></span>

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
image