Photo by reza shayestehpour on Unsplash

Design Notes: UI Colors

2
mins

If you’re designing/building user interface, you often want to spend time to figure out how to best assign colors to various user interface elements. Below is a list of elements to consider when planning your color usage:

Background colors

By default, browsers use white background. It may be sufficient for some people but if you want to add varieties to your theme then you may consider adding an off-white, light-grey or dark color (darker color scheme) to used as background color.

Fonts

At the very least, a design requires one font color (dark or light/white) depending on your color scheme. Most sites have the following:

That’s at least 4 colors to consider.

Border/lines

If you have a content-heavy design, it’s likely that you’ll need to use border or lines to group and separate you content. It’s nice to use only one consistent color for all the borders and division lines, however, if you start to nest division or cards within cards, it may be good to have multiple.

Highlights

If you have any notification related elements (e.g. success message, warning banners), you’ll need colors for:

Hover/active/disabled states

This is most applicable on web interface (vs mobile), you’ll likely want hover or even active states for your elements, especially buttons and list menus. The number of hover/active color scales proportionally with the number of your element variations. For instance, one blue button may have a lighter blue hover state, a darker blue active state and a subtle disabled state.