Html rgba color opacity?

Question

When we use RGBA in Html we use sth like this.

<div style="Background: rgba (x, x, x, 0.dd)">Some Content</div>

How many decimals can you go in the dd(opacity). Is it browser dependent? Or are its limits specified in HTML standards?

Answer 1

The specification says it is a <number> which is defined as:

zero or more digits followed by a dot (.) followed by one or more digits

So there is no limit specified in the CSS spec.

I'd be surprised if any human eye could distinguish beyond two decimal places though.

Answer 2

The value can be any number between 0.0 and 1.0.

The resolution depends on the color space resolution which typically is 8-bit (future may offer higher resolutions such as 10- and 12-bit, although I doubt that will happen anytime soon, but that is why a fraction is used instead of a byte value).

The value is multiplied with the byte value so it is limited what numbers you want to use and the final value is rounded to closest integer value:

Internal byte value = round(alpha * 255);

(or an increment of 1 / 256 = 0.00390625)

to give you actual change of the final byte value and the visual appearance (assuming solid background).

I made a small script here which gives you the result from using various numbers of decimals in the fraction value - as you can see when you are at 3 decimals the values start to be similar and therefor not so useful.

ONLINE GENERATED TABLES HERE

The loop to generate the table looks like this in general:

for (; i < 1; i += 0.1) {
    num = Math.round(i * 255, 10);
    ...
}

Answer 3

The opacity property has a value set to two decimals.

All current browsers recognize this, the context is a little different for IE8 and below.