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 👍.

@adityabros
Copy link

adityabros commented Aug 28, 2019

Thanks buddy.

@asianmack
Copy link

asianmack commented Sep 3, 2019

Thanks for this. 👍

@bionicvapourboy
Copy link

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
Copy link

karangoel16 commented Sep 26, 2019

@tahaak67
Copy link

tahaak67 commented Dec 26, 2019

Very helpful ! thanks.

@zippytyro
Copy link

zippytyro commented May 16, 2020

Thanks, man it works very well. Kudos.

@corysimmons
Copy link

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.

@markpanado
Copy link

markpanado commented Oct 13, 2020

Thank you!

@markpanado
Copy link

markpanado commented Oct 13, 2020

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);.

Same with mine, what I know ever since is it should be at the end. This is the first time I'm seeing alpha is placed in the beginning of a hex value.

@shubham08gupta
Copy link

shubham08gupta commented Nov 2, 2020

Screen Shot 2020-11-02 at 14 04 57

@lopspower I found that something like this is already supported in Android Studio.

@rolmos14
Copy link

rolmos14 commented Nov 6, 2020

Is 100% not transparent and 0% is transparent

That's correct!

@speckworks
Copy link

speckworks commented Feb 17, 2021

I freaking love this, btw! Use it every week! Kudos! Thanks so much!

@whitefang57
Copy link

whitefang57 commented Mar 2, 2021

@bionicvapourboy: I noticed that you define percent but don't use it, you just reuse p. Other than that, your function is exactly what I was looking for! 👍

@LeoMacherla
Copy link

LeoMacherla commented Jun 5, 2021

A JavaScript object with all the values for anyone who needs to do this dynamically:

Format is transparencyPercentage: 'transparencyStringForTheEndOfHexValue'

const hexTransparencies = {
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'
}

@ZkHaider
Copy link

ZkHaider commented Jul 5, 2021

A JavaScript object with all the values for anyone who needs to do this dynamically:

const hexTransparency = {
....

Can you just pass in the hex instead and have it return a value between 0-100? Then no need to keep a table :-)

const normalize = (val, max, min) => { return (val - min) / (max - min); };

export const hexToAlpha = (alphaHexString) => {
  return Math.round(normalize(parseInt(alphaHexString, 16), 255, 0) * 100);
}

hexToAlpha('FF'); // 100
hexToAlpha('AA'); // 67

@linehammer
Copy link

linehammer commented Jul 6, 2021

Transparency is controlled by the alpha channel (AA in #AARRGGBB). Maximal value (255 dec, FF hex) means fully opaque. Minimum value (0 dec, 00 hex) means fully transparent. Values in between are semi-transparent, i.e. the color is mixed with the background color.

To get a fully transparent color code set the alpha to zero. RR, GG and BB are irrelevant in this case because no color will be visible. This means #00FFFFFF ("transparent White") is the same color as #00F0F8FF ("transparent AliceBlue"). To keep it simple one chooses black (#00000000) or white (#00FFFFFF) if the color does not matter.

@CalamityAdam
Copy link

CalamityAdam commented Oct 7, 2021

Can you please specify this is only for android, and not for web browsers? thanks. love this!

@speckworks
Copy link

speckworks commented Oct 7, 2021

ha. funny i never used it on my Android, but have Often referenced this handy list of Hex - transparency % 's

@carlos-dubon
Copy link

carlos-dubon commented Oct 8, 2021

A JavaScript object with all the values for anyone who needs to do this dynamically:
const hexTransparency = {
....

Can you just pass in the hex instead and have it return a value between 0-100? Then no need to keep a table :-)

const normalize = (val, max, min) => { return (val - min) / (max - min); };

export const hexToAlpha = (alphaHexString) => {
  return Math.round(normalize(parseInt(alphaHexString, 16), 255, 0) * 100);
}

hexToAlpha('FF'); // 100
hexToAlpha('AA'); // 67

i need the opposite of this
alphaToHex(100); // "FF"

any ideas on how to implement such thing? 😅

Edit:

never mind, I found the solution in SO: https://stackoverflow.com/a/29141832

@Milo-Diapason
Copy link

Milo-Diapason commented Jan 27, 2022

4-digits version:

100% — F
93% — E
86% — D
80% — C
73% — B
67% — A
60% — 9
53% — 8
47% — 7
40% — 6
33% — 5
27% — 4
20% — 3
13% — 2
7% — 1
0% — 0

@LeDuble
Copy link

LeDuble commented Mar 15, 2022

Thank you this was super helpful!

@italobarrosme
Copy link

italobarrosme commented Mar 19, 2022

Thanks <3

@ccagle8
Copy link

ccagle8 commented Apr 4, 2022

I turned this into a PHP function for anyone that may need it for other non-Android things: https://gist.github.com/ccagle8/1d009f791a1746fae1ac88903879402e

@NijatTagizada
Copy link

NijatTagizada commented Apr 6, 2022

Thanks

@MakePixelsWork
Copy link

MakePixelsWork commented Apr 12, 2022

This actually only works if its BEHIND the hex, right? https://caniuse.com/?search=hex%20color%20notation

@jayx
Copy link

jayx commented Apr 19, 2022

Thank you 🙏
This is very helpful.

@prodkt
Copy link

prodkt commented Jul 17, 2022

Big help thanks!

@devinkg
Copy link

devinkg commented Jul 19, 2022

Thank you

@ckaznable
Copy link

ckaznable commented Jul 22, 2022

Thank you!

@SilvanFux
Copy link

SilvanFux commented Jul 29, 2022

function percentToHex( p ) {
  return `0${ Math.round( ( 255 / 100 ) * p ).toString( 16 ) }`.slice( -2 ).toUpperCase();
}

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