8-Digit Hex Is Not a Background-Color Value

How to bind 8 digit Hex color in angular

There are multiple ways to achieve this using [style] and [ngStyle]

1. Define color directly in template using [ngStyle]

<span [ngStyle]="{'background-color': '#FFFFFF80'}">
  Background 1
</span>

2. Define properties object in component and assign it to [ngStyle] in template

Component

backgroundProperties = {
  'background-color': '#FFFFFF80'
};

Template

<span [ngStyle]="backgroundProperties">
  Background 2
</span>

3. Assign color using [style.background-color]

Component

backgroundColor = '#FFFFFF80';

Template

<span [style.background-color]="backgroundColor">
  Background 3
</span>

Working example: Stackblitz

8 digit hex rgba value

Black has no red, green or blue, but it is not transparent, so the alpha needs to be ff. Therefore the combination you seek is

000000ff

Convert 8-digit hex colors to rgba colors?

I have made a quick JSfiddle form that allows you to convert from 8-digit hex code into CSS rgba values ;)

https://jsfiddle.net/teddyrised/g02s07n4/embedded/result/

The basis is rather simple — to split the string you have provided into parts of 2-digits, and perform conversion into percentage ratios for the alpha channel, and to decimals for the RGB channels. The markup is as follow:

<form action="">
    <select id="format">
        <option value="rgba">RGBa: RRGGBBAA</option>
        <option value="argb">aRGB: AARRGGBB</option>
    </select>
    <input type="text" id="hex" value="#949494E8" />
    <button>Convert</button>
</form>
<p id="rgba"></p>

The logic:

// Remove hash
var hex = $('#hex').val().slice(1);

// Split to four channels
var c = hex.match(/.{1,2}/g);

// Function: to decimals (for RGB)
var d = function(v) {
    return parseInt(v, 16);
};
// Function: to percentage (for alpha), to 3 decimals
var p = function(v) {
    return parseFloat(parseInt((parseInt(v, 16)/255)*1000)/1000);
};

// Check format: if it's argb, pop the alpha value from the end and move it to front
var a, rgb=[];
if($('#format').val() === 'argb') {
    c.push(c.shift());
}

// Convert array into rgba values
a = p(c[3]);
$.each(c.slice(0,3), function(i,v) {
    rgb.push(d(v));
});

The gist of conversion is as follow:

• Converting the RGB channels in hex, into decimal values. This is done by using parseInt(hexValue, 16).
• Converting the alpha channel in hex, into percentage ratio. This is done by simply converting it to decimal values (see above point), and calculating its relative value to 255.

Why does the below mentioned hex color code visually have the same color as the 6 digit hex code?

You are correct that second digit in each pair represents a shade. This is calculated from the hexadecimal representation of the number. Specifically, this is x * 16 * x for each pair. For example, F has a hexadecimal value of 15, so the pair FF would be 15 * 16 + 15. This would give you 255, which is the maximum value possible.

This can be seen in the following:

.color1 {  background: #A1BD24; /* rgb(161, 189, 36) */}
.color2 {  background: #A0B020; /* rgb(160, 176, 32) */}
.color3 {  background: #AB2; /* rgb(170, 187, 34) */}
.color4 {  background: #AABB22; /* rgb(170, 187, 34) */}

<div class="color1">Test 1</div><div class="color2">Test 2</div><div class="color3">Test 3</div><div class="color4">Test 4</div>

Hex colors in Android are sometimes eight digits. How? What is the difference between #FFFFFF and #FFFFFF00?

The extra two digits are used to define the colors' transparency, or alpha channel.

Android uses the ARGB format (or AARRGGBB as you use in your example).

For more (Android-specific) information, take a look at the Color documentation.

Hex colors: Numeric representation for transparent ?

Transparency is a property outside the color itself, and it's also known as alpha component. You can't code transparency as pure RGB (which stands for red-green-blue channels), but you can use the RGBA notation, in which you define the color + alpha channel together:

color: rgba(255, 0, 0, 0.5); /* red at 50% opacity */

If you want "transparent", just set the last number to 0, regardless of the color. All of the following result in "transparent" even though the color part is set to 100% red, green and blue respectively:

color: rgba(255, 0, 0, 0); /* transparent */
color: rgba(0, 255, 0, 0); /* transparent */
color: rgba(0, 0, 255, 0); /* transparent */

There's also the HEXA notation (or RRGGBBAA) now supported on all major browsers, which is pretty much the same as RGBA but using hexadecimal notation instead of decimal:

color: #FF000080; /* red at 50% opacity */

Additionally, if you just want a transparent background, the simplest way to do it is:

background: transparent;

You can also play with opacity, although this might be a tad too much and have unwanted side effects in your case:

.half {
  opacity: 0.5;
  filter: alpha(opacity=50); /* needed to support IE, my sympathies if that's the case */
}

ARGB Hex color not working in css html

Use rgba(255,153,128,1.0) instead of your hex value (though if that really is ARGB it's the same as #ff9980 in RGB - if you meant RGBA then you'll need rgba(255,255,153,0.5)).

---

Related Topics