What factors do these colors share?

Colors below seem to share some kind of “tone” together. For example, colors like this or this seem too bright to fit into this group.

What exactly makes this “tone”? I want some technical information, so that if I want to add purple to this group or create a different group of colors, I can find the exact HTML color codes I need.

enter image description here

Screenshot taken from here


I’ll take a shot. There’s nothing unique about the colors you displayed– they are similar in that they all fall in a small range of both saturation and brightness, but there isn’t similar tone or hue to them and they’re not under any specific color harmony. (that I’m aware of at least)

As a thought experiment I’m going to take the same colors you provided and rotate all of there hue values 45 degrees.

45 degree rotated

So now we have colors that share the same saturation and brightness as the ones before, however we shifted there hue.


As you can see there is the same amount of relationship technically between the first and second colors, they don’t fit a particularly color harmony and to be honest I’m just as uncomfortable saying the first are related as I to saying the second are related.

You are better off creating from known color harmonies, such as a Tetrad color harmony. These are also easier to change programatically because they are based off set hue variations between the colors. In terms of generating a hex code you would need to create a algorithm that converts hsl values into hex or simply use hsl which are supported in CSS although you have a problem with IE8 and below. (There are polyfills that provide support that can be found with a google search)

Tetrad Wheel

Source : Link , Question Author : CookieEater , Answer Author : Adam Schuld

Leave a Comment