Hexadecimal color code for transparency

new_gist_file_0

Hex transparency in colors

How to set transparency by hex color?

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

<img src="http://i68.tinypic.com/2u7y6p3.png" alt="sample" title="sample" align="right" vspace="24" />

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

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 )

Thanks everyone awesome solutions!

Thanks

very useful

In modern CSS you can use color-mix( in srgb, #ff0000, transparent 50% ).