1

all.

My company wants to use our own internal styles for our heat maps. Therefore, I have a list of colors that I need to sort by heat (I have hex, rgb, and hsl values to work with). However, I can't seem to find any online color calculators or sorters that will help sort colors in this particular way. The colors I need sorted are:

#FEB01E
#EEC847
#90AB06
#70AD47
#81BE67
#2BA9AA
#527B6A
#3F678C
#72327A
#525252
#5B9BD5
#F27863
#F6B5A4
#FFEBBD
#C74C2A

Picture added so you can see the colors:

Colors to sort

If anyone has any ideas, I'm open to them. I tried to sort them a bit on my own, but I'm certain it's not correct. Any help is appreciated!

2

I'd recommend, if at all possible, to pick only 2 or 3 colors to represent your coldest, (optionally middle), and hottest points in your values, and calculate the gradient between them based on however many steps you'd like in your heat map.

In this way, you'd be able to display a scale of colors that blends fluidly between a subset of your company's theme colors. This is important in a heat map, because the gradient must be obvious to provide any meaning.

Color perception differs, and meanings or weights that we give colors varies (for example, many of the colors you placed in your order, I might have considered placing other places, and that's neither right or wrong). However, if there's a more fluid gradient established, and you provide this key alongside your heat map labeling what's coldest and what's hottest, much of this ambiguity can be mitigated.

For example, I chose three of the colors you provided and created a scale from that which should more immediately provide a sense of coldest to hottest, while still being within your company's theme.

Scale using three of the provided colors

  • Awesome! So how did you generate this scale? – lemonbars May 1 at 18:09
  • I used Google Sheets (but any spreadsheet application should support this), typed in the values I'd like to style, select the cells, Format > Conditional formatting... > Color scale, add a midpoint at the 50th percentile, and drop in the colors you'd like. Google support article on custom formatting. – maxathousand May 1 at 18:15
  • You're a lifesaver! Thank you! – lemonbars May 1 at 19:52
  • If you're looking for a programmatic solution, this question on Stack Overflow discusses how to calculate HSL colour definitions for smooth heat-map gradients – cloudworks May 7 at 12:19

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.