Skip to content

Instantly share code, notes, and snippets.

@lopspower
Last active October 4, 2024 03:27
Show Gist options
  • Save lopspower/03fb1cc0ac9f32ef38f4 to your computer and use it in GitHub Desktop.
Save lopspower/03fb1cc0ac9f32ef38f4 to your computer and use it in GitHub Desktop.
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 👍.

@linehammer
Copy link

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

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

@speckworks
Copy link

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

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

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

Thanks

@MakePixelsWork
Copy link

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

Thank you!

@SilvanFux
Copy link

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

@motionrus
Copy link

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

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

@SilvanFux
Copy link

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.

@anovsiradj
Copy link

Nice!

@lidgnulinux
Copy link

Thanks.

@NandoMB
Copy link

NandoMB commented Mar 15, 2023

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

@NandoMB
Copy link

NandoMB commented Mar 15, 2023

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

@alexandernst
Copy link

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

@Saleh-At
Copy link

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

@ReallyBadDeveloper
Copy link

ReallyBadDeveloper commented Jun 29, 2023

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

@manojpedvi
Copy link

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

@VictorHachedor
Copy link

Thanks a lot!

@midoghranek
Copy link

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%

@GaddMaster
Copy link

GaddMaster commented Mar 31, 2024

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 )

@Sal7one
Copy link

Sal7one commented May 27, 2024

Thanks everyone awesome solutions!

@colrobloxkid69420
Copy link

Thanks

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