When choosing colors, it is not only important to use the same color palette as used in all the other files, but also to ensure the colors are used in the correct manner (i.e. Accent Colors). 

The usage of the same color palette allows for the Lectron brand to be recognized on a constant basis by all clients which travel to the website.

Primary Palette

Our Primary Palette colors are those of which will take up a majority of the website. The reason these darker, more navy blue, colors have been chosen is to create a feeling of calmness. Essentially, the goal is to not overwhelm the client with the bright, eye-straining colors but rather a palette of welcoming colors.

The following colors are apart of our main color palette:

#0C0C0D: Main Black Background – Used as a way for buttons to “pop”

#18181A: Complementary Background – Used to create a layering effect. Allows for the client to notice a continuation of the page.

#6D7680: Grayed Background – Used when black color might conflict with other colors around

#F9FAFC: White text color

#E6E7EC: White link hover color

Secondary Palette

The usage of the Secondary Palette is to add small details to the website as a whole. The addition of details will allow for the site to have a pop of vibrancy while still remaining in a non-overbearing state.

The following colors are apart of our secondary color palette:

#E3446C: Red Basic shapes, and background sections. Allows for minimalist designs to be present amongst the information.

#FFAE11: Yellow Add some color variations in text, allow information to stand out from the other text on the screen. Bring the client’s eyes to it.

#1DBF73: Green – Works with all other colors and will stand out

#4FABF8: Works in correlation with #E3446C and will allow for a layered look on certain shapes and designs on the website.

#49349E: Purple

#26ACFF: Link color – blue


#F50049: Red button color

#FFAE11: Yellow heading color

#7ABE47: Green status color

#25A9FB: Blue status color

#7E83FE: Purple status color