I think we are up to Part 9 of our often interrupted feature posts on the building of our new human resources SaaS app HR Partner. I've lost count a little bit, but today I wanted to talk about one of the design issues we came across when creating the dashboard.
We love using the little pie charts from chartJS to show the relative breakdowns of male/female employees, or distribution across departments and employment statuses. The issue was, we didn't know how to best create a colour palette for the pie segments. You see, our users can have anything from one to many dozens of pie slices, depending on their organisation and operating requirements.
For this reason, we didn't want to create a set number of colours in our palette, mainly in case our customers exceeded this limit. We also didn't want to generate totally random segment colours each time the chart was generated because I believe that a part of a good UX is consistency, i.e. if a customer is used to seeing light blue for the department 'Finance', then seeing it as a dark red next time can throw them off.
Additionally, one of the big features of HR Partner is that HR consultants may work across completely different company entities on a day to day basis, and it would be nice if the Finance department in one company dashboard was the same colour as the Finance department in a totally separate company.
For that reason, we decided to set the segment colours based on the segment names. So the name 'Finance' would generate the same colour on ANY company.
Our first efforts at this resulted in some quite garish colour choices which was not pleasing at all, so in the end I decided that we would try and restrict the colours to lighter pastel hues that wouldn't clash too much, but still be fairly easy to discern.
Secondly, I also realised that because our algorithm was only taking the first 6 characters of the name, there could be collisions with similar department or employment statuses (e.g. 'Part time' and 'Part time permanent' would result in the same colour). I also wanted similar sounding names (like 'Finance' and 'Final') to generate colours that were not too similar to each other, so I decided to do a simple MD5 hash on the name to generate a semi unique hash upon which to generate the colour.
Here is the Ruby helper method that we use to create the colour for the view. It simply takes a text seed string, and generates a CSS hexadecimal code for the colour.
def get_pastel_colour(seed)
# Generate a pleasing pastel colour from a fixed string seed
colrstr = Digest::MD5.hexdigest(seed)[0..5]
red = ((colrstr[0..1].to_i(16).to_f / 255) * 127).to_i + 127
green = ((colrstr[2..3].to_i(16).to_f / 255) * 127).to_i + 127
blue =((colrstr[4..5].to_i(16).to_f / 255) * 127).to_i + 127
"#" + "%02X" % red + "%02X" % green + "%02X" % blue
end
I think it ended up quite pleasing to the eye. We ended up using the same code to generate the colour within the calendars too, to get consistency with respect to leave categories.
I'd love to hear from other developers on how to improve on this so the colours can be a little brighter and stand out from each other a little more.
Disclaimer: Not saying we were the first to ever 'invent' this method, but there wasn't a lot that I could find on Google, so I thought I would post here in the hopes that it might help someone else who needed something similar. The code above is based on something I found on StackOverflow, but I cannot find it again now to post proper attribution.