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.

#eeeeee
#9e9e9e
#3f51b5
#00bcd4
#4caf50
#ff9800
#f44336
#9c27b0

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
  • a400 / #d50000
  • a300 / #ff1744
  • a200 / #ff5252
  • a100 / #ff8a80
  • 900 / #b71c1c
  • 800 / #c62828
  • 700 / #d32f2f
  • 600 / #e53935
  • 500 / #f44336
  • 400 / #ef5350
  • 300 / #e57373
  • 200 / #ef9a9a
  • 100 / #ffcdd2
  • 50 / #ffebee
pink
  • a400 / #c51162
  • a300 / #f50057
  • a200 / #ff4081
  • a100 / #ff80ab
  • 900 / #880e4f
  • 800 / #ad1457
  • 700 / #c2185b
  • 600 / #d81b60
  • 500 / #e91e63
  • 400 / #ec407a
  • 300 / #f06292
  • 200 / #f48fb1
  • 100 / #f8bbd0
  • 50 / #fce4ec
purple
  • a400 / #aa00ff
  • a300 / #d500f9
  • a200 / #e040fb
  • a100 / #ea80fc
  • 900 / #4a148c
  • 800 / #6a1b9a
  • 700 / #7b1fa2
  • 600 / #8e24aa
  • 500 / #9c27b0
  • 400 / #ab47bc
  • 300 / #ba68c8
  • 200 / #ce93d8
  • 100 / #e1bee7
  • 50 / #f3e5f5
deep-purple
  • a400 / #6200ea
  • a300 / #651fff
  • a200 / #7c4dff
  • a100 / #b388ff
  • 900 / #311b92
  • 800 / #4527a0
  • 700 / #512da8
  • 600 / #5e35b1
  • 500 / #673ab7
  • 400 / #7e57c2
  • 300 / #9575cd
  • 200 / #b39ddb
  • 100 / #d1c4e9
  • 50 / #ede7f6
indigo
  • a400 / #304ffe
  • a300 / #3d5afe
  • a200 / #536dfe
  • a100 / #8c9eff
  • 900 / #1a237e
  • 800 / #283593
  • 700 / #303f9f
  • 600 / #3949ab
  • 500 / #3f51b5
  • 400 / #5c6bc0
  • 300 / #7986cb
  • 200 / #9fa8da
  • 100 / #c5cae9
  • 50 / #e8eaf6
blue
  • a400 / #2962ff
  • a300 / #2979ff
  • a200 / #448aff
  • a100 / #82b1ff
  • 900 / #0d47a1
  • 800 / #1565c0
  • 700 / #1976d2
  • 600 / #1e88e5
  • 500 / #2196f3
  • 400 / #42a5f5
  • 300 / #64b5f6
  • 200 / #90caf9
  • 100 / #bbdefb
  • 50 / #e3f2fd
light-blue
  • a400 / #0091ea
  • a300 / #00b0ff
  • a200 / #40c4ff
  • a100 / #80d8ff
  • 900 / #01579b
  • 800 / #0277bd
  • 700 / #0288d1
  • 600 / #039be5
  • 500 / #03a9f4
  • 400 / #29b6f6
  • 300 / #4fc3f7
  • 200 / #81d4fa
  • 100 / #b3e5fc
  • 50 / #e1f5fe
cyan
  • a400 / #00b8d4
  • a300 / #00e5ff
  • a200 / #18ffff
  • a100 / #84ffff
  • 900 / #006064
  • 800 / #00838f
  • 700 / #0097a7
  • 600 / #00acc1
  • 500 / #00bcd4
  • 400 / #26c6da
  • 300 / #4dd0e1
  • 200 / #80deea
  • 100 / #b2ebf2
  • 50 / #e0f7fa
teal
  • a400 / #00bfa5
  • a300 / #1de9b6
  • a200 / #64ffda
  • a100 / #a7ffeb
  • 900 / #004d40
  • 800 / #00695c
  • 700 / #00796b
  • 600 / #00897b
  • 500 / #009688
  • 400 / #26a69a
  • 300 / #4db6ac
  • 200 / #80cbc4
  • 100 / #b2dfdb
  • 50 / #e0f2f1
green
  • a400 / #00c853
  • a300 / #00e676
  • a200 / #69f0ae
  • a100 / #b9f6ca
  • 900 / #1b5e20
  • 800 / #2e7d32
  • 700 / #388e3c
  • 600 / #43a047
  • 500 / #4caf50
  • 400 / #66bb6a
  • 300 / #81c784
  • 200 / #a5d6a7
  • 100 / #c8e6c9
  • 50 / #e8f5e9
light-green
  • a400 / #64dd17
  • a300 / #76ff03
  • a200 / #b2ff59
  • a100 / #ccff90
  • 900 / #33691e
  • 800 / #558b2f
  • 700 / #689f38
  • 600 / #7cb342
  • 500 / #8bc34a
  • 400 / #9ccc65
  • 300 / #aed581
  • 200 / #c5e1a5
  • 100 / #dcedc8
  • 50 / #f1f8e9
lime
  • a400 / #aeea00
  • a300 / #c6ff00
  • a200 / #eeff41
  • a100 / #f4ff81
  • 900 / #827717
  • 800 / #9e9d24
  • 700 / #afb42b
  • 600 / #c0ca33
  • 500 / #cddc39
  • 400 / #d4e157
  • 300 / #dce775
  • 200 / #e6ee9c
  • 100 / #f0f4c3
  • 50 / #f9fbe7
yellow
  • a400 / #ffd600
  • a300 / #ffea00
  • a200 / #ffff00
  • a100 / #ffff8d
  • 900 / #f57f17
  • 800 / #f9a825
  • 700 / #fbc02d
  • 600 / #fdd835
  • 500 / #ffeb3b
  • 400 / #ffee58
  • 300 / #fff176
  • 200 / #fff59d
  • 100 / #fff9c4
  • 50 / #fffde7
amber
  • a400 / #ffab00
  • a300 / #ffc400
  • a200 / #ffd740
  • a100 / #ffe57f
  • 900 / #ff6f00
  • 800 / #ff8f00
  • 700 / #ffa000
  • 600 / #ffb300
  • 500 / #ffc107
  • 400 / #ffca28
  • 300 / #ffd54f
  • 200 / #ffe082
  • 100 / #ffecb3
  • 50 / #fff8e1
orange
  • a400 / #ff6d00
  • a300 / #ff9100
  • a200 / #ffab40
  • a100 / #ffd180
  • 900 / #e65100
  • 800 / #ef6c00
  • 700 / #f57c00
  • 600 / #fb8c00
  • 500 / #ff9800
  • 400 / #ffa726
  • 300 / #ffb74d
  • 200 / #ffcc80
  • 100 / #ffe0b2
  • 50 / #fff3e0
deep-orange
  • a400 / #dd2c00
  • a300 / #ff3d00
  • a200 / #ff6e40
  • a100 / #ff9e80
  • 900 / #bf360c
  • 800 / #d84315
  • 700 / #e64a19
  • 600 / #f4511e
  • 500 / #ff5722
  • 400 / #ff7043
  • 300 / #ff8a65
  • 200 / #ffab91
  • 100 / #ffccbc
  • 50 / #fbe9e7
brown
  • 900 / #3e2723
  • 800 / #4e342e
  • 700 / #5d4037
  • 600 / #6d4c41
  • 500 / #795548
  • 400 / #8d6e63
  • 300 / #a1887f
  • 200 / #bcaaa4
  • 100 / #d7ccc8
  • 50 / #efebe9
grey
  • 900 / #212121
  • 800 / #424242
  • 700 / #616161
  • 600 / #757575
  • 500 / #9e9e9e
  • 400 / #bdbdbd
  • 300 / #e0e0e0
  • 200 / #eeeeee
  • 100 / #f5f5f5
  • 50 / #fafafa
blue-grey
  • 900 / #263238
  • 800 / #37474f
  • 700 / #455a64
  • 600 / #546e7a
  • 500 / #607d8b
  • 400 / #78909c
  • 300 / #90a4ae
  • 200 / #b0bec5
  • 100 / #cfd8dc
  • 50 / #eceff1

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

#3949ab
600

Base color

#3f51b5
500

Hover color

#5c6bc0
400

Background opt.

#c5cae9
100

Active color

#e53935
600

Base color

#f44336
500

Hover color

#ef5350
400

Background opt.

#ffcdd2
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

#424242

Subtitle color

#616161

Text color

#757575

Prompt color

#9e9e9e

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

#e0e0e0