What are the Hex numbers for transparency?

What I’m trying to do

I’m trying to change some of the colors to transparent for the Minimal Theme using Style Settings plugin. Some of them begin as transparent, but once you change to a color I cannot seem to change them back to transparent. Does anyone know the HEX numbers for this? Or is there another way I’m overlooking. Thanks.

Things I have tried

I’ve tried to search for this.

Eight character hex codes do work in Obsidian. Using this CSS snippet,

.HyperMD-header-1 {
    background-color: #cccccc80;
}

I’m changing #cccccc80#cccccc60#cccccc40#cccccc20.

CleanShot 2024-04-02 at 09.10.00

Unfortunately they don’t seem to work in Minimal’s Style Settings.

I also tried to put in rgba(204, 204, 204, 0.5),

but when I hit save, it reverts to rgba(204, 204, 204, 1).


I tried with another theme and both #cccccc50 and rgba(204, 204, 204, 0.5) are fine in Style Settings.

I think the issue may be here. Minimal’s setting for h1 color:

Screenshot 2024-04-02 at 9.29.18

Shiba Inu’s setting for h1 color:

Screenshot 2024-04-02 at 9.29.52


You could raise an issue on Minimal’s GitHub page, or skip Style Settings and use CSS snippets to make any color changes.

edit: opacity: true is defined in a bunch of spots for Minimal’s Style Settings, so it may be hit or miss depending on what’s being changed.

3 Likes

I had marked this for answering, but I see @ariehen beat me to it… :face_holding_back_tears:

He’s in general more knowledgeable than me regarding CSS, but I wanted to chime in with a little bit of information as well. As he already said, a six-letter code is just the RGB values, however if you provide the eight-letter variant it transforms into a RGBA value which some of the settings of the Style Settings plugin accepts.

My preferred way for settings such values are to openthe color picker find a color which seems nice, and then select the HSL button next to the Save button. This switches the input fields to hsla() with values predefined to match your current color, and the last value in that quadruple is related to the transparency.
image

So you could try playing with the HSL settings, especially the fourth paramater, for the colors you want to change, in case the suggestions by @ariehen doesn’t work out.

1 Like

Thank you both for your assistance. I will give this a go.