How to assign a RGB background color to a Quarto dashboard valuebox?

Question

Consider the following quarto dashboard:

---
title: "Test"
format: dashboard
---

```{python}
#| content: valuebox
#| title: "Test Box"
dict(value=10, color="red") 
```

How can I define the background color of the valuebox dynamically using RGB colors? I am probably missing the correct syntax.

Doing it like this doesn't lead to the expected result:

---
title: "Test"
format: dashboard
---

```{python}
#| content: valuebox
#| title: "Test Box"
dict(value=10, color="background-color: rgb(255,0,0)") 
```

what if you try: style="background-color: rgb(255,0,0)" instead of color? — RCDevs Security
– RCDevs Security, Commented Jul 4 at 14:18
@RCDevsSecurity Doesn't work. But you're right, what they've tried shouldn't work, because color attribute is not a style, and is just the name of background-color (so color="background-color:..." is redundant (and anyway syntaxically wrong). While color=rgb(255,0,0) should work, according to documentation. But doesn't. — chrslg
– chrslg, Commented Jul 4 at 14:21

Jan · Accepted Answer · 2025-07-04 14:22:19Z

2

You can convert the rgb values to hex:

---
title: "Test"
format: dashboard
---

```{python}
#| content: valuebox
#| title: "Test Box"
dict(value=10, color='#%02x%02x%02x' % (255, 0, 0))
```

answered Jul 4 at 14:22

Jan

11.9k7 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chrslg · Accepted Answer · 2025-07-04 16:46:45Z

0

Well, I just discovered quarto, so I may be unaware of subtleties.

But my first shot in the dark attempt worked

---
title: "Test"
format: dashboard
---

```{python}
#| content: valuebox
#| title: "Test Box"
dict(value=10, color="#f88868") 

```

In the mean time I found some documentation. So I am a bit more aware of what I am doing than with my 1st lucky shot in the dark.

Firstly, color is for background-color only.

So color="backgroundcolor: rgb(255,0,0)" is not only redundant (you are saying that background color is "backgroundcolor:..."), but incorrect. What is expected in the color attribute is just a color, the one of the background. Meaning that you can't (but that wasn't your question anyway) set the foreground color (actually, you can. But by going behind quarto's back, and tweaking CSS your self, injecting your own css style. So, almost hacking, and clearly in quarto's author mind, that is not what normal people should do)

Now, according to doc, color=rgb(255,0,0) that you've probably tried also should work. But it doesn't. Because doc say that "any CSS color can be used". And rgb(255,0,0) is a valid color to use anywhere you specify colors in CSS.
As is #ff0000, that works.

When you inspect the generated html you get a hint about what is happening.

When I use #ff0000, I see that generated html contains a style="background-color: #ff0000", while when I use rgb(255,0,0), what I see is a (syntaxically wrong) class=bg-rgb(255,0,0).

So obviously, what is meant to happen is that is color attribute is one of those that have some specific class in quarto, like red or danger or success, it generates some html with class bg-red, bg-danger, bg-success. While when color is some generic css color, which doesn't match a predefined class, it generates an ad-hoc style=....

#ff0000 is correctly detected as some generic "not a predefined class name" color. rgb(255,0,0) is not.

IMHO, that is a bug (even without intend to support rgb(...) colors, the default behavior should be, as long as the bg-xxx class doesn't exist, to pass the torch to html/css. That is to convert any color=xxx where bg-xxx is one of the few predefined class as class=bg-xxx, and anything else as style="background-color:xxx". But maybe they fear some kind of CSS injection attack. Would be a bit strange, since it is possible to inject CSS anyway. Normally a code is not supposed to protect itself against hacking by its own developer. But maybe they want that color attribute to be able to come from end user (like color=input("please choose a background color >") then color=color. But even if that is the explanation, I think it would be better to just warn not do to that. Point is, I fail to see any reasonable explanation, other than a bug, for rgb(255,0,0) not to work, and generally speaking for anythingThatIsUnderstoodByCSSAndIsNotAPredifinedBg-class to work

edited Jul 4 at 16:46

answered Jul 4 at 14:05

chrslg

15.2k11 gold badges26 silver badges42 bronze badges

4 Comments

chrslg Jul 4 at 14:07

(I should have used #ff0000 to reproduce your rgb(255,0,0) attempt. But I wanted to be sure that it wasn't my first trial with your initial red getting in the way :D)

Andi Jul 4 at 14:14

I only have the rgb values at hand.

chrslg Jul 4 at 14:37

#ff0000 are rgb. In hex. If you want decimal values (and don't want to convert them yourself in hex), you can (as the other answer suggest) convert them on the fly (which is what you would have to do any way, if those values are in variables — in which case they aren't decimal more than hex, yet you have to render them). Like with the % notation. Or with more modern (but % notation is fine, and is not obsolete, and won't be) f"#{r:02x}{g:02x}{b:02x}", r,g and b being the values (hard coded decimal or variables, or any expression). Like f"#{255:02x}{0:02x}{0:02x}"

Andi Jul 4 at 15:21

Yes, I tried color=rgb(255,0,0) as is described in the docs. I agree that this is probably a bug. Thank you for this detailed answer!

Collectives™ on Stack Overflow

How to assign a RGB background color to a Quarto dashboard valuebox?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related