Hexadecimal color code for transparency

README.md

Hexadecimal color code for transparency

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

All hex value from 100% to 0% alpha:

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

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.

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

Is 100% not transparent and 0% is transparent

That's correct!

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

@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! 👍

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'
}

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

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.

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

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

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

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

Thank you this was super helpful!

Thanks <3

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

Thanks

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

Thank you 🙏
This is very helpful.

Big help thanks!

Thank you

Thank you!

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

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

not correct. percentToHex(50) return '7F'

not correct. percentToHex(50) return '7F'

Yes. But to be fair, '7F' is also 50%. But you are right everywhere I looked it up. 50% is set by '80' even when the browser reads it correctly it's strange to use something else everybody else is using.

Nice!

Thanks.

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

not correct. percentToHex(50) return '7F'

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

using ceil, if you call percentToHex2(86), it will return 'DC' istead of 'DB'...

To be more precise:

function percentToHexRound( p: number ) {
  return `0${Math.round((255 / 100) * p).toString(16)}`.slice(-2).toUpperCase();
}
function percentToHexCeil(p: number) {
  return `0${Math.ceil((255 / 100) * p).toString(16)}`.slice(-2).toUpperCase();
}
function testAlpha() {
  const expected = {
    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',
  };
  let roundAssertions = 0;
  let ceilAssertions = 0;
  for (let i = 0; i <= 100; i++) {
    const computedAlphaWithRound = percentToHexRound(i);
    const computedAlphaWithCeil = percentToHexCeil(i);
    const expectedAlpha = expected[i as keyof typeof expected];
    const assertRound = computedAlphaWithRound === expectedAlpha;
    const assertCeil = computedAlphaWithCeil === expectedAlpha;
    if (assertRound) roundAssertions++;
    if (assertCeil) ceilAssertions++;
    console.log(`${i} Round: ${assertRound ? '✅' : '❌'} | Ceil: ${assertCeil ? '✅' : '❌'}`);
  }
  console.log(`Total Round Assertions: ${roundAssertions}`);
  console.log(`Total Ceil Assertions: ${ceilAssertions}`);
}
testAlpha();

The execution of the test returns:

 LOG  0 Round: ✅ | Ceil: ✅
 LOG  1 Round: ✅ | Ceil: ✅
 LOG  2 Round: ✅ | Ceil: ❌
 LOG  3 Round: ✅ | Ceil: ✅
 LOG  4 Round: ✅ | Ceil: ❌
 LOG  5 Round: ✅ | Ceil: ✅
 LOG  6 Round: ✅ | Ceil: ❌
 LOG  7 Round: ✅ | Ceil: ✅
 LOG  8 Round: ✅ | Ceil: ❌
 LOG  9 Round: ✅ | Ceil: ✅
 LOG  10 Round: ✅ | Ceil: ✅
 LOG  11 Round: ✅ | Ceil: ❌
 LOG  12 Round: ✅ | Ceil: ✅
 LOG  13 Round: ✅ | Ceil: ❌
 LOG  14 Round: ✅ | Ceil: ✅
 LOG  15 Round: ✅ | Ceil: ❌
 LOG  16 Round: ✅ | Ceil: ✅
 LOG  17 Round: ✅ | Ceil: ❌
 LOG  18 Round: ✅ | Ceil: ✅
 LOG  19 Round: ✅ | Ceil: ❌
 LOG  20 Round: ✅ | Ceil: ✅
 LOG  21 Round: ✅ | Ceil: ✅
 LOG  22 Round: ✅ | Ceil: ❌
 LOG  23 Round: ✅ | Ceil: ✅
 LOG  24 Round: ✅ | Ceil: ❌
 LOG  25 Round: ✅ | Ceil: ✅
 LOG  26 Round: ✅ | Ceil: ❌
 LOG  27 Round: ✅ | Ceil: ✅
 LOG  28 Round: ✅ | Ceil: ❌
 LOG  29 Round: ✅ | Ceil: ✅
 LOG  30 Round: ✅ | Ceil: ✅
 LOG  31 Round: ✅ | Ceil: ❌
 LOG  32 Round: ✅ | Ceil: ✅
 LOG  33 Round: ✅ | Ceil: ❌
 LOG  34 Round: ✅ | Ceil: ✅
 LOG  35 Round: ✅ | Ceil: ❌
 LOG  36 Round: ✅ | Ceil: ✅
 LOG  37 Round: ✅ | Ceil: ❌
 LOG  38 Round: ✅ | Ceil: ✅
 LOG  39 Round: ✅ | Ceil: ❌
 LOG  40 Round: ✅ | Ceil: ✅
 LOG  41 Round: ✅ | Ceil: ✅
 LOG  42 Round: ✅ | Ceil: ❌
 LOG  43 Round: ✅ | Ceil: ✅
 LOG  44 Round: ✅ | Ceil: ❌
 LOG  45 Round: ✅ | Ceil: ✅
 LOG  46 Round: ✅ | Ceil: ❌
 LOG  47 Round: ✅ | Ceil: ✅
 LOG  48 Round: ✅ | Ceil: ❌
 LOG  49 Round: ✅ | Ceil: ✅
 LOG  50 Round: ❌ | Ceil: ✅
 LOG  51 Round: ✅ | Ceil: ❌
 LOG  52 Round: ✅ | Ceil: ✅
 LOG  53 Round: ✅ | Ceil: ❌
 LOG  54 Round: ✅ | Ceil: ✅
 LOG  55 Round: ✅ | Ceil: ❌
 LOG  56 Round: ✅ | Ceil: ✅
 LOG  57 Round: ✅ | Ceil: ❌
 LOG  58 Round: ✅ | Ceil: ✅
 LOG  59 Round: ✅ | Ceil: ❌
 LOG  60 Round: ✅ | Ceil: ✅
 LOG  61 Round: ✅ | Ceil: ✅
 LOG  62 Round: ✅ | Ceil: ❌
 LOG  63 Round: ✅ | Ceil: ✅
 LOG  64 Round: ✅ | Ceil: ❌
 LOG  65 Round: ✅ | Ceil: ✅
 LOG  66 Round: ✅ | Ceil: ❌
 LOG  67 Round: ✅ | Ceil: ✅
 LOG  68 Round: ✅ | Ceil: ❌
 LOG  69 Round: ✅ | Ceil: ✅
 LOG  70 Round: ✅ | Ceil: ✅
 LOG  71 Round: ✅ | Ceil: ❌
 LOG  72 Round: ✅ | Ceil: ✅
 LOG  73 Round: ✅ | Ceil: ❌
 LOG  74 Round: ✅ | Ceil: ✅
 LOG  75 Round: ✅ | Ceil: ❌
 LOG  76 Round: ✅ | Ceil: ✅
 LOG  77 Round: ✅ | Ceil: ❌
 LOG  78 Round: ✅ | Ceil: ✅
 LOG  79 Round: ✅ | Ceil: ❌
 LOG  80 Round: ✅ | Ceil: ✅
 LOG  81 Round: ✅ | Ceil: ✅
 LOG  82 Round: ✅ | Ceil: ❌
 LOG  83 Round: ✅ | Ceil: ✅
 LOG  84 Round: ✅ | Ceil: ❌
 LOG  85 Round: ✅ | Ceil: ✅
 LOG  86 Round: ✅ | Ceil: ❌
 LOG  87 Round: ✅ | Ceil: ✅
 LOG  88 Round: ✅ | Ceil: ❌
 LOG  89 Round: ✅ | Ceil: ✅
 LOG  90 Round: ❌ | Ceil: ✅
 LOG  91 Round: ✅ | Ceil: ❌
 LOG  92 Round: ✅ | Ceil: ✅
 LOG  93 Round: ✅ | Ceil: ❌
 LOG  94 Round: ✅ | Ceil: ✅
 LOG  95 Round: ✅ | Ceil: ❌
 LOG  96 Round: ✅ | Ceil: ✅
 LOG  97 Round: ✅ | Ceil: ❌
 LOG  98 Round: ✅ | Ceil: ✅
 LOG  99 Round: ✅ | Ceil: ❌
 LOG  100 Round: ✅ | Ceil: ✅
 LOG  Total Round Assertions: 99
 LOG  Total Ceil Assertions: 56

function convertAlphaToHex(alphaDecimal) {
  // Convert alphaDecimal to a value between 0 and 1
  const alpha = alphaDecimal / 100;

  // Calculate the equivalent alpha value in the range of 0 to 255
  const alphaInt = Math.round(alpha * 255);

  // Convert alphaInt to hexadecimal string
  const alphaHex = alphaInt.toString(16).toUpperCase();

  // Pad the hexadecimal value with leading zero if needed
  const paddedAlphaHex = alphaHex.padStart(2, '0');

  return paddedAlphaHex;
}

    function applyAlphaToColorHex(hexColor, alpha) {
        var red = parseInt(hexColor.substring(1, 3), 16);
        var green = parseInt(hexColor.substring(3, 5), 16);
        var blue = parseInt(hexColor.substring(5, 7), 16);
        return Qt.rgba(red, green, blue, alpha);
    }

Not gonna lie, it's working like a charm. Thanks for posting this!

https://10x-programming.com/hex-values-to-decimal-and-percentage-converter
Bookmark & use this handy online tool instead :)

Thanks a lot!

Perfect typescript function

function hexadecimal(color: string) {
  return (percentage: number): string => {
    const decimal = `0${Math.round(255 * (percentage / 100)).toString(16)}`.slice(-2).toUpperCase();
    return color + decimal;
  };
}

Usage

hexadecimal('#000000')(8) // #00000014

Javascript version

function hexadecimal(color) {
  return (percentage) => {
    const decimal = `0${Math.round(255 * (percentage / 100)).toString(16)}`.slice(-2).toUpperCase();
    return color + decimal;
  };
}

Testing

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'
};

describe('hexadecimal', () => {
  it('hexadecimal test', () => {
    Object.entries(hexTransparencies).forEach(([key, value]) => {
      const color = `#000000${value}`;
      const result = hexadecimal('#000000')(key);
      expect(result).toBe(color);
    });
  });
});

This test will pass with 100%

Another one for the team -> for whoever would prefer an array over an object !

export const opaque = [
    "FF",
    "FC",
    "FA",
    "F7",
    "F5",
    "F2",
    "F0",
    "ED",
    "EB",
    "E8",
    "E6",
    "E3",
    "E0",
    "DE",
    "DB",
    "D9",
    "D6",
    "D4",
    "D1",
    "CF",
    "CC",
    "C9",
    "C7",
    "C4",
    "C2",
    "BF",
    "BD",
    "BA",
    "B8",
    "B5",
    "B3",
    "B0",
    "AD",
    "AB",
    "A8",
    "A6",
    "A3",
    "A1",
    "9E",
    "9C",
    "99",
    "96",
    "94",
    "91",
    "8F",
    "8C",
    "8A",
    "87",
    "85",
    "82",
    "80",
    "7D",
    "7A",
    "78",
    "75",
    "73",
    "70",
    "6E",
    "6B",
    "69",
    "66",
    "63",
    "61",
    "5E",
    "5C",
    "59",
    "57",
    "54",
    "52",
    "4F",
    "4D",
    "4A",
    "47",
    "45",
    "42",
    "40",
    "3D",
    "3B",
    "38",
    "36",
    "33",
    "30",
    "2E",
    "2B",
    "29",
    "26",
    "24",
    "21",
    "1F",
    "1C",
    "1A",
    "17",
    "14",
    "12",
    "0F",
    "0D",
    "0A",
    "08",
    "05",
    "03",
    "00"
];

Daniel ( Smiley Emojis )