0

I am developing some kind of heatmap for a stock market-related project which has ~80 large to small boxes on the screen to denote a stock and it's change

I use a red background on box to denote loss, and green background to signifies gain. I use white text with a stroke to display some text on them.

Here is what I need now.

  1. I need to have special boxes which are also red and green, but I want them to have a different colour variation so they stand out as special.

  2. On these normal and special boxes, I also need to write some text in red and green variation to write more details.

How do I find good colour combinations to achieve my goal?

enter image description here

Improve this question
4
  • A good plotting library should do this sort of thing for you. For example with Seaborn
    – Zach Saucier
    May 12, 2021 at 12:23
  • @ZachSaucier The project is in later stages and I can't change the library anymore. I use highcharts if it helps.
    – CodePanda
    May 12, 2021 at 12:27
  • @CodePanda I'm not fully sure what your problem is, but does this help? materialui.co/colors
    – Vikas
    May 13, 2021 at 5:16
  • 1
    I don't really understand the question, but it sounds like a coding question. Whatever it is, I have a strong feeling Chroma JS would be able to do what you want. I made a small example with Chroma JS. In my example the idea is that the text color is made darker or lighter based on the background color to make sure the contrast stays even. The simpler example might be white bg vs black bg, so I added a B&W toggle in the left corner. All text color modifications happen inside the method getContrastingColor.
    – Joonas
    May 14, 2021 at 8:44

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.