1. Home
  2. Basic UI

Colors

Style

Base Color Palette

The dashboard will synergize with the colour selection made by the user and appropriately amend. Similarly, all other elements will sync according to the base colours.

#e4eaec
#526069
#3e8ef7
#0bb2d4
#17b3a3
#eb6709
#ff4c52
#9463f7

Color Palette

This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors.
They've been designed to work harmoniously with each other.

The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for web
project. We suggests using the 500 colors as the primary colors in your project and the other colors as accents colors.

red
  • 800 / #e62020
  • 700 / #f2353c
  • 600 / #ff4c52
  • 500 / #ff666b
  • 400 / #ff8589
  • 300 / #ffbfc1
  • 200 / #ffbfc1
  • 100 / #ffdbdc
pink
  • 800 / #e6155e
  • 700 / #eb2f71
  • 600 / #f74584
  • 500 / #ff5e97
  • 400 / #ff7daa
  • 300 / #ff9ec0
  • 200 / #ffbad2
  • 100 / #ffd9e6
purple
  • 800 / #7231f5
  • 700 / #8349f5
  • 600 / #9463f7
  • 500 / #a57afa
  • 400 / #b693fa
  • 300 / #c8aefc
  • 200 / #d9c7fc
  • 100 / #eae1fc
indigo
  • 800 / #364ff5
  • 700 / #4d64fa
  • 600 / #667afa
  • 500 / #7d8efa
  • 400 / #96a3fa
  • 300 / #afb9fa
  • 200 / #c7cffc
  • 100 / #e1e4fc
blue
  • 800 / #0b69e3
  • 700 / #247cf0
  • 600 / #3e8ef7
  • 500 / #589ffc
  • 400 / #79b2fc
  • 300 / #99c5ff
  • 200 / #b8d7ff
  • 100 / #d9e9ff
cyan
  • 800 / #007d96
  • 700 / #0099b8
  • 600 / #0bb2d4
  • 500 / #28c0de
  • 400 / #54cbe3
  • 300 / #77d9ed
  • 200 / #9de6f5
  • 100 / #c2f5ff
teal
  • 800 / #008577
  • 700 / #089e8f
  • 600 / #17b3a3
  • 500 / #28c7b7
  • 400 / #45d6c8
  • 300 / #6be3d7
  • 200 / #92f0e6
  • 100 / #c3f7f2
green
  • 800 / #008c4d
  • 700 / #05a85c
  • 600 / #11c26d
  • 500 / #28d17c
  • 400 / #49de94
  • 300 / #72e8ab
  • 200 / #99f2c2
  • 100 / #c2fadc
light-green
  • 800 / #4a7800
  • 700 / #5a9101
  • 600 / #6da611
  • 500 / #7eb524
  • 400 / #94cc39
  • 300 / #add966
  • 200 / #c3e887
  • 100 / #dcf7b0
yellow
  • 800 / #faa700
  • 700 / #fcb900
  • 600 / #ffcd17
  • 500 / #ffdc2e
  • 400 / #ffe54f
  • 300 / #ffed78
  • 200 / #fff39c
  • 100 / #fff6b5
orange
  • 800 / #b53f00
  • 700 / #de4e00
  • 600 / #eb6709
  • 500 / #f57d1b
  • 400 / #fa983c
  • 300 / #fab06b
  • 200 / #ffc894
  • 100 / #ffe1c4
brown
  • 800 / #6b534c
  • 700 / #82675f
  • 600 / #997b71
  • 500 / #ab8c82
  • 400 / #bda299
  • 300 / #cfb8b0
  • 200 / #e0cdc5
  • 100 / #f5e2da
grey
  • 800 / #424242
  • 700 / #616161
  • 600 / #757575
  • 500 / #9e9e9e
  • 400 / #bdbdbd
  • 300 / #e0e0e0
  • 200 / #eeeeee
  • 100 / #fafafa
blue-grey
  • 800 / #263238
  • 700 / #37474f
  • 600 / #526069
  • 500 / #76838f
  • 400 / #a3afb7
  • 300 / #ccd5db
  • 200 / #e4eaec
  • 100 / #f3f7f9

Color Application

Choose Your Palette

Limit your selection of colors by choosing three color hues from the primary palette and one accent color from the secondary palette. The accent may or may not need fallback options.

Active color

#247cf0
700

Base color

#3e8ef7
600

Hover color

#589ffc
500

Background opt.

#d9e9ff
100

Active color

#f2353c
700

Base color

#ff4c52
600

Hover color

#ff666b
500

Background opt.

#ffdbdc
100

Text Color

To convey a hierarchy of information, you can use different shades for text. The standard content text color is #79838B.

Title color

#37474f

Subtitle color

#526069

Text color

#76838f

Prompt color

#a3afb7

Use Alpha For Icons, And Dividers

Icons and dividers, also benefit from having an alpha value of black instead of a solid color, to make sure the color below.

Grey Darkest

Normal: 40%

Hover: 60%

Active: 100%

Normal: 60%

Hover: 80%

Active: 100%

Gray Base
Dividers 10%

Border Color

Border color should use the primary #E6E8EA color, which should be the main color of your project.

Border color

#e4eaec