css Question posted in
Some basic documentation can be found here.

css color transparant color: #00000030; works?

I found this ‘trick’ a while ago. Adding two digits to a hex color sets the transparency.
This works in Google Chrome (2024-04) and the Edge browser.
color: #000000; (= black)
color: #00000030; (=black transparent to 30%)
30 is an example you can change it to a desired level of transparency.
Does anyone know if this will be a standard? (I hope so!) I can’t find any information on this.

Tags:

2

Answers


  1. 0

    You can use that notation but its values are in the Hex color space that goes from 00 to ff (ff is 255 in decimal encoding), so the number 30 doesn’t mean 30%.

    You can see an example on the MDN color page that the 50% transparent red is:

    color: #ff000080;

    There is a nice table on this page with the Hex values listed:

    How Hex Colors Work

    Also read here: Hex colors: Numeric representation for "transparent"?

    Login or Signup to reply.
  2. 0

    Short answer

    Hex always supports an additional 4th channel for the alpha (transparency).
    As a 16-bit color (#RGBA) or 32-bit color (#RRRGGBBAA) the last or last 2 digits stand for the alpha channel.
    However, note that the alpha channel unlike Adobe RGBA, does not use numeric numbers but also Hex numbers.

    30 (hexadecimal) = (3×16) + (0x1)
    30 (hexadecimal) = 48 + 0
    30 (hexadecimal) = 48

    as the alpha channel with 2 digits is 8-bit (2^8 = 256) you have 48/256 transparency (18.75%).

    The other way around to really get 30% you can use this calculation:

    x = 256 * 30%
    x = 256 * 0.3
    X = 76.8
    x = 77

    hexadecimal = 77 (decimal)
    hexadecimal = 77 / 16
    hexadecimal = 4 remainder 13 (D)
    hexadecimal = 4D

    Extended Answer Addressing Comments

    Hex has to be split from normal (Adobe) RGB or RGBA. The main difference is that (Adobe) RGB/RGBA uses decimal numbers and always 8-bit color channels. The alpha value there is given as a decimal float number ranging from 0 to 1 or as a float percentage number.
    Hex is also an RGB/RGBA but with either 4-bit or 8-bit color channels where the alpha value is as well either the 4-bit or 8-bit color:

    | Type         | Format    | Range                           | Bit |
| ------------ | --------- | ------------------------------- | --- |
| 3-digit Hex  | #RGB      | 0-F, 0-F, 0-F                   | 12  |
| 4-digit Hex  | #RGBA     | 0-F, 0-F, 0-F, 0-F              | 16  |
| 6-digit Hex  | #RRGGBB   | 00-FF, 00-FF, 00-FF             | 24  |
| 8-digit Hex  | #RRGGBBAA | 00-FF, 00-FF, 00-FF, 00-FF      | 32  |
| (Adobe) RGB  | RGB       | 0-255, 0-255, 0-255             | 24  |
| (Adobe) RGBA | RGBA      | 0.255, 0-255, 0-255, 0-1/0-100% | 32  |
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search