Question about making opacity to a colorscale


#1

Hi,
I’m currently making a heatmap. I saw examples assign colorscale like’ colorscale: “Reds”’.
However, I now want to assign the colorscale in one particular color with various opacity.
For example, if I assign the color to be (255,177,44,0), my expecting colorscale is this color with various opacity. How can I do this?
Thanks a lot!


#2

Hope someone would help me . Thanks !


#3

Do you mean actual opacity (translucent to red) or a color scale ranging from white to red, where you can choose the exact shade for each step?


#4

I mean translucent to red, the actual opacity. Thanks!


#5

Got it. Have you tried “rgba(#, #, #, 0.5)” and adjusting that last argument for opacity?


#6

Oh I see. But how to make it into a ‘colorscale’ that will automatic assign opacity to different values? Let’s assume using it in a heatmap.


#7

To create a custom colorscale you have to create a list of lists where each pair of list item has the format of : [begining_bin_point , color], [ending_bin_point , color]

So if you have five colors that you want to distribute evenly, it would be:

colorscale=[
    [0.0, color_1],
    [0.2, color_1],

    [0.2, color_2],
    [0.4, color_2],

    [0.4, color_3],
    [0.6, color_3],

    [0.6, color_4],
    [0.8, color_4],

    [0.8, color_5],
    [1.0, color_5],
]

And for your case, you could make each color a rgba value in string format!

Reference: https://plot.ly/python/colorscales/


#8

Whoops, that is the answer for python, but it is quite similar in javascript. The only difference is that you don’t have to provide the end_bin_point, just the start.

Reference: https://plot.ly/javascript/colorscales/


#9

Yes. I combine your answer and lizzi’s and it helps! Thank you!


#10

I combine yours with mbkupfer’s answer and it works! Thank you!