Continuous Color Scales and Color Bars in Python

How to set, create and control continuous color scales and color bars in scatter, bar, map and heatmap figures.


New to Plotly?

Plotly is a free and open-source graphing library for Python. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

Continuous vs Discrete Color

In the same way as the X or Y position of a mark in cartesian coordinates can be used to represent continuous values (i.e. amounts or moments in time) or categories (i.e. labels), color can be used to represent continuous or categorical data. This page is about using color to represent continuous data, but Plotly can also represent categorical values with color.

Continuous Color Concepts

This document explains the following four continuous-color-related concepts:

  • color scales represent a mapping between the range 0 to 1 and some color domain within which colors are to be interpolated (unlike discrete color sequences which are never interpolated). Color scale defaults depend on the layout.colorscales attributes of the active template, and can be explicitly specified using the color_continuous_scale argument for many Plotly Express functions or the colorscale argument in various graph_objects such as layout.coloraxis or marker.colorscale in go.Scatter traces or colorscale in go.Heatmap traces. For example [(0,"blue"), (1,"red")] is a simple color scale that interpolated between blue and red via purple, which can also be implicitly represented as ["blue", "red"] and happens to be one of the built-in color scales and therefore referred to as "bluered" or plotly.colors.sequential.Bluered.
  • color ranges represent the minimum to maximum range of data to be mapped onto the 0 to 1 input range of the color scale. Color ranges default to the range of the input data and can be explicitly specified using either the range_color or color_continuous_midpoint arguments for many Plotly Express functions, or cmin/cmid/cmax or zmin/zmid/zmax for various graph_objects such as layout.coloraxis.cmin or marker.cmin in go.Scatter traces or cmin in go.Heatmap traces. For example, if a color range of [100, 200] is used with the color scale above, then any mark with a color value of 100 or less will be blue, and 200 or more will be red. Marks with values in between will be various shades of purple.
  • color bars are legend-like visible representations of the color range and color scale with optional tick labels and tick marks. Color bars can be configured with attributes inside layout.coloraxis.colorbar or in places like marker.colorbar in go.Scatter traces or colorbar in go.Heatmap traces.
  • color axes connect color scales, color ranges and color bars to a trace's data. By default, any colorable attribute in a trace is attached to its own local color axis, but color axes may also be shared across attributes and traces by setting e.g. marker.coloraxis in go.Scatter traces or coloraxis in go.Heatmap traces. Local color axis attributes are configured within traces e.g. marker.showscale whereas shared color axis attributes are configured within the Layout e.g. layout.coloraxis.showscale.

Continuous Color with Plotly Express

Most Plotly Express functions accept a color argument which automatically assigns data values to continuous color if the data is numeric. If the data contains strings, the color will automatically be considered discrete (also known as categorical or qualitative). This means that numeric strings must be parsed to be used for continuous color, and conversely, numbers used as category codes must be converted to strings.

For example, in the tips dataset, the size column contains numbers:

In [1]:
import plotly.express as px
df = px.data.tips()
fig = px.scatter(df, x="total_bill", y="tip", color="size",
                 title="Numeric 'size' values mean continuous color")

fig.show()
1020304050246810
123456sizeNumeric 'size' values mean continuous colortotal_billtip

Converting this column to strings is very straightforward:

In [2]:
import plotly.express as px
df = px.data.tips()
df["size"] = df["size"].astype(str)
fig = px.scatter(df, x="total_bill", y="tip", color="size",
                 title="String 'size' values mean discrete colors")

fig.show()
1020304050246810
size234165String 'size' values mean discrete colorstotal_billtip

If you have stringified numbers you can convert back just as easily:

In [3]:
import plotly.express as px
df = px.data.tips()
df["size"] = df["size"].astype(str)
df["size"] = df["size"].astype(float)
fig = px.scatter(df, x="total_bill", y="tip", color="size",
                 title="Numeric 'size' values mean continuous color")

fig.show()
1020304050246810
123456sizeNumeric 'size' values mean continuous colortotal_billtip

Colorscales in Dash

Dash is the best way to build analytical apps in Python using Plotly figures. To run the app below, run pip install dash, click "Download" to get the code and run python app.py.

Get started with the official Dash docs and learn how to effortlessly style & deploy apps like this with Dash Enterprise.

Out[4]:

Sign up for Dash Club → Free cheat sheets plus updates from Chris Parmer and Adam Schroeder delivered to your inbox every two months. Includes tips and tricks, community apps, and deep dives into the Dash architecture. Join now.

Color Scales in Plotly Express

By default, Plotly Express will use the color scale from the active template's layout.colorscales.sequential attribute, and the default active template is plotly which uses the Plasma color scale. You can choose any of the built-in color scales, however, or define your own.

Here is an example that creates a scatter plot using Plotly Express, with points colored using the Viridis color scale.

In [5]:
import plotly.express as px
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length",
                 color="sepal_length", color_continuous_scale=px.colors.sequential.Viridis)

fig.show()
22.533.544.54.555.566.577.58
4.555.566.577.5sepal_lengthsepal_widthsepal_length

It is also possible to specify color scales by name. Here is an example that specifies the Inferno color scale by name, as a string

In [6]:
import plotly.express as px
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length",
                 color="sepal_length", color_continuous_scale='Inferno')

fig.show()
22.533.544.54.555.566.577.58
4.555.566.577.5sepal_lengthsepal_widthsepal_length

Reversing a built-in color scale

You can reverse a built-in color scale by appending _r to its name, for color scales given either as a string or a plotly object.

In [7]:
import plotly.express as px
df = px.data.gapminder().query("year == 2007").sort_values(by="lifeExp")
fig = px.bar(df, y="continent", x="pop", color="lifeExp", orientation="h",
             color_continuous_scale='Bluered_r', hover_name="country")

fig.show()
00.5B1B1.5B2B2.5B3B3.5B4BAfricaAsiaAmericasEuropeOceania
404550556065707580lifeExppopcontinent
In [8]:
import plotly.express as px
data = [[1, .3, .5, .9],
        [.3, .1, .4, 1],
        [.2, .8, .9, .3]]
fig = px.imshow(data, color_continuous_scale=px.colors.sequential.Cividis_r)
fig.show()
01232.521.510.50−0.5
0.10.20.30.40.50.60.70.80.91

Explicitly Constructing a Color scale

The Plotly Express color_continuous_scale argument accepts explicitly-constructed color scales as well:

In [9]:
import plotly.express as px
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="sepal_length",
                 color_continuous_scale=["red", "green", "blue"])

fig.show()
22.533.544.54.555.566.577.58
4.555.566.577.5sepal_lengthsepal_widthsepal_length

The example above provided a list of CSS colors to construct a scale, which inferred the reference points to be evenly spaced, but specific reference points can be provided as well. The following example has the same result:

In [10]:
import plotly.express as px
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="sepal_length",
                 color_continuous_scale=[(0, "red"), (0.5, "green"), (1, "blue")])

fig.show()
22.533.544.54.555.566.577.58
4.555.566.577.5sepal_lengthsepal_widthsepal_length

Constructing a Discrete or Discontinuous Color Scale

You can create a discrete color scale, with discontinuous color, by setting the same reference point twice in a row. This is useful for example with chart types that don't support discrete colors, like Parallel Coordinates plots. See below for how to customize tick text.

In [11]:
import plotly.express as px
df = px.data.iris()
fig = px.parallel_coordinates(df, color="species_id",
                             color_continuous_scale=[(0.00, "red"),   (0.33, "red"),
                                                     (0.33, "green"), (0.66, "green"),
                                                     (0.66, "blue"),  (1.00, "blue")])
fig.show()
11.522.53species_id4.555.566.577.5sepal_length7.94.322.533.54sepal_width4.42123456petal_length6.910.511.522.5petal_width2.50.111.21.41.61.822.22.42.62.83species_id31

Explicitly setting a Color Range

When using the range of the input data as the color range is inappropriate, for example when producing many figures which must have comparable color ranges, or to clip the color range to account for outliers, the Plotly Express range_color argument can be used. Here we clip the top of the color range above the lower range of the data and extend it below the lower range of the data:

In [12]:
import plotly.express as px
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="sepal_length", range_color=[5,8])

fig.show()
22.533.544.54.555.566.577.58
55.566.577.58sepal_lengthsepal_widthsepal_length

Setting the Midpoint of a Color Range for a Diverging Color scale

Diverging color scales have a well-defined midpoint color, and are best-used when that midpoint is mapped to a meaningful data value. The color_continuous_midpoint argument to most Plotly Express functions is used for this. It cannot be used with range_color because setting it forces the color range to be centered on the midpoint while including the entire dataset. This means that for asymmetric data distributions, not all colors in the color scale will appear in the figure.

For example, a diverging color scale could be used to highlight points with a higher and lower value than the median in a choropleth map like this:

In [13]:
import plotly.express as px

df = px.data.gapminder().query("year == 2007")
avg_lifeExp = (df['lifeExp']*df['pop']).sum()/df['pop'].sum()

fig = px.choropleth(df, locations="iso_alpha", color="lifeExp",
                    color_continuous_scale=px.colors.diverging.BrBG,
                    color_continuous_midpoint=avg_lifeExp,
                    title="World Average Life Expectancy in 2007 in years was %.1f" % avg_lifeExp)
fig.show()
405060708090lifeExpWorld Average Life Expectancy in 2007 in years was 68.9

Hiding or Customizing the Plotly Express Color Bar

Plotly Express binds all traces to layout.coloraxis, rather than using trace-specific color axes. This means that the color bar can configured there, for example it can be hidden:

In [14]:
import plotly.express as px
df = px.data.tips()
fig = px.density_heatmap(df, x="total_bill", y="tip", title="No color bar on this density plot")

fig.update_layout(coloraxis_showscale=False)

fig.show()
010203040500246810
No color bar on this density plottotal_billtip

You can also configure the title, size, placement and tick marks and labels on a color bar:

In [15]:
import plotly.express as px
df = px.data.tips()
fig = px.density_heatmap(df, x="total_bill", y="tip", title="Customized color bar on this density plot")

fig.update_layout(coloraxis_colorbar=dict(
    title=dict(text="Number of Bills per Cell"),
    thicknessmode="pixels", thickness=50,
    lenmode="pixels", len=200,
    yanchor="top", y=1,
    ticks="outside", ticksuffix=" bills",
    dtick=5
))

fig.show()
010203040500246810
0 bills5 bills10 bills15 bills20 bills25 bills30 billsNumber of Bills per CellCustomized color bar on this density plottotal_billtip

Customizing Tick Text on Discrete Color Bars

This is the same example as the Parallel Coordinates plot above, with customized tick text for species:

In [16]:
import plotly.express as px
df = px.data.iris()
fig = px.parallel_coordinates(df, dimensions=["sepal_length", "sepal_width", "petal_length", "petal_width"],
                             color="species_id", range_color=[0.5, 3.5],
                             color_continuous_scale=[(0.00, "red"),   (0.33, "red"),
                                                     (0.33, "green"), (0.66, "green"),
                                                     (0.66, "blue"),  (1.00, "blue")])

fig.update_layout(coloraxis_colorbar=dict(
    title=dict(text="Species"),
    tickvals=[1,2,3],
    ticktext=["setosa","versicolor","virginica"],
    lenmode="pixels", len=100,
))
fig.show()
setosaversicolorvirginicaSpecies4.555.566.577.5sepal_length7.94.322.533.54sepal_width4.42123456petal_length6.910.511.522.5petal_width2.50.1

Customizing Tick Text on Logarithmic Color Bars

You can customize text on a logarithmic color bar to make it more readable:

In [17]:
import plotly.express as px
import numpy as np

df = px.data.gapminder().query("year == 2007")
fig = px.scatter(df, y="lifeExp", x="pop", color=np.log10(df["pop"]), hover_name="country", log_x=True)

fig.update_layout(coloraxis_colorbar=dict(
    title=dict(text="Population"),
    tickvals=[6,7,8,9],
    ticktext=["1M", "10M", "100M", "1B"],
))
fig.show()
251M2510M25100M251B240455055606570758085
1M10M100M1BPopulationpoplifeExp

Using Label Aliases on Colorbars

New in 5.14

Using labelalias you can replace some labels on the colorbar with alternative values. In this example, the colorbar has five tickvals. Using labelalias, instead of displaying all labels as the numbers in tickvals, we swap out three of the labels for text.

In [18]:
import plotly.graph_objects as go

import urllib.request as request
import json

# Load heatmap data
response = request.urlopen(
    "https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json")
dataset = json.load(response)

# Create and show figure
fig = go.Figure()

fig.add_trace(go.Heatmap(
    z=dataset["z"],
    colorbar=dict(
        title=dict(
            text="Surface Heat",
            side="top",
        ),
        tickmode="array",
        tickvals=[2, 25, 50, 75, 100],
        labelalias={100: "Hot", 50: "Mild", 2: "Cold"},
        ticks="outside"
    )
))

fig.show()
010203040010203040
Cold25Mild75HotSurface Heat

Custom Discretized Heatmap Color scale with Graph Objects

In [19]:
import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Heatmap(
    z=[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]],
    colorscale=[
        # Let first 10% (0.1) of the values have color rgb(0, 0, 0)
        [0, "rgb(0, 0, 0)"],
        [0.1, "rgb(0, 0, 0)"],

        # Let values between 10-20% of the min and max of z
        # have color rgb(20, 20, 20)
        [0.1, "rgb(20, 20, 20)"],
        [0.2, "rgb(20, 20, 20)"],

        # Values between 20-30% of the min and max of z
        # have color rgb(40, 40, 40)
        [0.2, "rgb(40, 40, 40)"],
        [0.3, "rgb(40, 40, 40)"],

        [0.3, "rgb(60, 60, 60)"],
        [0.4, "rgb(60, 60, 60)"],

        [0.4, "rgb(80, 80, 80)"],
        [0.5, "rgb(80, 80, 80)"],

        [0.5, "rgb(100, 100, 100)"],
        [0.6, "rgb(100, 100, 100)"],

        [0.6, "rgb(120, 120, 120)"],
        [0.7, "rgb(120, 120, 120)"],

        [0.7, "rgb(140, 140, 140)"],
        [0.8, "rgb(140, 140, 140)"],

        [0.8, "rgb(160, 160, 160)"],
        [0.9, "rgb(160, 160, 160)"],

        [0.9, "rgb(180, 180, 180)"],
        [1.0, "rgb(180, 180, 180)"]
    ],
    colorbar=dict(
        tick0=0,
        dtick=1
    )
))

fig.show()
02468−0.4−0.200.20.4
0123456789

Color scale for Scatter Plots with Graph Objects

In [20]:
import plotly.graph_objects as go

fig = go.Figure()

# Create list from 0 to 39 to use as x, y, and color
values = list(range(40))

fig.add_trace(go.Scatter(
    x=values,
    y=values,
    marker=dict(
        size=16,
        cmax=39,
        cmin=0,
        color=values,
        colorbar=dict(
            title=dict(text="Colorbar")
        ),
        colorscale="Viridis"
    ),
    mode="markers"))

fig.show()
05101520253035400510152025303540
05101520253035Colorbar

Color scale for Contour Plot with Graph Objects

In [21]:
import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Contour(
    z=[[10, 10.625, 12.5, 15.625, 20],
       [5.625, 6.25, 8.125, 11.25, 15.625],
       [2.5, 3.125, 5., 8.125, 12.5],
       [0.625, 1.25, 3.125, 6.25, 10.625],
       [0, 0.625, 2.5, 5.625, 10]],
    colorscale="Cividis",
))

fig.show()
00.511.522.533.5400.511.522.533.54
048121620

Custom Heatmap Color scale with Graph Objects

In [22]:
import plotly.graph_objects as go

import urllib
import json

response = urllib.request.urlopen(
    "https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json"
)

dataset = json.load(response)

fig = go.Figure()

fig.add_trace(go.Heatmap(
    z=dataset["z"],
    colorscale=[[0.0, "rgb(165,0,38)"],
                [0.1111111111111111, "rgb(215,48,39)"],
                [0.2222222222222222, "rgb(244,109,67)"],
                [0.3333333333333333, "rgb(253,174,97)"],
                [0.4444444444444444, "rgb(254,224,144)"],
                [0.5555555555555556, "rgb(224,243,248)"],
                [0.6666666666666666, "rgb(171,217,233)"],
                [0.7777777777777778, "rgb(116,173,209)"],
                [0.8888888888888888, "rgb(69,117,180)"],
                [1.0, "rgb(49,54,149)"]]
))

fig.show()
010203040010203040
20406080100

Setting the Midpoint of a Diverging Color scale with Graph Objects

The following example uses the marker.cmid attribute to set the mid-point of the color domain by scaling 'cmin' and/or 'cmax' to be equidistant to this point. It only has impact when marker.color sets to a numerical array, and 'marker.cauto' is True.

In [23]:
import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(go.Scatter(
    y=list(range(-5,15)),
    mode="markers",
    marker={"size": 25, "color": list(range(-3,10)), "cmid": 0}))

fig.show()
05101520−5051015

The heatmap chart uses marker.zmid attribute to set the mid-point of the color domain.

In [24]:
import plotly.graph_objects as go

a = list(range(-10,5))
b = list(range(-5,10))
c = list(range(-5,15))

fig = go.Figure(go.Heatmap(
    z=[a, b, c],
    colorscale='RdBu',
    zmid=0))

fig.show()
051015−0.500.511.522.5
−10−50510

Custom Contour Plot Color scale with Graph Objects

In [25]:
import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Contour(
    z=[[10, 10.625, 12.5, 15.625, 20],
       [5.625, 6.25, 8.125, 11.25, 15.625],
       [2.5, 3.125, 5., 8.125, 12.5],
       [0.625, 1.25, 3.125, 6.25, 10.625],
       [0, 0.625, 2.5, 5.625, 10]],
    colorscale=[[0, "rgb(166,206,227)"],
                [0.25, "rgb(31,120,180)"],
                [0.45, "rgb(178,223,138)"],
                [0.65, "rgb(51,160,44)"],
                [0.85, "rgb(251,154,153)"],
                [1, "rgb(227,26,28)"]],
))

fig.show()
00.511.522.533.5400.511.522.533.54
048121620

Custom Color bar Title, Labels, and Ticks with Graph Objects

Like axes, you can customize the color bar ticks, labels, and values with ticks, ticktext, and tickvals.

In [26]:
import plotly.graph_objects as go

import urllib
import json

# Load heatmap data
response = urllib.request.urlopen(
    "https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json")
dataset = json.load(response)

# Create and show figure
fig = go.Figure()

fig.add_trace(go.Heatmap(
    z=dataset["z"],
    colorbar=dict(
        title=dict(
            text="Surface Heat",
            side="top",
        ),
        tickmode="array",
        tickvals=[2, 50, 100],
        ticktext=["Cool", "Mild", "Hot"],
        ticks="outside"
    )
))

fig.show()
010203040010203040
CoolMildHotSurface Heat

Color Bar Displayed Horizontally

By default, color bars are displayed vertically. You can change a color bar to be displayed horizontally by setting the colorbar orientation attribute to h.

In [27]:
import plotly.graph_objects as go

import urllib
import json

# Load heatmap data
response = urllib.request.urlopen(
    "https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json")
dataset = json.load(response)

# Create and show figure
fig = go.Figure()

fig.add_trace(go.Heatmap(
    z=dataset["z"],
    colorbar=dict(orientation='h')))

fig.show()
010203040010203040
20406080100

Sharing a Color Axis with Graph Objects

To share colorscale information in multiple subplots, you can use coloraxis.

In [28]:
import plotly.graph_objects as go
from plotly.subplots import make_subplots

fig = make_subplots(1,2)

fig.add_trace(
 go.Heatmap(x = [1, 2, 3, 4], z = [[1, 2, 3, 4], [4, -3, -1, 1]], coloraxis = "coloraxis"), 1,1)

fig.add_trace(
 go.Heatmap(x = [3, 4, 5, 6], z = [[10, 2, 1, 0], [4, 3, 5, 6]], coloraxis = "coloraxis"),1,2)
fig.update_layout(coloraxis = {'colorscale':'viridis'})

fig.show()
1234−0.500.511.53456−0.500.511.5
−20246810

Logarithmic Color scale with Graph Objects

In [29]:
import plotly.graph_objects as go

fig = go.Figure(go.Heatmap(
    z= [[10, 100.625, 1200.5, 150.625, 2000],
       [5000.625, 60.25, 8.125, 100000, 150.625],
       [2000.5, 300.125, 50., 8.125, 12.5],
       [10.625, 1.25, 3.125, 6000.25, 100.625],
       [0, 0.625, 2.5, 50000.625, 10]],
    colorscale= [
        [0, 'rgb(250, 250, 250)'],        #0
        [1./10000, 'rgb(200, 200, 200)'], #10
        [1./1000, 'rgb(150, 150, 150)'],  #100
        [1./100, 'rgb(100, 100, 100)'],   #1000
        [1./10, 'rgb(50, 50, 50)'],       #10000
        [1., 'rgb(0, 0, 0)'],             #100000

    ],
    colorbar= dict(
        tick0= 0,
        tickmode= 'array',
        tickvals= [0, 1000, 10000, 100000]
    )
))

fig.show()
0123401234
0100010k100k

Positioning Colorbars

Colorbars can be positioned by specifying x and y coordinates. By default, the x and y values are "paper" coordinates, which refer to the plot area. You can also use coordinates based on the "container" by setting xref="container" or yref="container". The following example uses a container reference for the x position.

See the positioning section of the figure data structure page for more details on "paper" vs "container" coordinates.

In [30]:
import plotly.graph_objects as go

import urllib
import json

# Load heatmap data
response = urllib.request.urlopen(
    "https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json")
dataset = json.load(response)

# Create and show figure
fig = go.Figure(go.Heatmap(
    z=dataset["z"],
    colorbar=dict(
        x=0.2,
        xref="container",
        title=dict(text="Surface Heat")
    )
))

fig.show()
010203040010203040
20406080100Surface Heat

Reference

See https://plotly.com/python/reference/ for more information and chart attribute options!

What About Dash?

Dash is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library.

Learn about how to install Dash at https://dash.plot.ly/installation.

Everywhere in this page that you see fig.show(), you can display the same figure in a Dash application by passing it to the figure argument of the Graph component from the built-in dash_core_components package like this:

import plotly.graph_objects as go # or plotly.express as px
fig = go.Figure() # or any Plotly Express function e.g. px.bar(...)
# fig.add_trace( ... )
# fig.update_layout( ... )

from dash import Dash, dcc, html

app = Dash()
app.layout = html.Div([
    dcc.Graph(figure=fig)
])

app.run_server(debug=True, use_reloader=False)  # Turn off reloader if inside Jupyter