Question

I am building a web CMS in which the user can choose colours for certain site elements.
I would like to convert all colour values to hex to avoid any further formatting hassle (“rgb(x,y,z)” or named colours). I have found a good JS library for that.

The only thing that I can’t get into hex is “transparent”. I need this when explicitly declaring an element as transparent, which in my experience can be different from not defining any value at all.

Does anybody know whether this can be turned into some numeric form? Will I have to set up all processing instances to accept hex values or “transparent”? I can’t think of any other way.

Answer 1

Transparency is a property outside the color itself, and it’s also known as alpha component. You can’t code transparency as pure RGB (which stands for red-green-blue channels), but you can use the RGBA notation, in which you define the color + alpha channel together:

color: rgba(255, 0, 0, 0.5); /* red at 50% opacity */

If you want "transparent", just set the last number to 0, regardless of the color. All of the following result in "transparent" even though the color part is set to 100% red, green and blue respectively:

color: rgba(255, 0, 0, 0); /* transparent */
color: rgba(0, 255, 0, 0); /* transparent */
color: rgba(0, 0, 255, 0); /* transparent */

There’s also the HEXA notation (or RRGGBBAA) now supported on all major browsers, which is pretty much the same as RGBA but using hexadecimal notation instead of decimal:

color: #FF000080; /* red at 50% opacity */

Additionally, if you just want a transparent background, the simplest way to do it is:

background: transparent;

You can also play with opacity, although this might be a tad too much and have unwanted side effects in your case:

.half {
  opacity: 0.5;
  filter: alpha(opacity=50); /* needed to support IE, my sympathies if that's the case */
}