Mobile app version of vmapp.org
Login or Join
Cooney243

: 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

@Cooney243

Posted in: #Automation #Color #ColorTheory #Html #WebsiteDesign

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.



Screenshot taken from here

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Cooney243

3 Comments

Sorted by latest first Latest Oldest Best

 

@Eichhorn212

Visually, all the colors in your screenshot appear to share a fairly similar lightness and saturation level. They're not quite the same, but they're pretty close.

One reason why that's not necessarily obvious from the RGB or even the HSL / HSV representation of the colors is that even HSL / HSV is a rather perceptually non-uniform color space: colors that have the same HSL "lightness" value can have very different apparent lightness depending on their hue, and vice versa.

The problem is compounded by the fact that the raw RGB color values you have are most likely gamma-encoded, and would first have to be converted to a linear color space before you can do any useful colorimetry with them.

If you want to find an additional color that has a similar perceptual lightness and saturation to your original colors, you basically have two options:


Just eyeball it. Start with the simple HSL / HSV representation, change the hue value to what you want, and then manually adjust the lightness and saturation until it looks good. I suspect this is what the original designer of the palette did.
Convert the colors to a perceptually uniform color space like CIECAM02 (after gamma-decoding, if necessary), and rotate the hue in that color space. This should give results the require much less hand-tuning, but unfortunately requires finding some software that supports such a color model (or doing the rather non-trivial math yourself).

10% popularity Vote Up Vote Down


 

@Angela777

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.




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)

10% popularity Vote Up Vote Down


 

@Angela777

This is the Hue parameter changes in HSB color system

your picture with Hue adjustment

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme