Is there a color code for transparent in HTML?

Question

I'm building a new website, and I'm looking for a transparent navigation bar so the background is visible.

Yes, there is for certain browsers (new feature). Please, take a look at https://stackoverflow.com/a/60876347/2457251 — Almir Campos, Mar 26 '20 at 21:27
See also: https://stackoverflow.com/questions/11184117/transparent-css-background-color — General Grievance, Nov 17 '21 at 14:07

Tim B James · Accepted Answer · 2015-03-25T11:56:06.920

83

There is not a Transparent color code, but there is an Opacity styling. Check out the documentation about it over at developer.mozilla.org

You will probably want to set the color of the element and then apply the opacity to it.

.transparent-style{

    background-color: #ffffff;
    opacity: .4;

}

You can use some online transparancy generatory which will also give you browser specific stylings. e.g. take a look at http://www.css-opacity.pascal-seven.de/

Note though that when you set the transparency of an element, any child element becomes transparent also. So you really need to overlay any other elements.

You may also want to try using an RGBA colour using the Alpha (A) setting to change the opacity. e.g.

.transparent-style{
    background-color: rgba(255, 255, 255, .4);
}

Using RGBA over opacity means that your child elements are not transparent.

edited Mar 25 '15 at 11:56

answered Aug 12 '13 at 14:16

Tim B James

20,084
4
73
103

I'm building my website with Tumblr, where do i have to paste the code you've just gave me? – Emiel.s Aug 12 '13 at 14:34
1

I do not know the Tumblr set up. You need to put this in the stylesheet, and identify the id or class that matches the navigation bar. – Tim B James Aug 12 '13 at 14:39
2

Technically, the "transparent" color keyword is a shortcut for rgba(0,0,0,0), a fully transparent black, vgl. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent – haui Oct 11 '19 at 10:24

score 40 · Answer 2 · edited Aug 03 '18 at 14:02

40

When you have a 6 digit color code e.g. #ffffff, replace it with #ffffff00. Just add 2 zeros at the end to make the color transparent.

Here is an article describing the new standard in more depth: https://css-tricks.com/8-digit-hex-codes/

edited Aug 03 '18 at 14:02

steampowered

11,809
12
78
98

answered Feb 20 '14 at 19:47

malvyntv

441
4
2

You need to specify which browser/version can use this. ARGB is not in the CSS3 spec (http://stackoverflow.com/a/12742729) so this is non-standard behavior, and I don't recommend it in any case. – approxiblue Mar 06 '17 at 17:48
1

The [recently adopted CSS standard for hex with alpha is #RRGGBBAA](https://css-tricks.com/8-digit-hex-codes/) so that'd be #ffffff00. It just got added to the standard and [adopted by browsers](https://www.chromestatus.com/feature/5685348285808640) in mid-2017. So it's not really recommended, at least not yet, as [it's not currently supported in IE/Edge/Opera](https://caniuse.com/#search=hex). – zeh Feb 28 '18 at 17:59
1

The correct is add in the start #XXFFFFFF when XX: 00 is 0%, 88 50% FF 100% – Dave Rincon Jan 29 '19 at 16:41

Shubham Kushwah · Answer 3 · 2019-12-24T14:02:19.773

26

All you need is this:

#ffffff00

Here the ffffff is the color and 00 is the transparency

Also, if you want 50% transparent color, then sure you can do... #ffffff80

Where 80 is the hexadecimal equivalent of 50%. Since the scale is 0-255 in RGB Colors, the half would be 255/2 = 128, which when converted to hex becomes 80

And since in transparent we want 0 opacity, we write 00

edited Dec 24 '19 at 14:02

answered Dec 25 '17 at 20:04

Shubham Kushwah

545
1
9
16

4

For 50% you'd actually need to use `#FFFFFF7F`, since you're dealing with hex values. – Dec 25 '17 at 20:10
2

50% is 80 for two digits in hex. https://css-tricks.com/8-digit-hex-codes/ – steampowered Aug 03 '18 at 14:04
Hey, this color gives me blue!!! – Sambhav Khandelwal Apr 15 '22 at 05:32
`#ffffff00` gives me yellow (`#FFFF00`) with `mpv` for subs background. – cipricus Jan 23 '23 at 09:34
1

@cipricus make sure there are 6 F's. And not 4. Because #FFFF00 is indeed yellow. For transparent white, go for #FFFFFF7F But it won't work in software like Adobe Photoshop etc. – Shubham Kushwah Jan 29 '23 at 13:15
I've got it in the end. Thanks. https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4#all-hex-value-from-100-to-0-alpha – cipricus Jan 29 '23 at 19:26

score 20 · Answer 4 · edited Sep 30 '17 at 18:39

20

#0000ffff - that is the code that you need for transparent. I just did it and it worked.

edited Sep 30 '17 at 18:39

JeanValjean

17,172
23
113
157

answered Jul 24 '14 at 05:37

Randal

227
2
2

score 17 · Answer 5 · edited Jan 06 '15 at 22:49

17

You can specify value to background-color using rgba(), as:

.style{
        background-color: rgba(100, 100, 100, 0.5);
}

0.5 is the transparency value

0.5 is more like semi-transparent, changing the value from 0.5 to 0 gave me true transparency.

edited Jan 06 '15 at 22:49

morgano

17,210
10
45
56

answered Aug 12 '13 at 14:33

Bineesh

326
4
9

score 11 · Answer 6 · edited Nov 17 '21 at 14:10

11

According to MDN there is a transparent keyword, which is short for rgba(0,0,0,0).

{background-color: transparent;}

edited Nov 17 '21 at 14:10

General Grievance

4,555
31
31
45

answered Sep 01 '15 at 18:01

Manish

121
1
2

1

While this is correct, please explain a bit more about the answer instead of just pasting code. – Shotgun Ninja Sep 01 '15 at 18:21

score 7 · Answer 7 · answered Jan 14 '20 at 20:20

7

If you are looking for android apps, you can use

#00000000

answered Jan 14 '20 at 20:20

Gopal Meena

407
8
20

1

Please read the question & tags. It's clearly an HTML, CSS question. – Shubham Kushwah Oct 23 '21 at 15:18

score 4 · Answer 8 · edited Nov 07 '15 at 06:03

4

Yeah I think the best way to transparent the background colour (make opacity only for the background) is using

.style{
        background-color: rgba(100, 100, 100, 0.5);
}

Above statement 0.5 is the opacity value.

It only apply the opacity changes to the background colour (not all elements')

The "opacity" attribute in the CSS will transparent all the elements in the block.

edited Nov 07 '15 at 06:03

approxiblue

6,982
16
51
59

answered Nov 07 '15 at 05:34

Shenal Madhushan Silva

49
1

score 1 · Answer 9 · answered Sep 28 '15 at 09:01

Here, instead of making navigation bar transparent, remove any color attributes from the navigation bar to make the background visible.

Strangely, I came across this thinking that I needed a transparent color, but all I needed is to remove the color attributes.

.some-class{
    background-color: #fafafa; 
}

to

.some-class{
}

Is there a color code for transparent in HTML?

9 Answers9

Linked