HOME | DD

Description
I'll start to upload resources, references, tutorials, stocks'n'stuff...

One square = one triadic color scheme.
The big two charts in the upper left corner are for explaination how the math behind it works:

The basic idea is: equal amounts and equal values = boring. Unequal distributions of hue, brightness, saturation AND SPACE = interesting.

The relation between all values of the three colors is about 5:3:2 (a bit golden means) - for saturation and brightness range from 0% to 100% and are therefore based on 0% : 50% : 80%. The hue has a range from 0 degrees to 360 degrees and therefore the base values for the three colors are 0' : 180' : 288'. This means that the second color will be the exact opposite, complementary color of the first one. And the third color is between them, but closer to the first one. Moreover I arranged them in the squares according to the 5:3:2 relation and they should be used in an image (amount, not place).

You have to know about "Hue", "Saturation" and "Brightness" if you want to understand the whole thing. It may be a bit confusing that the S(aturation) in Fig.1 (upper left corner) goes from white to red. This happens with Brightness at 100%, but does not mean that "Saturation" controls the Lightness. Instead it controls the "amount of color" - means it would be more grey if brightness is at 50%.

With every row in a column the Hue increases by 36', the saturation and brightness increase by 10 and the step after 100% is not 0%, but 10% (this really confused me a lot). The "missing" 0% values prevent the charts from "real" white, black and grey fields.

All the different columns come from changing the starting values of Brightness (B) and/or Saturation (S) in steps of 20.
B decreases after every block of 5 and S increases in every block for every column. Hue is fixed.

You can however put a photoshop hue/saturation control layer on top of the image and fine adjust the base colors with the hue slider. Especially the 72' yellow is damn ugly...

The "uncompressed" first column shows the system based on 0'/360'-100%-Saturation-and-Brightness Red. The black dots left of it mark those three colors that form the triad for pure red. You will notice that there are no pastels in this column, because B and S overlap completely. This happens in every column where the starting values for B and S are the same (B0-S0, B80-S80, B60-S60, B40-S40 and B20-S20) - A column with B0-S50 would have the most pastels in it.

I don't know if this makes any sense and if i didn't do more mistikes/logic fails and if this is now a "good harmony". But one thing is sure: If you use it you will get interesting amounts of dark vs light and saturated vs desaturated.

You can also calculate a triad manually. Example:

Base color is a bright, warm yellow:
H 48' - S 20% - B 100%
Second color is base H+180', S+50 and B+50 =
H 228' - S 70% - B 50%
Third color is base H+288', S+80 and B+80 =
H 336' - S 100% - B 80%

Description
I'll start to upload resources, references, tutorials, stocks'n'stuff...

One square = one triadic color scheme.
The big two charts in the upper left corner are for explaination how the math behind it works:

The basic idea is: equal amounts and equal values = boring. Unequal distributions of hue, brightness, saturation AND SPACE = interesting.

The relation between all values of the three colors is about 5:3:2 (a bit golden means) - for saturation and brightness range from 0% to 100% and are therefore based on 0% : 50% : 80%. The hue has a range from 0 degrees to 360 degrees and therefore the base values for the three colors are 0' : 180' : 288'. This means that the second color will be the exact opposite, complementary color of the first one. And the third color is between them, but closer to the first one. Moreover I arranged them in the squares according to the 5:3:2 relation and they should be used in an image (amount, not place).

You have to know about "Hue", "Saturation" and "Brightness" if you want to understand the whole thing. It may be a bit confusing that the S(aturation) in Fig.1 (upper left corner) goes from white to red. This happens with Brightness at 100%, but does not mean that "Saturation" controls the Lightness. Instead it controls the "amount of color" - means it would be more grey if brightness is at 50%.

With every row in a column the Hue increases by 36', the saturation and brightness increase by 10 and the step after 100% is not 0%, but 10% (this really confused me a lot). The "missing" 0% values prevent the charts from "real" white, black and grey fields.

All the different columns come from changing the starting values of Brightness (B) and/or Saturation (S) in steps of 20.
B decreases after every block of 5 and S increases in every block for every column. Hue is fixed.

You can however put a photoshop hue/saturation control layer on top of the image and fine adjust the base colors with the hue slider. Especially the 72' yellow is damn ugly...

The "uncompressed" first column shows the system based on 0'/360'-100%-Saturation-and-Brightness Red. The black dots left of it mark those three colors that form the triad for pure red. You will notice that there are no pastels in this column, because B and S overlap completely. This happens in every column where the starting values for B and S are the same (B0-S0, B80-S80, B60-S60, B40-S40 and B20-S20) - A column with B0-S50 would have the most pastels in it.

I don't know if this makes any sense and if i didn't do more mistikes/logic fails and if this is now a "good harmony". But one thing is sure: If you use it you will get interesting amounts of dark vs light and saturated vs desaturated.

You can also calculate a triad manually. Example:

Base color is a bright, warm yellow:
H 48' - S 20% - B 100%
Second color is base H+180', S+50 and B+50 =
H 228' - S 70% - B 50%
Third color is base H+288', S+80 and B+80 =
H 336' - S 100% - B 80%