Skip to content

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.

Download This sample on Google Play Store

Android app on Google Play

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.

Copy link

@Lizelight71 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.

Copy link

@sogen sogen commented Jan 4, 2018

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

@meatnordrink

This comment has been minimized.

Copy link

@meatnordrink 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.

Copy link

@mc-hine 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.

Copy link

@gkaffka gkaffka commented Feb 12, 2018

@webnoob

This comment has been minimized.

Copy link

@webnoob 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.

Copy link

@dashengz 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.

Copy link

@wenjoy wenjoy commented Apr 11, 2018

@dashengz is definitely right.

@Husterknupp

This comment has been minimized.

Copy link

@Husterknupp Husterknupp commented Oct 28, 2018

Thanks. This helped a lot 👍

@cyrilnoah1

This comment has been minimized.

Copy link

@cyrilnoah1 cyrilnoah1 commented Nov 16, 2018

Gidhi naa life ae marchesindi!

@dtbradfield

This comment has been minimized.

Copy link

@dtbradfield dtbradfield commented Feb 2, 2019

Is there a way to detect if user is on android or browser? Or is this specifically saying it is backwards if it is an android app? Like if they're on android in a chrome browser itd be cool, but if dev'ing an app for android you use backward?

@asmi77

This comment has been minimized.

Copy link

@asmi77 asmi77 commented May 28, 2019

It works for me with that format #rrggbbaa on Chrome, AA at the end.

@techguydotcom

This comment has been minimized.

Copy link

@techguydotcom techguydotcom commented Jun 20, 2019

Is 100% not transparent and 0% is transparent

@adityabros

This comment has been minimized.

Copy link

@adityabros adityabros commented Aug 28, 2019

Thanks buddy.

@asianmack

This comment has been minimized.

Copy link

@asianmack asianmack commented Sep 3, 2019

Thanks for this. 👍

@bionicvapourboy

This comment has been minimized.

Copy link

@bionicvapourboy bionicvapourboy commented Sep 25, 2019

Is possible to calculate the hex, instead of having it quantized:

const percentToHex = (p) => {
    const percent = Math.max(0, Math.min(100, p)); // bound percent from 0 to 100
    const intValue = Math.round(p / 100 * 255); // map percent to nearest integer (0 - 255)
    const hexValue = intValue.toString(16); // get hexadecimal representation
    return hexValue.padStart(2, '0').toUpperCase(); // format with leading 0 and upper case characters
}

console.log(percentToHex(0)); // 00
console.log(percentToHex(50)); // 80
console.log(percentToHex(80)); // CC
console.log(percentToHex(100)); // FF
@karangoel16

This comment has been minimized.

@tahaak67

This comment has been minimized.

Copy link

@tahaak67 tahaak67 commented Dec 26, 2019

Very helpful ! thanks.

@zippytyro

This comment has been minimized.

Copy link

@zippytyro zippytyro commented May 16, 2020

Thanks, man it works very well. Kudos.

@corysimmons

This comment has been minimized.

Copy link

@corysimmons corysimmons commented Sep 18, 2020

On iOS and Android, the alpha hex comes before the 6-char hex.

On web, the alpha hex comes after the 6-char hex.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.