0

I'm working on a web app which has more than 80 colours if I check the CSS file of it. Not all colours are very different colours, there are darker and lighter variations too.

Should I try removing colours from the app, currently 80+? No user has ever complained about colors though.

I know colour contrast is important but I'm not talking about that.

Is there any research paper or case studies on the importance of Less and consistent colours in the UX?

  • 1 : are you sure all 80 are in use. Maybe you just need a UI dev to audit your CSS. 2 : We have no idea what your app is. Maybe what it really needs is two more colors. ¯\_(ツ)_/¯ – plainclothes Apr 12 '17 at 19:44
  • This is not related to UX, but not so long ago Stack Overflow reduced the number of colours used in CSS across the Stack Exchange network in order to reduce CSS file sizes (by a significant amount, if I remember correctly). – user69458 Apr 12 '17 at 22:56
  • @FighterJet Please share the link if you find. I googled but could not find – Jitendra Vyas Apr 13 '17 at 3:18
  • 1
    @Jitendra: meta.stackoverflow.com/a/321790/4485551. Looks like they also had the goal of a consistent UI, in addition to reducing file sizes. – user69458 Apr 13 '17 at 13:44
2

As with any application, colors should reflect behavior in some way, and consistency with behavior is inarguably beneficial.

Should I try removing colors from the app, currently 80+?

The answer to this question lies in another question; does the usage of any of these colors cause confusion with regard to behavior / intent? If you're using colors interchangeably that look nearly identical, then I'd wager that removing those colors is not necessary as the user never even knew there were so many variations. However, if there are any one-off color usages or inconsistencies that could be replaced without obscuring functionality, I would encourage replacing them whenever possible.

  • colors should reflect behavior in some way, and consistency with behavior is inarguably beneficial <= Well said. Sprinkle in some room for brand expression and that sums it up. – plainclothes Apr 13 '17 at 3:47
2

This question is a bit vague since you don't provide any info on your site. The only case I could think of for you having that amount of colors is if you're using them for color references (for example charts where you might need many colors to distinguish lines, bars, etc) or specific animation elements. Otherwise, we'd need more info.

Generally speaking, the answer is: YES, you should limit the amount of colors. If anything, for the following reasons:

  • Consistency: Having a consistent palette of colors will result in a more pleasant site where your users will recognize elements at first sight by seeing the same color consistently across your site/app

enter image description here

  • Branding: Brands use colors. Colors are a way to recognize a brand. Having a simple color palette will help with branding. Having 80 colors will dilute it for sure

enter image description here

  • Documentation: When building an UI Kit for documentation purposes, it would be crazy and absolutely useless to have an 80 color palette. You could easily say "use any color you want, for what I care..." and you'd get the same result.

enter image description here

  • Code Maintenance: Somehow similar to above. Let's say you want to change the color for links. You should change only 1 or 2 occurrences in most cases. However, if every link has different colors, your coder will go crazy trying to find each class between 80 possibilities.

  • Structure and Hierarchy based on best principles: If you check any framework or guideline such as Material Design, you'll see color structure revolve around a couple basic colors, and then some variation. This is accepted, known and expected. On the opposite side, I have never seen any structured UI using 80 colors!

Of course, I have to say it again: it will depend on your app/site. You NEED to research and track what are they colors used for, and then research with users how those colors affect usability and understanding of your site.

Finally, there are many resources on this subject. I'd recommend A guide to color and conversion where you'll be bale to understand how important is color (and restrictions on color)

1

Are the colours meaningful in your app?

I would say having a limited set of colours is important whenever there is a meaning attached to them. The number of colours used, however, can be various. For example, you can have different colours used for:

  • normal text
  • a link
  • a hovered
  • a visited link
  • an inactive link
  • a primary button
  • a secondary button
  • a disabled button
  • a hovered button
  • some status: ok/done indicator
  • another status for: wrong/error indicator
  • another status indicator saying there is an ongoing operation

As you can see, even though there could be some unification provided, this list already contains 12 colours. Should you add a creative layer (different colours for some headers for example, or for some inverted elements like menu (here on UX.SE menu background is dark and the Ask Question button is sunflower yellow), some special elements (e.g. badges here on UX.SE again) – this number increases. However, if these are still meaningful, I see no problem with them.

Is your app all about colours?

Regarding the topic or the visual aspect of it, there are some apps that are strictly about colours, e.g. they contain colour swatches or refer to some colours of physical things (e.g. paints).

Are there colours that are similar?

As 80 feels to be a quite high number, you could check if there are some close colours used to support the same kind of elements. For example, links here and there can use different shades of blue, barely visible to the eye, but still different. In these cases, the frontend developer might consider going through them just for the sake of an audit and maintenance of the code, to provide a cleaner css.

Are there colours that are not important at all?

This refers to the importance of the colours. As 80 feels just a little bit suspicious, you could consider going through them to see if particular colours are not important – they just trigger concern, but do not drive Users to any results that would be valuable for them.

  • Yes there are some color with minor differences as I mentioned in the question "Not all colours are very different colours, there are darker and lighter variations too." – Jitendra Vyas Apr 12 '17 at 20:09
  • I rather meant those that are obsolete: they look almost completely the same, but during implementation someone used e.g. FF4451 instead of FF4455 – Dominik Oslizlo Apr 12 '17 at 20:24
  • Yes that is happening sometime – Jitendra Vyas Apr 13 '17 at 3:19
1

It is important that your design has a maximum of three primary colors to maintain consistency, you can use variations of these primary colors to get new colors, 80 colors is too much.

You can consider these two links:

http://www.tigercolor.com/color-lab/tips/tip-01.html

How many primary colours should my web page design have?

:)

0

I tend to stick to only 3 colours in my UI but that is just my preference. There isn't a rule saying you can use only 3 colours.

With that said, the most important thing would be consistency in both your layouts and colours. The best example would be Google.com. They have been keeping their layout almost the same for all these years.

Consistency > Modern-looking.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.