CODEWITHSUNDEEP
colorshexargb
user3332579
user3332579

Reputation: 3201

Transparent ARGB hex value

The colors in this table is all not transparent. I guess the value for the A is set to FF.

What is the code for transparency?

For example this color FFF0F8FF (AliceBlue), to a transparent code such as ??F0F8FF ?

Upvotes: 205

Views: 782891

Answers (9)

Rohit Kumar
Rohit Kumar

Reputation: 1321

Use this value for transparent Backgorund

"rgba(255, 255, 255, 0)"

Upvotes: 0

Shivaraj Patil
Shivaraj Patil

Reputation: 8364

Here is the table of % to hex values:

Example: For 85% white, you would use #D9FFFFFF. Here 85% = "D9" & White = "FFFFFF"


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

How is it calculated?

Quoting maleta in a now-deleted comment:

FF is number written in hex mode. That number represent 255 in decimal. For example, if you want 42% to calculate you need to find 42% of numbeer 255 and convert that number to hex. 255 * 0.42 ~= 107 107 to hex is "6B
-- maleta (2016-12-27 10:32:28Z, License: CC BY-SA 3.0)

Upvotes: 597

Aditya Singh Rajput
Aditya Singh Rajput

Reputation: 71

Just use this:

android:background="#00FFFFFF"

it will do your work.

Upvotes: 6

Abdulbasit
Abdulbasit

Reputation: 780

The standard hex color code has six characters eg #000000 - black, and the hex color code with more than six characters(likely 8 characters eg #82bc00 - green) exceeds the standard amount making the other two last characters define the transparency level. so if you need to attain absolute transparency you can add 00 to any hex color but for uniformity you can just use #00000000

.green{
  background: #82bc00      /*actual green*/
}
.subgreen{
  background: #82bc0070    /*green with little transparency*/
}
.greenparency{
  background: #82bc0040    /*green with much transparency*/
}
.transparency{
  background: #82bc0000    /*full transparency over green*/
}
<div class="green"> green background color </div>
<div class="subgreen"> green background color </div>
<div class="greenparency"> green background color </div>
<div class="transparency"> green background color </div>

Upvotes: 1

Youp Bernoulli
Youp Bernoulli

Reputation: 5635

BE AWARE 👇🏼

In HTML/CSS (browser code) the format is #RRGGBBAA with the alpha channel as last two hexadecimal digits.

Upvotes: 10

sulaimon-olaniran
sulaimon-olaniran

Reputation: 186

Just came across this and the short code for transparency is simply #00000000.

Upvotes: 4

Raphael Aleixo
Raphael Aleixo

Reputation: 607

If you have your hex value, and your just wondering what the value for the alpha would be, this snippet may help:

const alphaToHex = (alpha => {
  if (alpha > 1 || alpha < 0 || isNaN(alpha)) {
    throw new Error('The argument must be a number between 0 and 1');
  }
  return Math.ceil(255 * alpha).toString(16).toUpperCase();
})

console.log(alphaToHex(0.45));

Upvotes: 2

user1626594
user1626594

Reputation:

Adding to the other answers and doing nothing more of what @Maleta explained in a comment on https://stackoverflow.com/a/28481374/1626594, doing alpha*255 then round then to hex. Here's a quick converter http://jsfiddle.net/8ajxdLap/4/

function rgb2hex(rgb) {
  var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?((?:[0-9]*[.])?[0-9]+)[\s+]?\)/i);
  if (rgbm && rgbm.length === 5) {
    return "#" +
      ('0' + Math.round(parseFloat(rgbm[4], 10) * 255).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
  } else {
    var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    if (rgbm && rgbm.length === 4) {
      return "#" +
        ("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
        ("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
        ("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
    } else {
      return "cant parse that";
    }
  }
}

$('button').click(function() {
  var hex = rgb2hex($('#in_tb').val());
  $('#in_tb_result').html(hex);
});
body {
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Convert RGB/RGBA to hex #RRGGBB/#AARRGGBB:<br>
<br>
<input id="in_tb" type="text" value="rgba(200, 90, 34, 0.75)"> <button>Convert</button><br>
<br> Result: <span id="in_tb_result"></span>

Upvotes: 10

theHacker
theHacker

Reputation: 4043

Transparency is controlled by the alpha channel (AA in #AARRGGBB). Maximal value (255 dec, FF hex) means fully opaque. Minimum value (0 dec, 00 hex) means fully transparent. Values in between are semi-transparent, i.e. the color is mixed with the background color.

To get a fully transparent color set the alpha to zero. RR, GG and BB are irrelevant in this case because no color will be visible. This means #00FFFFFF ("transparent White") is the same color as #00F0F8FF ("transparent AliceBlue"). To keep it simple one chooses black (#00000000) or white (#00FFFFFF) if the color does not matter.

In the table you linked to you'll find Transparent defined as #00FFFFFF.

Upvotes: 238

Related Questions