lopspower/README.md

Last active May 5, 2025 05:07

Star (3,156) You must be signed in to star a gist
Fork (550) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4.js"></script>
Save lopspower/03fb1cc0ac9f32ef38f4 to your computer and use it in GitHub Desktop.

Download ZIP

Hexadecimal color code for transparency

Raw

README.md

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.

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

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 commented Oct 8, 2021 •

edited

Loading

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 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 commented Mar 15, 2022

Thank you this was super helpful!

italobarrosme commented Mar 19, 2022

Thanks <3

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 commented Apr 6, 2022

Thanks

MakePixelsWork commented Apr 12, 2022

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

jayx commented Apr 19, 2022 •

edited

Loading

Thank you 🙏
This is very helpful.

DevinByteX commented Jul 19, 2022

Thank you

ckaznable commented Jul 22, 2022

Thank you!

SilvanFux commented Jul 29, 2022

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

motionrus commented Aug 23, 2022

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

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

SilvanFux commented Aug 23, 2022

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 commented Nov 9, 2022

Nice!

lidgnulinux commented Dec 1, 2022

Thanks.

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 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 commented Apr 23, 2023

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 commented May 19, 2023

    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 commented Jun 29, 2023 •

edited

Loading

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

manojpedvi commented Jul 18, 2023

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

VictorHachedor commented Nov 17, 2023

Thanks a lot!

midoghranek commented Feb 15, 2024

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 commented Mar 31, 2024 •

edited

Loading

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 commented May 27, 2024

Thanks everyone awesome solutions!

colrobloxkid69420 commented Aug 20, 2024

Thanks

Tordx commented Jan 16, 2025

very useful

krokodok commented Mar 18, 2025

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

lopspower/README.md

Hex transparency in colors

How to set transparency by hex color?

All hex value from 100% to 0% alpha:

speckworks commented Oct 7, 2021

carlos-dubon commented Oct 8, 2021 • edited Loading

Milo-Diapason commented Jan 27, 2022

LeDuble commented Mar 15, 2022

italobarrosme commented Mar 19, 2022

ccagle8 commented Apr 4, 2022

NijatTagizada commented Apr 6, 2022

MakePixelsWork commented Apr 12, 2022

jayx commented Apr 19, 2022 • edited Loading

prodkt commented Jul 17, 2022

DevinByteX commented Jul 19, 2022

ckaznable commented Jul 22, 2022

SilvanFux commented Jul 29, 2022

motionrus commented Aug 23, 2022

SilvanFux commented Aug 23, 2022

anovsiradj commented Nov 9, 2022

lidgnulinux commented Dec 1, 2022

NandoMB commented Mar 15, 2023

NandoMB commented Mar 15, 2023

alexandernst commented Apr 23, 2023

Saleh-At commented May 19, 2023

ReallyBadDeveloper commented Jun 29, 2023 • edited Loading

manojpedvi commented Jul 18, 2023

VictorHachedor commented Nov 17, 2023

midoghranek commented Feb 15, 2024

Perfect typescript function

Usage

Javascript version

Testing

GaddMaster commented Mar 31, 2024 • edited Loading

Sal7one commented May 27, 2024

colrobloxkid69420 commented Aug 20, 2024

Tordx commented Jan 16, 2025

krokodok commented Mar 18, 2025

carlos-dubon commented Oct 8, 2021 •

edited

Loading

jayx commented Apr 19, 2022 •

edited

Loading

ReallyBadDeveloper commented Jun 29, 2023 •

edited

Loading

GaddMaster commented Mar 31, 2024 •

edited

Loading