Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hexadecimal color code for transparency

Hexadecimal color code for transparency

Twitter

How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.

All hex value from 100% to 0% alpha:

sample

  • 100% — FF
  • 99% — FC
  • 98% — FA
  • 97% — F7
  • 96% — F5
  • 95% — F2
  • 94% — F0
  • 93% — ED
  • 92% — EB
  • 91% — E8
  • 90% — E6
  • 89% — E3
  • 88% — E0
  • 87% — DE
  • 86% — DB
  • 85% — D9
  • 84% — D6
  • 83% — D4
  • 82% — D1
  • 81% — CF
  • 80% — CC
  • 79% — C9
  • 78% — C7
  • 77% — C4
  • 76% — C2
  • 75% — BF
  • 74% — BD
  • 73% — BA
  • 72% — B8
  • 71% — B5
  • 70% — B3
  • 69% — B0
  • 68% — AD
  • 67% — AB
  • 66% — A8
  • 65% — A6
  • 64% — A3
  • 63% — A1
  • 62% — 9E
  • 61% — 9C
  • 60% — 99
  • 59% — 96
  • 58% — 94
  • 57% — 91
  • 56% — 8F
  • 55% — 8C
  • 54% — 8A
  • 53% — 87
  • 52% — 85
  • 51% — 82
  • 50% — 80
  • 49% — 7D
  • 48% — 7A
  • 47% — 78
  • 46% — 75
  • 45% — 73
  • 44% — 70
  • 43% — 6E
  • 42% — 6B
  • 41% — 69
  • 40% — 66
  • 39% — 63
  • 38% — 61
  • 37% — 5E
  • 36% — 5C
  • 35% — 59
  • 34% — 57
  • 33% — 54
  • 32% — 52
  • 31% — 4F
  • 30% — 4D
  • 29% — 4A
  • 28% — 47
  • 27% — 45
  • 26% — 42
  • 25% — 40
  • 24% — 3D
  • 23% — 3B
  • 22% — 38
  • 21% — 36
  • 20% — 33
  • 19% — 30
  • 18% — 2E
  • 17% — 2B
  • 16% — 29
  • 15% — 26
  • 14% — 24
  • 13% — 21
  • 12% — 1F
  • 11% — 1C
  • 10% — 1A
  • 9% — 17
  • 8% — 14
  • 7% — 12
  • 6% — 0F
  • 5% — 0D
  • 4% — 0A
  • 3% — 08
  • 2% — 05
  • 1% — 03
  • 0% — 00

📚 Best Android Gists

You can see other best Android Gists or offer your just here https://github.com/lopspower/BestAndroidGists 👍.

@Lizelight71

This comment has been minimized.

Lizelight71 commented Nov 30, 2017

Hi
About the "transparency with hex value". I may have it wrong but shouldn't the alpha code be last in the color?
#00ff001C
Regards
Lizelight

@sogen

This comment has been minimized.

sogen commented Jan 4, 2018

@Lizelight71, the format is #AARRGGBB so the correct one is #1C00ff00

@meatnordrink

This comment has been minimized.

meatnordrink commented Jan 23, 2018

@Lizelight71 and @sogen, the correct format is actually #rrggbbaa; I've tested this, and #aarrggbb does not work. (So the above would indeed need to be #00ff001C).

@mc-hine

This comment has been minimized.

mc-hine commented Feb 6, 2018

@meatnordrink, I don't think that's correct. For me, #FF000000 is the color black, whereas #000000FF is transparent. This tells me that the order of the values looks like this #AARRGGBB.

@gkaffka

This comment has been minimized.

gkaffka commented Feb 12, 2018

@webnoob

This comment has been minimized.

webnoob commented Feb 14, 2018

I've just tried this in chrome and it wouldn't show the color at all with AA value at the start, it worked with it at the end. With that in mind I think people might be mixing up the usages of their examples.

style="background-color: #a4f9ef7F" where 7F is the transparency. Trying it with 7F at the start didn't work for me. It seems this is translated by the browser into: background-color: rgba(121, 210, 209, 0.498);.

@dashengz

This comment has been minimized.

dashengz commented Apr 5, 2018

Android uses #AARRGGBB (see doc as pointed out by @gkaffka).

Web browsers uses #RRGGBBAA (see https://caniuse.com/#feat=css-rrggbbaa for browser support).

@wenjoy

This comment has been minimized.

wenjoy commented Apr 11, 2018

@dashengz is definitely right.

@Husterknupp

This comment has been minimized.

Husterknupp commented Oct 28, 2018

Thanks. This helped a lot 👍

@cyrilnoah1

This comment has been minimized.

cyrilnoah1 commented Nov 16, 2018

Gidhi naa life ae marchesindi!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment