Hex representation of a color with alpha channel?

前端 未结 5 2101
情书的邮戳
情书的邮戳 2020-11-27 16:23

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?

相关标签:
5条回答
  • 2020-11-27 16:51

    It looks like there is no hex alpha format: http://www.w3.org/TR/css3-color/

    Anyway, if you use a CSS preprocessor like SASS then you can pass an hex to rgba: background:

    rgba(#000, 0.5);
    

    And the preprocessor just converts the hex code to rgb automatically.

    0 讨论(0)
  • 2020-11-27 17:00

    You could try putting the hex color into the color picker of GIMP or photo shop to get the RGB value and then using the alpha value. eg. red is #FF0000 or rgb(255,0,0) if you want red with an alpha value of .5 then rgba(255,0,0,.5).

    Maybe not exactly what you wanted but hopefully helps.

    0 讨论(0)
  • 2020-11-27 17:02

    I'm not sure if there is an official standard-

    RGBA is the representation I've seen for Web Macromedia and others use ARGB

    I believe that RGBA is the more common representation.

    If it helps this is from W3 for CSS3
    http://www.w3.org/TR/css3-color/#rgba-color

    EDIT (Patrick): quote from the above W3 link

    Unlike RGB values, there is no hexadecimal notation for an RGBA value

    0 讨论(0)
  • 2020-11-27 17:03

    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 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 Level 4 spec*)

    As of May 2019, >80% of users can be expected to understand the #RGBA format

    • Firefox has supported this syntax since Firefox 49 (Mozilla bug 567283).
    • Safari has supported this syntax since Safari 10.
    • Chrome has supported this syntax since Chrome 62. For earlier versions you could enable experimental web features to use this syntax. See Chromium Issue 618472 and Webkit bug 150853.
    • Android Apps that target Android P or newer can use this syntax
    • Opera supports this syntax in Opera 52 (or Opera 39 when experimental web features are enabled).
    • IE 11 and EdgeHTML 18 (Edge 44) do not support this syntax. Chromium-based versions of Edge will support this syntax.

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

    *Technically still in draft, but given the browser support this is unlikely to be changed.

    0 讨论(0)
  • 2020-11-27 17:09

    Chrome 52+ supports alpha hex:

    background: #56ff0077;
    

    For older browsers, you'll have to use:

    background-color: rgba(255, 220, 0, 0.3);
    
    0 讨论(0)
提交回复
热议问题