Hex colors: Numeric representation for "transparent"?

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, also known as alpha component. You can't code it as RGB.

If you want a transparent background, you can do this:

background: transparent;

Additionally, I don't know if it might be helpful or not but, you could set the opacity property:

.half{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

You need both in order to get it working in IE and all other decent browsers.

Answer 2

There are two common approaches for this: either reserve a specific color as being "transparent," in which case you cannot use that color in images without it appearing transparent, or define a fourth channel alongside red, green, and blue called "alpha" which indicates translucency/transparency.

Answer 3

The alpha channel defines the transparency value of a color, so any color is 100% transparent as long as the alpha value is 0. Typically this four-channel color type is known as RGBA.

You can specify RGBA in CSS like so:

div {
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

Note that not all browsers support RGBA, in which case you can specify a fallback:

div {
    background: rgb(200, 54, 54); /* fallback */
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

More information regarding browser support and workarounds can be found here.