Question about making opacity to a colorscale

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!

Hope someone would help me . Thanks !

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?

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

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

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.

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:

    [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!


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.


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

1 Like

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

1 Like

Can we have this happen automatically corresponding to the opacity of the trace in question? Set the opacity of the colorscale to match the opacity of the trace.