Pick the right color for your website

Recently, we developed a feature that allow user to change color for their goals. It allows user to recognize different types of goal in their quarter or in the same team easier. However, the hard part is which color should be used?
Bootstrap has 5 colors, which is called Primary (blue), Success (Green), Warning (Orange), Danger (Red) and we are already used these colors to show the progress of user in the progress bar. We have to pick different colors.
 color-post-original
So, requirements are:
  • Good for white text.
  • Good with current bootstrap color, harmony with same kind.
  • Playful.
So, why some colors are harmony well together? Basically, before custom picking color, we must understand the color concepts & terminology. These are the basic ones :
  • Hue is color (blue, green, red, etc.).
  • Chroma is the purity of a color (a high chroma has no added black, white or gray).
  • Saturation refers to how strong or weak a color is (high saturation being strong).
  • Value refers to how light or dark a color is (light having a high value).
  • Tones are created by adding gray to a color, making it duller than the original.
  • Shades are created by adding black to a color, making it darker than the original.
  • Tints are created by adding white to a color, making it lighter than the original.

 480px-Munsell-system.svg(Munsell Color System: CC BY-SA 3.0, wikimedia.org)

The rule I follow is:
  • Similar saturation will be harmony well.
  • High saturation will stand out before white.
  • High shade colors stays good with low shade colors.
Analyze Bootstrap colors, I have:
Primary: 006DCC (RGB 0,109,204)
  • Hue: Blue
  • Saturation: Very high
  • Shades: High
Screen Shot 2016-03-13 at 7.51.49 PM
Bootstrap color

Success: 5BB75B (91, 183, 91)

  • Hue: Green
  • Saturation: Medium
  • Shades: High
Warning: FAA732 (250,167, 50)
  • Hue: Orange
  • Saturation: High
  • Shades: Very high
Danger: DA4F49 (218,79,73)
  • Hue: Red
  • Saturation: Medium high
  • Shades: High
Info: 49AFCD (73,175,205)
  • Hue: Blue + Green
  • Saturation: Medium high
  • Shades: High
Exclude the Primary colors, other colors have similar Saturation, which make them harmony well. In order to pick 4 extra colors, there are few options:
1. Reduce shades:
Because Bootstrap color shade is already high, so we can reduce shade of them to make them stand out with Bootstrap color. Notice on the color wheel, the color positions are the same, but the shade is darker. It fits all requirements but the playful.
2. Increase saturation of Bootstrap colors:
Increase the saturation of existing color will create next ones those are harmony. Moreover, different hue with high saturation will create a playful feeling for website. Notice on the color wheel, the color position moved farther from the center. However, the saturation of Bootstrap colors already high so it’s very hard to distinguish with the news colors.
3. Change hue, keep similar saturation:
Similar saturation may make color set seem unify. Notice, the radius of color in the wheel are similar to Bootstrap color. So far, this is the best solution to me. It fits all requirements. However, there is a feeling that it will create too many colors on the website.
We can still do better by changing other components like text colors, progress color and so on, but they are not in the scope of this blog. I just hope this post can provide some useful solution if you have trouble with picking color for your website.