Understanding colors on Android (six characters)

Question

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.

Sloganeer

https://10x-programming.com/hex-values-to-decimal-and-percentage-converter Use this handy online tool instead – Toxemia

Answer 1

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.

Liggett

And how to set textView transparency through code? I want to convert ARGB value to int, so I could use it afterwards in textView.setBackgroundColor(int color) method. Is it possible? Any other way to achieve it? – Terraqueous

@Marek: An ARGB value is an int, effectively. See the docs at developer.android.com/reference/android/graphics/Color.html (find << in the page). – Liggett

but it is not formated as #AARRGGBB. It is then formated as 0xAARRGGBB. Thats why I couldnt use it in setBackgroundColor method. I could use Color.parseColor("#AARRGGBB) – Terraqueous

@Marek: It's not "formatted" - it's just an integer. You can combine the various bits as listed in the documentation. – Liggett

Should be alpha=B4 R=55 G=55 B=55. – Carlyle

Answer 2

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

Pompon

Base on Android Material color design guide: google.com/design/spec/style/… More key Hex Opacity Values: 100%: FF 87%: DE 70%: B3 54%: 8A 30%: 4D 26%: 42 12%: 1F – Sabayon

here you find all values : dtp-aus.com/hexadeci.htm and you can get alpha 0-100 by divide the number by 255 and multiple it by 100. hope it helps you – Shanta

for 12% alpha: echo "obase=16; ibase=10; (255*12+50)/100" | bc. (+50 - for rounding to nearest value, it's 100/2 actually) – Sharilyn

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

Answer 3

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.

Aisha

Answer 4

Note: This answer may not be up-to-date with current material design specs.

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

Stere

Awesome work, thanks! As of Jan 7, 2019, these values are no longer visible in the Android Material Design page you linked. Are these still the official recommended values, and is there another official source where they are stated? Thanks! – Pelag

@TheUnwokenFool, this answer may be outdated now. I don't see anything either about setting opacity levels for text. If there appear to be any contradictions go with the current guidelines. – Stere

@Stere , Your answer is really useful. One of your given link is broken. :-( – Ariadne

@RumitPatel, Ok, I just deleted the link. If you find another site that will do the conversions, feel free to add the link back in. – Stere

Answer 5

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

Ever

Answer 6

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.

Punk

Answer 7

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

Coyotillo

Answer 8

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

Genovese

Welcome to StackOverflow, please visit tour. Your reply does not help the OP as he asked about colors in Android, not Chrome or HTML. – Greenback

@Greenback yesterday , yes , but They have the same representation. – Genovese

Answer 9

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

Schechter

Answer 10

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

Futility