Skip to content

Instantly share code, notes, and snippets.

@lopspower
Last active April 30, 2024 02:11
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 👍.

@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 )

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