Search code examples
colorsstandardsw3c

Hex representation of a color with alpha channel?


Is there a W3 or any other noteworthy standard on how to represent a color (including alpha channel) in hex format?

Is it #RGBA or #ARGB?


Solution

  • In CSS 3, to quote from the spec, "there is no hexadecimal notation for an RGBA value" (see CSS Level 3 spec). Instead you can the use rgba() functional notation with decimals or percentages, e.g. rgba(255, 0, 0, 0.5) would be 50% transparent red. RGB channels are 0-255 or 0%-100%, alpha is 0-1.

    In CSS Color Level 4, you can specify the alpha channel using the 7th and 8th characters of an 8 digit hex colour, or 4th character of a 4 digit hex colour (see CSS Color Module Level 4 spec*)

    As of July 2022, >95% of users can be expected to understand the #RGBA format

    It has been supported since:

    • Firefox 49, released Sept 2016 (Mozilla bug 567283).
    • Safari 10, released Sept 2016.
    • Chrome 62, released Oct 2017. For earlier versions you could enable experimental web features to use this syntax. See Chromium Issue 618472 and Webkit bug 150853.
    • Opera 52, released March 2018 (or Opera 39 when experimental web features are enabled).
    • Edge 79, released Jan 2020 (the first version of Edge based on Chromium)
    • Samsung Internet 8.2, released Dec 2018
    • Android P (your app must target Android P or newer)

    It is not supported in:

    • IE
    • Original Edge (version numbers up to and including 18)
    • Opera Mini
    • UC Browser

    Up to date browser support information is available on CanIUse.com