Understanding colors on Android (six characters)

I am trying to understand how colors work in Android. I have this color set as the background of my LinearLayout, and I get a background gray with some transparency:

<gradient android:startColor="#b4555555" android:endColor="#b4555555"
 android:angle="270.0" />

If I remove the last two characters (55) I get a solid color, losing the transparency. I was trying to find a page where I can see some explanation about this, but I couldn't find it.

Android uses hexadecimal ARGB values, which are formatted as #AARRGGBB. That first pair of letters, the AA, represent the alpha channel. You must convert your decimal opacity values to a hexadecimal value. Here are the steps:

Alpha Hex Value Process

1. Take your opacity as a decimal value and multiply it by 255. So, if you have a block that is 50% opaque the decimal value would be .5. For example: .5 x 255 = 127.5
2. The fraction won't convert to hexadecimal, so you must round your number up or down to the nearest whole number. For example: 127.5 rounds up to 128; 55.25 rounds down to 55.
3. Enter your decimal value in a decimal-to-hexadecimal converter, like http://www.binaryhexconverter.com/decimal-to-hex-converter, and convert your values.
4. If you only get back a single value, prefix it with a zero. For example, if you're trying to get 5% opacity and you're going through this process, you'll end up with the hexadecimal value of D. Add a zero in front of it so it appears as 0D.

That's how you find the alpha channel value. I've taken the liberty to put together a list of values for you. Enjoy!

Hex Opacity Values

• 100% — FF
• 95% — F2
• 90% — E6
• 85% — D9
• 80% — CC
• 75% — BF
• 70% — B3
• 65% — A6
• 60% — 99
• 55% — 8C
• 50% — 80
• 45% — 73
• 40% — 66
• 35% — 59
• 30% — 4D
• 25% — 40
• 20% — 33
• 15% — 26
• 10% — 1A
• 5% — 0D
• 0% — 00

Going off the answer from @BlondeFurious, here is some Java code to get each hexadecimal value from 100% to 0% alpha:

for (double i = 1; i >= 0; i -= 0.01) {
    i = Math.round(i * 100) / 100.0d;
    int alpha = (int) Math.round(i * 255);
    String hex = Integer.toHexString(alpha).toUpperCase();
    if (hex.length() == 1)
        hex = "0" + hex;
    int percent = (int) (i * 100);
    System.out.println(String.format("%d%% — %s", percent, hex));
}

Output:

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 version is below:

var text = document.getElementById('text');
for (var i = 1; i >= 0; i -= 0.01) {
    i = Math.round(i * 100) / 100;
    var alpha = Math.round(i * 255);
    var hex = (alpha + 0x10000).toString(16).substr(-2).toUpperCase();
    var perc = Math.round(i * 100);
    text.innerHTML += perc + "% — " + hex + " (" + alpha + ")</br>";
}

<div id="text"></div>

---

You can also just Google "number to hex" where 'number' is any value between 0 and 255.

If you provide 6 hex digits, that means RGB (2 hex digits for each value of red, green and blue).

If you provide 8 hex digits, it's an ARGB (2 hex digits for each value of alpha, red, green and blue respectively).

So by removing the final 55 you're changing from A=B4, R=55, G=55, B=55 (a mostly transparent grey), to R=B4, G=55, B=55 (a fully-non-transparent dusky pinky).

See the "Color" documentation for the supported formats.

Android Material Design

These are the conversions for setting the text color opacity levels.

• 100%: FF
• 87%: DE
• 70%: B3
• 54%: 8A
• 50%: 80
• 38%: 61
• 12%: 1F

Dark text on light backgrounds

• Primary text: DE000000
• Secondary text: 8A000000
• Disabled text, hint text, and icons: 61000000
• Dividers: 1F000000

White text on dark backgrounds

• Primary text: FFFFFFFF
• Secondary text: B3FFFFFF
• Disabled text, hint text, and icons: 80FFFFFF
• Dividers: 1FFFFFFF

See also

• Look up any percentage here.

On Android, colors are can be specified as RGB or ARGB.

http://en.wikipedia.org/wiki/ARGB

In RGB you have two characters for every color (red, green, blue), and in ARGB you have two additional chars for the alpha channel.

So, if you have 8 characters, it's ARGB, with the first two characters specifying the alpha channel. If you remove the leading two characters it's only RGB (solid colors, no alpha/transparency). If you want to specify a color in your Java source code, you have to use:

int Color.argb (int alpha, int red, int green, int blue)

alpha  Alpha component [0..255] of the color
red    Red component [0..255] of the color
green  Green component [0..255] of the color
blue   Blue component [0..255] of the color

Reference: argb

An 8-digit hex color value is a representation of ARGB (Alpha, Red, Green, Blue), whereas a 6-digit value just assumes 100% opacity (fully opaque) and defines just the RGB values. So to make this be fully opaque, you can either use #FF555555, or just #555555. Each 2-digit hex value is one byte, representing values from 0-255.

Use this table (I prefer to put it in colors.xml for fast search)

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

at new chrome version (maybe 67.0.3396.62) , CSS hex color can use this model display,

eg:

div{
  background-color:#FF00FFcc;
}

cc is opacity , but old chrome not support that mod

On Android the color can be declared in the following format

#AARRGGBB

AA - is the bit that’s of most interest to us, it stands for alpha channel

RR GG BB - red, green & blue channels respectively

Now in order to add transparency to our color we need to prepend it with hexadecimal value representing the alpha (transparency).

For example if you want to set 80% transparency value to black color (#000000) you need to prepend it with CC, as a result we end up with the following color resource #CC000000.

You can read about it in more detail on my blog https://androidexplained.github.io/android/ui/2020/10/12/hex-color-code-transparency.html

A color in hexadecimal code is written as

# AA       RR    GG      BB
# Alpha  Red  Green  Blue

And for each group (AA,RR,GG,BB) possible values are :
-> 00 to FF in Hex , i.e. 0 to 255 in decimal

So to change the Alpha/AA/Transparency of the color, you just have to change first two Hexadecimal Characters in the Hex String which is represented by the AA group

For 50% ->                  255 x 0.50= 128 (approx/rounded)
And convert                128 to Hex = 08

So Green #00FF00 with 50% Alpha/Transparency will be #0800FF00