Creating Color UI Palettes

Colour is a critical part of a UI website design. And a huge part of the UI design process. Starting with the right colour range can drastically improve the outcome and quality of the website. Furthermore, colour is very important to usability so getting it right is non-negotiable.

Some brands dont have a great range of colors in their brandkit. Some May not even have a brandkit (just a logo). This is where you need to get inventive and start expanding the limit color range you are starting with.

In order to get it right I find it helpful to break it down into smaller peices.

Your Palettes can be broken up into 3 types of colors

1. Brand colors

Brand colors are used on things like:

  • Buttons,
  • Links,
  • Navigation
  • Icons

2. Supporting colors

Are used throughout the interface in key places where you need to draw attention or communicate something to the user using for example

  • Error messages
  • Confirmation messages
  • Informal dialogues

3. Neutral colors

These colors are mostly greys used to make up the rest of the UI

  • Text
  • Backgrounds
  • Border colors
  • Secondary buttons

Finding a base starting color

Starting with the brand color is a good starting point

When choosing colors use HSB values instead of hex

H: Hue S: Saturation B: Brightness

Choosing supporting colors

Choose colors for the following

  • Green for success messages
  • Orange or yellow for warnings
  • Red for errors
  • Blue for nuetral informational messages

Supporting colors need to feel like they go along with your brand color.

Saturation and brightness should stay close to your base (keep these numbers within 5 - 10 difference) Hue color can then be whatever you like

Create Shades in HSB

Start with nine blank swatches. Position the brand color in the middle at swatch 5. create lighter and darker swatches on both sides of the brand color by adjusting the hue and saturation

img-description Hue stays the same with incremental brightness and saturation



more info

This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.