CODEWITHSUNDEEP
csscolorstransparencyrgb
Pekka
Pekka

Reputation: 449783

Hex colors: Numeric representation for "transparent"?

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.

Upvotes: 55

Views: 417721

Answers (8)

Seb
Seb

Reputation: 25157

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 */
}

Upvotes: 47

epicrato
epicrato

Reputation: 8428

Very simple: no color, no opacity:

rgba(0, 0, 0, 0);

Upvotes: 1

Gourav Yadav
Gourav Yadav

Reputation: 89

Use following hexadecimal code for transparent text colour: #00FFFF00

Upvotes: 0

Jomar Sevillejo
Jomar Sevillejo

Reputation: 1698

HEXA - #RRGGBBAA

There's a relatively new way of doing transparency, it's called HEXA (HEX + Alpha). It takes in 8 digits instead of 6. The last pair is Alpha. So the pattern of pairs is #RRGGBBAA. Having 4 digits also works: #RGBA

I am not sure about its browser support for now but, you can check the DRAFT Docs for more information.

§ 4.2. The RGB hexadecimal notations: #RRGGBB

The syntax of a <hex-color> is a <hash-token> token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, "#", followed by some number of digits 0-9 or letters a-f (the case of the letters doesn’t matter - #00ff00 is identical to #00FF00).

8 digits

The first 6 digits are interpreted identically to the 6-digit notation. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where 00 represents a fully transparent color and ff represent a fully opaque color.

Example 3
In other words, #0000ffcc represents the same color as rgba(0, 0, 100%, 80%) (a slightly-transparent blue).

4 digits

This is a shorter variant of the 8-digit notation, "expanded" in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where 0 represents the minimum value and f represents the maximum. The next three digits represent the green, blue, and alpha channels, respectively.

For the most part, Chrome and Firefox have started supporting this: enter image description here

Upvotes: 54

Idealmind
Idealmind

Reputation: 1298

You can use this conversion table: http://roselab.jhu.edu/~raj/MISC/hexdectxt.html

eg, if you want a transparency of 60%, you use 3C (hex equivalent).

This is usefull for IE background gradient transparency:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454)";

where startColorstr and endColorstr: 2 first characters are a hex value for transparency, and the six remaining are the hex color.

Upvotes: 5

Row
Row

Reputation: 1

I was also trying for transparency - maybe you could try leaving blank the value of background e.g. something like 

bgcolor=" "

Upvotes: -6

fbrereto
fbrereto

Reputation: 35945

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.

Upvotes: 36

qid
qid

Reputation: 1913

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.

Upvotes: 3

Related Questions