Skip to content

Make it possible to use an alpha channel with Hex colors #7389

Closed

Description

@12rambau

I'm using dash to create company compliant graphs so I'm using a custom ste of colors that are provided by the communication team in a company mini-package. I get them as hex colors.

I would like to create a "in between" and thus change the alpha channel of my color to make half transparent.

As in this plotting:

import plotly.graph_objects as go
from matplotlib.colors import to_rgb

color = "#4E9D2D"

fig = go.Figure()
fig.add_trace(go.Scatter(x=[1, 2, 3, 4], y=[3, 4, 8, 3],
    fill=None,
    mode='lines',
    line = {"width": 0},
    ))
fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4],
    y=[1, 6, 2, 6],
    fill='tonexty',
    mode='lines',
    line = {"width": 0},
    fillcolor=f"rgba({','.join([str(int(c*255)) for c in to_rgb(color)])}, .1)"
))

fig.show()

Image

Currently color specifier are supporting:

  • A hex string (e.g. '#ff0000')
  • An rgb/rgba string (e.g. 'rgb(255,0,0)')
  • An hsl/hsla string (e.g. 'hsl(0,100%,50%)')
  • An hsv/hsva string (e.g. 'hsv(0,100%,100%)')
  • A named CSS color

In my use case that forces me to use this horrible line to create the half transparent color in rgba:

f"rgba({','.join([str(int(c*255)) for c in to_rgb(color)])}, .1)"

I cannot rely on the to_rgba function becasue you expect the 3 first digit to be int between 0 and 255 and the alpha channel as float when the matplotlib standard is giving me everything as a float.

What I would love to do is being allowed to add 2 extra digit to my hex chain to provide the alpha channel as :

color = f"{color}1a"

It's compatible with the other plotting tools I'm using (bokeh and matplotlib) but not with yours could you add the support for it ?

Activity

  1. transferred this issue fromplotly/dashon Mar 14, 2025
  2. changed the title [-][Feature Request]Make it possible to use an alpha channel with Hex colors[/-] [+]Make it possible to use an alpha channel with Hex colors[/+] on Mar 14, 2025
  3. added
    P2considered for next cycle
    cscustomer success
    on Mar 14, 2025
  4. camdecoster commented on Aug 13, 2025

    @camdecoster
    Contributor

    plotly.js (via the TinyColor library) already supports these types of colors. plotly.py will have to be updated to make this work. There's an open issue regarding allowing modern CSS color syntax. Hex colors with alpha aren't mentioned, but it can be taken care of in the same PR. I'm closing this issue in favor of that one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2considered for next cyclecscustomer successfeaturesomething new

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions