Peter Jonsson

Turning bits into bytes

Five useful color schemes

February 16th at 10:56pm
Tags: Color UI

Here are some color schemes that I have found to be useful when developing small to large applications as well as interface mockups. They serve as a great point for starting out.

Note that all of these colors have originally been generated by Coolors which is an excellent tool when making things related to user interfaces. Clarity, accessibility and ease of use are the three main criteria for constructing great color schemes that work well together. Also note that having too many colors can be distracting and result in a messy appearance.

Shades of Sand

A relaxed color scheme that is easy on the eyes.

#f7f0f5 #decbb7 #8f857d #5c5552 #433633

Full preview

Greeny Gray

A color scheme packed with intense energy.

#595959 #808f85 #91c499 #f2e9dc #cfd11a

Full preview

Reddened Sand

Just like the previous sand colors, this one offers a relaxed viewing experience with just a bit more intensity from the red color.

#7a6c5d #2a3d45 #ddc9b4 #bcac9b #c17c74

Full preview

Pleasant Range

This one is a mixture of the spectrum from red to viridian with a few neutral tones in between.

#c03221 #f7f7ff #f2d0a4 #545e75 #3f826d

Full preview

Soothing Range

This time around, the colors are more washed-out, resulting in an even more relaxing viewing experience.

#a3a380 #d6ce93 #efebce #d8a48f #bb8588

Full preview

Ending note

I have no affiliation with Coolors but I use the tool quite a lot for both mockups and live projects. There are also services like Adobe Color CC where users upload their own colorschemes. These tools are also useful, but sometimes getting a few random colors is great for starting a design or finishing an interface.

If you are using a tool like SASS for the web or anything else, do use variables for your different colors. This way, they can easily be replaced later on.