What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Harmonize Colour Palette


dave777

Member
Messages
14
Likes
1
Hello!
I love this place – can you please help me up! I have the following colour palette. The last two colours are the primary colours which will be the driving colours of the website and PDF reports. I wonder how do I harmonize all colours so that they look all in sync with one another?
I need a unified colour palette for the website/pdf reports. Is there a way to do that easily but in a professional way in Photoshop? I tried applying unifying colour actions in Photoshop (Florabella Colorplay) but those dilute the original colours.
Thanking you so much!)
Dave

PS: I guess my primary AIM is this - collect a few colors into a a palette and then harmonize it based on two colors (which will remain more or less intact)
 

Attachments

  • primary-color-scheme.jpg
    primary-color-scheme.jpg
    24.5 KB · Views: 35
Last edited:

IamSam

Administrator
Staff member
Administrator
Messages
22,721
Likes
13,258
Hi Dave and welcome to PSG.

Hopefully I'm understanding your question. Color harmony is very subjective for some, but I use the Adobe Color Wheel to coordinate color themes.
 

Tom Mann

Guru
Messages
7,223
Likes
4,343
I fully second Sam's recommendation. In fact, I was just about to recommend Adobe's color harmonization app myself, when I saw Sam's post.

One very important point: Because of (as Sam mentioned) the subjectivity of color schemes and trends in popular culture, even world-class experts in color harmonization always seek the opinions of people similar to the intended audience for the website. Large design firms will often convene focus groups to evaluate color combinations (assuming the campaign / contract is big enough). There are just too many ways to "go really wrong" in this area if you are relying only on your own opinions. For example, young users may feel your scheme is "so yesterday", while older users may think your scheme is obnoxious and looks like the colors of a cheap ransom note (see Wikipedia article on the ransom note effect), and pro web designers will criticize it because it doesn't work with the current trend in flat user interface design or Google's push for material design, etc. etc..

Even if you only informally poll your colleagues, wife/GF, and friends, DO NOT risk making a fool of yourself by putting out the first scheme that you happen to like.

That being said, I would strongly suggest that before you jump right into this project, you get a wider perspective on color harmonization. You need to do this to develop your artistic sensibilities w.r.t. color before making any suggestions to anyone about color schemes. For example, at the simplest level, you don't want people suffering from headaches and eyestrain because you put a bright saturated blue right next to a bright saturated red. My suggestion would be that before you do any work on the subject, Google {harmonizing colors} and you will find a huge number of very good articles written on this subject. Carefully read and understand several of them.

Now, back to your particular question ...

Hopefully, you have thoroughly read several articles on color harmonization. Open color.adobe.com in your browser or with an iOS app, and learn how to use it by following along one of the many tutorials on its use, e.g., this one.

Immediately, you will see that the major color schemes are all represented:
Analogous
Monochromatic
Triad
Complementary
Compound, and,
Shades

How do you decide between them? You do this by first setting general goals for your color scheme and writing down some adjectives that should describe it, e.g., peaceful, active, nostalgic, avant-garde, looks like the scheme on XXX, etc. etc.

You can then try some of the schemes and see which ones you think will meet your overall design goals and are consistent with the adjectives you came up with.

In addition, so you don't have to start from scratch, if you get yourself an Adobe login, you will be able to scroll through thousands of color schemes that have been developed by other designers, and see if any catch your eye. You can then download it into Kuler, and tweak it to your heart's content.

Finally, I would make a mock-up web page using that color scheme and run it by other folks. For me at least, viewing colors in abstract patches doesn't give me good insights into how these colors will look on a web page. A lot depends on if you will be using a particular color as text, as a complicated graphic element, as a background, the fraction of the page that color takes up, etc. etc.

The best of luck with your project.

Tom M
 

IamSam

Administrator
Staff member
Administrator
Messages
22,721
Likes
13,258
To add to Tom's list of adjectives, warm, hot, cool, cold, soft, bright, dark, active, striking, feminine, masculine, vivid, dull, tranquil, exciting, young, natural, captivating...........etc., the list goes on and on.
Tom Mann - Do you have a particular "Color Harmony" article/site that you prefer?
 

dave777

Member
Messages
14
Likes
1
To add to Tom's list of adjectives, warm, hot, cool, cold, soft, bright, dark, active, striking, feminine, masculine, vivid, dull, tranquil, exciting, young, natural, captivating...........etc., the list goes on and on.
@Tom Mann - Do you have a particular "Color Harmony" article/site that you prefer?

thank you - this will be a financial webiste - bue for up and red for down prices....those other oclors are for the bar charts ar any chart which requires the multiple colors....do you think I shoudl make them all a little bit less saturdated? the core adjective is OBJECTIVE PRECIE AND PRFESSIONAL
 

dave777

Member
Messages
14
Likes
1
I fully second Sam's recommendation. In fact, I was just about to recommend Adobe's color harmonization app myself, when I saw Sam's post.

One very important point: Because of (as Sam mentioned) the subjectivity of color schemes and trends in popular culture, even world-class experts in color harmonization always seek the opinions of people similar to the intended audience for the website. Large design firms will often convene focus groups to evaluate color combinations (assuming the campaign / contract is big enough). There are just too many ways to "go really wrong" in this area if you are relying only on your own opinions. For example, young users may feel your scheme is "so yesterday", while older users may think your scheme is obnoxious and looks like the colors of a cheap ransom note (see Wikipedia article on the ransom note effect), and pro web designers will criticize it because it doesn't work with the current trend in flat user interface design or Google's push for material design, etc. etc..

Even if you only informally poll your colleagues, wife/GF, and friends, DO NOT risk making a fool of yourself by putting out the first scheme that you happen to like.

That being said, I would strongly suggest that before you jump right into this project, you get a wider perspective on color harmonization. You need to do this to develop your artistic sensibilities w.r.t. color before making any suggestions to anyone about color schemes. For example, at the simplest level, you don't want people suffering from headaches and eyestrain because you put a bright saturated blue right next to a bright saturated red. My suggestion would be that before you do any work on the subject, Google {harmonizing colors} and you will find a huge number of very good articles written on this subject. Carefully read and understand several of them.

Now, back to your particular question ...

Hopefully, you have thoroughly read several articles on color harmonization. Open color.adobe.com in your browser or with an iOS app, and learn how to use it by following along one of the many tutorials on its use, e.g., this one.

Immediately, you will see that the major color schemes are all represented:
Analogous
Monochromatic
Triad
Complementary
Compound, and,
Shades

How do you decide between them? You do this by first setting general goals for your color scheme and writing down some adjectives that should describe it, e.g., peaceful, active, nostalgic, avant-garde, looks like the scheme on XXX, etc. etc.

You can then try some of the schemes and see which ones you think will meet your overall design goals and are consistent with the adjectives you came up with.

In addition, so you don't have to start from scratch, if you get yourself an Adobe login, you will be able to scroll through thousands of color schemes that have been developed by other designers, and see if any catch your eye. You can then download it into Kuler, and tweak it to your heart's content.

Finally, I would make a mock-up web page using that color scheme and run it by other folks. For me at least, viewing colors in abstract patches doesn't give me good insights into how these colors will look on a web page. A lot depends on if you will be using a particular color as text, as a complicated graphic element, as a background, the fraction of the page that color takes up, etc. etc.

The best of luck with your project.

Tom M

Thank you very much for this amazing reply so full of deep knoledge on this matter - I wonder how do you go about harminizing the color pallete consiting of colors which you have drawn from seperate sources? The one way Is to use a color action in Photoshop - any other way maybe? BTW THE MATCH COLOR function in pohotoshop can help?
 

Tom Mann

Guru
Messages
7,223
Likes
4,343
To add to Tom's .. @Tom Mann - Do you have a particular "Color Harmony" article/site that you prefer?
Actually, I don't, Sam. It's been a long time since I've looked t basic material on this subject, so I did a minor literature search and found some articles that I thought would be very useful for beginning color designers. These are in no particular order:

https://www.sitepoint.com/web-design-trends-2015-2016-fearless-colors/
- - recent trends in web design, lots of examples


http://1stwebdesigner.com/best-colors-for-websites/
- - psychological impressions of various colors as applied to website design


http://thenextweb.com/dd/2015/04/07/how-to-create-the-right-emotions-with-color-in-web-design/
- - web design color theory


https://designschool.canva.com/blog/website-color-schemes/
- - 50 excellent examples of different color schemes in websites


http://webdesign.tutsplus.com/artic...olor-theory-for-web-designers--webdesign-1437
- - Some of the basics of color theory as applied to website design. Includes an intro to color design software.


https://www.elegantthemes.com/blog/...ng-color-harmony-in-your-theme-customizations
- - Check out point #4 in this article. It's a good example of bad color design as applied to text and background and nearby colors in a UI


HTH,

Tom M
 

Tom Mann

Guru
Messages
7,223
Likes
4,343
dave777 -

Thanks for the kind words, Dave. A couple of thoughts:

a) I don't consider the colors that are used to code graphs in the same way as I consider other graphic design elements. IMHO, they are in a separate, utilitarian category, and often shouldn't be changed for artistic reasons because of factors such as being a long accepted standard such as red=stop, green=go. In such cases, spend your time optimizing the other design elements on the page, as discussed in some of the references I cited in my previous post.

b) With respect to slightly desaturating the colors used to color code graphs, my personal opinion is to leave them at full saturation so the various lines and bars will be as easy as possible to distinguish from each other, especially if the web page is likely to be viewed on devices with limited color capabilities.

c) WRT your question about using actions or other automated methods to harmonize colors, personally, I would never accept the results of a PS action as even a possible answer, let alone, the best answer to the problem. Color harmonization is an artistic judgement, and mindless software is incapable of such judgements.

More later.

Sorry, but really got to run,

Tom M
 

Tom Mann

Guru
Messages
7,223
Likes
4,343
thank you - this will be a financial webiste (sic) ...the core adjective is OBJECTIVE PRECIE (sic) AND PRFESSIONAL (sic)
I'm a big believer in learning from other, more experienced people, so just to see if there were any preferred color schemes for financial websites, I went to Google Images, searched on {financial services}, and took a screen shot of the first page of results. Since we are only looking for trends in overall color use, I shrunk it down so one could see the entire page of results, even if you are looking at it on a small phone.

Does anything strike you about the use of color on almost all of these websites?

Well, guess what: The trend in color use that you are seeing in the attached screen grab *exactly* conforms to what was mentioned in several of the articles I cited earlier about the desired psychological messages being sent by these financial services websites. See if you can spot what I'm talking about in the text of some of those articles.

There is one notable color exception among the Google hits, the use of stacks of gold coins, but even that very obviously was done to convey an impression of wealth and stability.

You just said, "financial website". That could mean something other than the term I used for searching, "financial services". If the purpose of your website is not "financial services", just Google (Images) on the proper term.

Finally, I realize that you may be typing fast on a bumpy train, but you are making a lot of spelling errors. Be careful that there isn't even a single such error on the website. People take their money somewhere else if they see such easily avoided errors in the website of a firm in the finance industry.

HTH,

Tom M

PS - By the way, just in case English isn't your primary language, the term, "sic", is inserted when someone is quoting you, finds errors in what you wrote, but decides not to correct your errors (eg. so you can spot them more easily)
 

Attachments

  • color_schemes_financial_services_websites-01a.jpg
    color_schemes_financial_services_websites-01a.jpg
    283.1 KB · Views: 21

dave777

Member
Messages
14
Likes
1
I'm a big believer in learning from other, more experienced people, so just to see if there were any preferred color schemes for financial websites, I went to Google Images, searched on {financial services}, and took a screen shot of the first page of results. Since we are only looking for trends in overall color use, I shrunk it down so one could see the entire page of results, even if you are looking at it on a small phone.

Does anything strike you about the use of color on almost all of these websites?

Well, guess what: The trend in color use that you are seeing in the attached screen grab *exactly* conforms to what was mentioned in several of the articles I cited earlier about the desired psychological messages being sent by these financial services websites. See if you can spot what I'm talking about in the text of some of those articles.

There is one notable color exception among the Google hits, the use of stacks of gold coins, but even that very obviously was done to convey an impression of wealth and stability.

You just said, "financial website". That could mean something other than the term I used for searching, "financial services". If the purpose of your website is not "financial services", just Google (Images) on the proper term.

Finally, I realize that you may be typing fast on a bumpy train, but you are making a lot of spelling errors. Be careful that there isn't even a single such error on the website. People take their money somewhere else if they see such easily avoided errors in the website of a firm in the finance industry.

HTH,

Tom M

PS - By the way, just in case English isn't your primary language, the term, "sic", is inserted when someone is quoting you, finds errors in what you wrote, but decides not to correct your errors (eg. so you can spot them more easily)

Tank you so much for your generously detailed and very helpful reply...As a matter of fact I am planning to launch a market analysis platform - more like Bloomberg or Reuthers Eikon - I have attached a few snapshots with their color schemes - Understandably I am not going to use the exact replicas of the colors on my site - just approximate copies - in light of this I wanted to ask how do I tweak a palette taken from such websites - Can I apply Photoshop action to color correct them to change them slightly?
 

Attachments

  • -1x-1.png
    -1x-1.png
    43.6 KB · Views: 2
  • 488x-1.png
    488x-1.png
    51.5 KB · Views: 17
  • 323.jpg
    323.jpg
    171 KB · Views: 0
  • 896.jpg
    896.jpg
    579.8 KB · Views: 0
  • 39284c_full.png
    39284c_full.png
    127.6 KB · Views: 0
  • 1452854828567.jpg
    1452854828567.jpg
    70.5 KB · Views: 0
  • bb1.png
    bb1.png
    41.9 KB · Views: 0
  • map.png
    map.png
    202.6 KB · Views: 0
  • interssting.jpg
    interssting.jpg
    554 KB · Views: 0

dave777

Member
Messages
14
Likes
1
As you can see those two arch rivals both love orange and blue and also red...I have attached the color palette of Bloomberg....How do you think this palette can be modified to match my original TWO colors (attached them as well)?
 

Attachments

  • bloomberg chart.png
    bloomberg chart.png
    16.3 KB · Views: 2
  • primary scheme.png
    primary scheme.png
    6 KB · Views: 14

dave777

Member
Messages
14
Likes
1
I get the following palette when I use MATCH COLOR in Photoshop:
 

Attachments

  • bloomberg-chart-(1).jpg
    bloomberg-chart-(1).jpg
    5.8 KB · Views: 0

dave777

Member
Messages
14
Likes
1
I also tried to combine these pallets into one and apply some of the color actions that I have...I have attached a few examples... please let me know if you think the look consistent?
I need to create a fully consistent color palette using 10 or 15 colors - do you think this method can be used for that? namely harmonization different colors take from different sources?
 

Attachments

  • var-1.jpg
    var-1.jpg
    21.9 KB · Views: 15
  • var2.jpg
    var2.jpg
    13 KB · Views: 15
  • var-3.jpg
    var-3.jpg
    17.5 KB · Views: 15
  • var4.jpg
    var4.jpg
    13 KB · Views: 15
  • var5.jpg
    var5.jpg
    16 KB · Views: 15
  • var6.jpg
    var6.jpg
    17.7 KB · Views: 14
  • var7.jpg
    var7.jpg
    19 KB · Views: 14
  • var8.jpg
    var8.jpg
    12.9 KB · Views: 14
  • var9.jpg
    var9.jpg
    13.1 KB · Views: 14
  • var10.jpg
    var10.jpg
    13.9 KB · Views: 14
  • var11.jpg
    var11.jpg
    18 KB · Views: 14
  • var12.jpg
    var12.jpg
    15.5 KB · Views: 15
  • var13.jpg
    var13.jpg
    15.6 KB · Views: 14
  • var14.jpg
    var14.jpg
    22.2 KB · Views: 15
  • var15.jpg
    var15.jpg
    17.3 KB · Views: 15
Last edited:

Tom Mann

Guru
Messages
7,223
Likes
4,343
Thank you for the examples & explanation. I now have a much better idea what you doing and what you are looking for.

There are lots and lots of ways to change colors. Some use native PS tools, while others (ie, like the actions you are considering) use 3rd party commercially available tools. The problem with the latter is that:

a) They often are conceptually obscure - eg do you know exactly how these actions actually work, and can you predict (ie, do you know) if they will inadvertently produce unwanted changes in other colors (for example, the blacks and whites might become colored); and,

b) They often are not easily modified to fit one's particular needs.

This is why I prefer (if possible) to use PS's native tools - the simpler, the better.

As an example, I used nothing but a hue / saturation adjustment layer to impart new (random, LOL) colors to one of the graphics you supplied. It took me less than 30 seconds to do this, and a huge number of other options are immediately available simply by moving a few sliders around. To reproduce the effect, the adjustment can either be saved as a preset, or the adjustment layer dragged on top of other images (in PS) and it will be applied to them.

See what you think.

Tom M
 

Attachments

  • _1x-1-ps02a-for_GIF.gif
    _1x-1-ps02a-for_GIF.gif
    49.4 KB · Views: 15

Tom Mann

Guru
Messages
7,223
Likes
4,343
Until your most recent posts, it seemed that you were dealing with the conventional problem of selecting a color scheme for a website. This is why I was concentrating on this topic - supplying citations, giving a page full of thumbnail sized examples of overall color schemes for financial websites, etc.

However, with your most recent posts, it has become apparent that this isn't what you are really concerned about. Instead, you seem to be much more concerned with the problem of achieving accurate, effective, non-misleading data visualization (eg, the colors of lines in graphs, cells in tables, etc.). In other words, colors keyed to numerical values.

The goals for doing this well are quite different from the more psychological goals for selecting a color scheme for a website. There have been many technical papers, and even several books written on data visualization, and in some of them, the choice of colors to be used in graphs, tables, etc. have been discussed. When I have more time, I'll try to dig up some of these references for you.

What I will tell you is that in none of these papers and books have I ever seen any thought devoted to color harmony in the traditional, artistic / aesthetic sense. Rather, in its place, there is emphasis placed on issues such as using colors that do not bias the observer. For example, RGB = 1,0,0 (i.e., pure, undiluted red) will attract the eye of the observer vastly more than RGB = 0,1,0 or 0,0,1 (i.e., the other two color primaries in the RGB system). This is a psychological /physiological visual effect, not a physical effect. Whether you want this to happen is up to you. If you want to dramatically indicate when some variable is entering unfavorable territory, i.e., red indicates bad news, this is fine. OTOH, in other situations, eg, alerting viewers to the potential for shorting some positions, you may prefer a more balanced choice of colors, eg, a darker, but fully saturated red instead of a full-on 1,0,0 red. This was actually discussed in one of the articles I cited in my earlier post.

So, the bottom line is that I would recommend that you should change your goals from traditional color harmonies, to the colors appropriate for accurate presentation of data. These are two different problems. This means that IMHO, you should not be worrying about finding semi-automated methodology of generating traditional color pallets, and instead, read the literature on data visualization and then simply construct the desired colors using direct methods of adjustment such as the standard PS tools where you can move a dot or sliders around on a colored area to get any color you want.

Just my $0.02 on the subject,

Tom M
 
Last edited:

dave777

Member
Messages
14
Likes
1
Yes you are right - I am looking for the best way to express my signals and overall analysis and I want it to all look consistent...I have read this book on dashboard design before:
https://www.amazon.com/Information-Dashboard-Design-Effective-Communication/dp/0596100167
Blloomberg aims to portray the bold image and they use the same old colors - have attached some of their charts...

I also want a bold design because our product will be brand new in many ways...
 

Attachments

  • 2.gif
    2.gif
    53.5 KB · Views: 10
  • 3.gif
    3.gif
    55.6 KB · Views: 11
  • 4.gif
    4.gif
    34.6 KB · Views: 0
  • 5.gif
    5.gif
    28.4 KB · Views: 0

dave777

Member
Messages
14
Likes
1
I have the following two charts which will appear on the main dashboard...as you can see the color scheme are not consisted - but the left chart is not as important as the right one - how do the colors look to you? do you think I should select more close colors to the pie chart?
 

Attachments

  • compare-charts.jpg
    compare-charts.jpg
    76.9 KB · Views: 11

dave777

Member
Messages
14
Likes
1
I matched these charts a follows - let me know how it looks..
 

Attachments

  • HARMONIZED.png
    HARMONIZED.png
    23.5 KB · Views: 0

Tom Mann

Guru
Messages
7,223
Likes
4,343
Some thoughts ...

a) It's great that you have read one of Stephen Few's books. I have not read that particular one, but thought that "Now You See It" was quite good in terms of bringing exploratory data analysis (especially, using "R") to a wider, less technical / non-statistician audience. I had a review copy from the publisher when it first came out several years. The book I was going to have you start with was the much older classic by Tufte: "The Visual Display of Quantitative Information". It's probably worth picking up a copy and reading through it, but you may already be beyond that point, especially if you have a statistics background.

b) I'm sure you already know this, but the displays you gave as examples (eg, Bloomberg) were designed for dumb terminals, essentially with capabilities only slightly better than a 1980's era Hercules monitor, LOL. My guess is that those color schemes you posted have been ported over almost without change since then so that their look is consistent whether a trader is viewing the info on one of the original dumb terminals or a modern, wide screen, high resolution LCD or LED display driven by a PC. Intentionally keeping many of the same layouts and color schemes over years (decades?) has the huge advantage of familiarity, i.e., retaining their existing customers, but probably are not what anyone would use these days, if starting fresh, like you seem to be. Personally, I think the layout and colors of the examples you posted certainly are packed with information, but are absolutely horrible from a visual design POV.

Of course, the disadvantage of starting fresh is convincing current users of other services to jump ship and switch to your service, so you better be offering them a substantial benefit to make the switch.

c) With respect to the changes you made in the stacked bar chart when going from post #18 to post #19, I strongly prefer the stronger colors in #19.

More later,

Tom M
 

Top