Blocks - Colors

Copy any custom block snippet below and paste it on your page to build your website easily.

Changing Primary Color

To change the primary color to a custom color, open component file and replace your custom color like this text-[#your_color_code]

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

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

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.