53

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.

Jon Seigel
  • 12,251
  • 8
  • 58
  • 92
Pekka
  • 442,112
  • 142
  • 972
  • 1,088

8 Answers8

51

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

Community
  • 1
  • 1
Jomar Sevillejo
  • 1,648
  • 2
  • 21
  • 33
44

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 */
}
Seb
  • 24,920
  • 5
  • 67
  • 85
  • Yes, it normally is. However, the CSS implementation has situations in which I am forced to use "color: transparent", e.g. for the background color. Thus my question. – Pekka Nov 17 '09 at 19:47
  • ... I was thinking whether there might be some kind of "alpha color" like in the GIF format. But I've never heard of such a thing in HTML. – Pekka Nov 17 '09 at 19:48
  • There is: it's called opacity. But it's not cross-browser. I've now edited my answer, take a look there. – Seb Nov 18 '09 at 15:37
  • `opacity` is now supported in all major browsers. – here Dec 31 '13 at 02:43
  • 1
    This answer has an underappreciated joke embedded. – Pyromonk Jan 12 '21 at 21:46
  • If you need transparency from Hex, you can check my answer below. – Jomar Sevillejo Apr 08 '21 at 01:23
35

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.

fbrereto
  • 35,429
  • 19
  • 126
  • 178
  • Oohh, interesting! Do you know whether this is cross-browser safe? – Pekka Nov 17 '09 at 19:50
  • Very nice, I didn't know about this, thanks. However as long as it's not widely supported, I would have to work around it using "transparent" anyway. Will keep this in mind and chekc again in 3-4 years' time, when the browser landscape has changed. – Pekka Nov 17 '09 at 19:53
  • 1
    Alas, IE7 and 8 won't have disappeared in 3-4 years! – FelipeAls Nov 18 '09 at 07:25
5

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.

Idealmind
  • 1,278
  • 15
  • 8
3

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.

qid
  • 1,883
  • 10
  • 15
1

Very simple: no color, no opacity:

rgba(0, 0, 0, 0);
drjorgepolanco
  • 7,479
  • 5
  • 46
  • 47
0

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

Gourav Yadav
  • 89
  • 1
  • 1
  • 6
-6

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

bgcolor=" "
Andrew Barber
  • 39,603
  • 20
  • 94
  • 123
Row
  • 1