...
Machi

machidesign@gmail.com

  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
#62a8ea
#57c7d4
#3aa99e
#f2a654
#f96868
#926dde

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 / #d6494b
  • 700 / #e9595b
  • 600 / #f96868
  • 500 / #fa7a7a
  • 400 / #fa9898
  • 300 / #fab4b4
  • 200 / #fad3d3
  • 100 / #ffeaea
pink
  • 800 / #e53b75
  • 700 / #f44c87
  • 600 / #f96197
  • 500 / #f978a6
  • 400 / #fb8db4
  • 300 / #fba9c6
  • 200 / #ffccde
  • 100 / #fce4ec
purple
  • 800 / #6d45bc
  • 700 / #7c51d1
  • 600 / #926dde
  • 500 / #a58add
  • 400 / #bba7e4
  • 300 / #d2c5ec
  • 200 / #e3dbf4
  • 100 / #f6f2ff
indigo
  • 800 / #465bd4
  • 700 / #5166d6
  • 600 / #677ae4
  • 500 / #8897ec
  • 400 / #9daaf3
  • 300 / #bcc5f4
  • 200 / #dadef5
  • 100 / #edeff9
blue
  • 800 / #3583ca
  • 700 / #4e97d9
  • 600 / #62a8ea
  • 500 / #89bceb
  • 400 / #a2caee
  • 300 / #bcd8f1
  • 200 / #d5e4f1
  • 100 / #e8f1f8
cyan
  • 800 / #37a9b7
  • 700 / #47b8c6
  • 600 / #57c7d4
  • 500 / #77d6e1
  • 400 / #9ae1e9
  • 300 / #baeaef
  • 200 / #d3eff2
  • 100 / #ecf9fa
teal
  • 800 / #178d81
  • 700 / #269b8f
  • 600 / #3aa99e
  • 500 / #56bfb5
  • 400 / #79d1c9
  • 300 / #99e1da
  • 200 / #cdf4f1
  • 100 / #ecfdfc
green
  • 800 / #279566
  • 700 / #36ab7a
  • 600 / #46be8a
  • 500 / #5cd29d
  • 400 / #7dd3ae
  • 300 / #9fe5c5
  • 200 / #bfedd8
  • 100 / #e7faf2
light-green
  • 800 / #70a532
  • 700 / #83b944
  • 600 / #9ece67
  • 500 / #acd57c
  • 400 / #bad896
  • 300 / #cadfb1
  • 200 / #e0ecd1
  • 100 / #f1f7ea
yellow
  • 800 / #fbc02d
  • 700 / #f9cd48
  • 600 / #f7da64
  • 500 / #f7e083
  • 400 / #f8e59b
  • 300 / #f6e7a9
  • 200 / #f9eec1
  • 100 / #fffae7
orange
  • 800 / #e98f2e
  • 700 / #ec9940
  • 600 / #f2a654
  • 500 / #f4b066
  • 400 / #f6be80
  • 300 / #fbce9d
  • 200 / #ffddb9
  • 100 / #fff3e6
brown
  • 800 / #715146
  • 700 / #7d5b4f
  • 600 / #8d6658
  • 500 / #a17768
  • 400 / #b98e7e
  • 300 / #d3aa9c
  • 200 / #e2bdaf
  • 100 / #fae6df
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

#4e97d9
700

Base color

#62a8ea
600

Hover color

#89bceb
500

Background opt.

#e8f1f8
100

Active color

#e9595b
700

Base color

#f96868
600

Hover color

#fa7a7a
500

Background opt.

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