Hex-Darstellung einer Farbe mit Alphakanal?

117

Gibt es einen W3 oder einen anderen bemerkenswerten Standard für die Darstellung einer Farbe (einschließlich Alphakanal) im Hex-Format?

Ist es #RGBA oder #ARGB?

Patrick Klug
quelle
8
Es kommt in CSS Color Level 4 Quelle (siehe vierter Aufzählungspunkt)
Šime Vidas
@ ŠimeVidas Wenn du das in eine Antwort gegeben hättest, hätte ich dich positiv bewertet.
Ciro Santilli 法轮功 冠状 病 六四 事件 13
@ Cirosantilli Sehe ich so aus, als ob ich den Repräsentanten brauche? :-P
Šime Vidas
1
@ ŠimeVidas lol, wenn Sie einige teilen möchten, dann ... =)
Ciro Santilli 法轮功 冠状 病 六四 事件 法轮功
Hier gibt es eine ähnliche CSS-spezifische Frage: CSS hexidecimal RGBA?
James Donnelly

Antworten:

82

In CSS 3, um aus der Spezifikation zu zitieren, "gibt es keine hexadezimale Notation für einen RGBA-Wert" (siehe CSS Level 3-Spezifikation ). Stattdessen können Sie die Funktionsnotation rgba () mit Dezimalstellen oder Prozentsätzen verwenden, z. B. wäre rgba (255, 0, 0, 0,5) zu 50% transparent rot. RGB-Kanäle sind 0-255 oder 0% -100%, Alpha ist 0-1.

In CSS 4 * können Sie den Alphakanal mit dem 7. und 8. Zeichen einer 8-stelligen Hex-Farbe oder dem 4. Zeichen einer 4-stelligen Hex-Farbe angeben (siehe CSS Level 4-Spezifikation *).

Ab Mai 2019 ist zu erwarten, dass> 80% der Benutzer das # RGBA-Format verstehen

  • Firefox unterstützt diese Syntax seit Firefox 49 ( Mozilla-Fehler 567283 ).
  • Safari unterstützt diese Syntax seit Safari 10.
  • Chrome unterstützt diese Syntax seit Chrome 62. In früheren Versionen können Sie experimentelle Webfunktionen aktivieren, um diese Syntax zu verwenden. Siehe Chromium-Problem 618472 und Webkit-Fehler 150853 .
  • Android Apps, die auf Android P oder höher abzielen, können diese Syntax verwenden
  • Opera unterstützt diese Syntax in Opera 52 (oder Opera 39, wenn experimentelle Webfunktionen aktiviert sind).
  • IE 11 und EdgeHTML 18 (Edge 44) unterstützen diese Syntax nicht. Chromium-basierte Versionen von Edge unterstützen diese Syntax.

Aktuelle Informationen zur Browserunterstützung finden Sie auf CanIUse.com

* Technisch noch im Entwurf, aber angesichts der Browserunterstützung ist es unwahrscheinlich, dass dies geändert wird.

thelem
quelle
2
Ab sofort scheint Mozilla (Firefox 49) #RRGGBBAA und #RGBA
Shiyaz
92

Es sieht so aus, als gäbe es kein Hex-Alpha-Format: http://www.w3.org/TR/css3-color/

Wenn Sie einen CSS-Präprozessor wie SASS verwenden, können Sie ein Hex an Folgendes übergeben rgba: background:

rgba(#000, 0.5);

Und der Präprozessor konvertiert den Hex-Code einfach automatisch in RGB.

Guitarranalon
quelle
15

Ich bin mir nicht sicher, ob es einen offiziellen Standard gibt.

RGBA ist die Darstellung, die ich für Web Macromedia gesehen habe und andere verwenden ARGB

Ich glaube, dass RGBA die häufigere Vertretung ist.

Wenn es hilft, ist dies von W3 für CSS3
http://www.w3.org/TR/css3-color/#rgba-color

EDIT (Patrick): Zitat aus dem obigen W3-Link

Im Gegensatz zu RGB-Werten gibt es für einen RGBA-Wert keine hexadezimale Notation

Kelly Gendron
quelle
2
Auch die CSS-Funktion zum Festlegen von Farben mit Alphas ist rgba ()
Amber
8
Über den von Ihnen geposteten W3-Link: Im Gegensatz zu RGB-Werten gibt es für einen RGBA-Wert keine hexadezimale Notation.
Patrick Klug
2
Ich habe schon # RGB, A gesehen. Seltsam.
Joshua
Für Android Drawables scheint es ARGB zu sein: developer.android.com/reference/android/graphics/drawable/…
Derek Kurth
10

Chrome 52+ unterstützt Alpha Hex:

background: #56ff0077;

Für ältere Browser müssen Sie Folgendes verwenden:

background-color: rgba(255, 220, 0, 0.3);
Oded Breiner
quelle
3
Nein, es sei denn, Sie aktivieren experimentelle Webfunktionen, da dies unter Android zu Problemen führte. In meiner Antwort oben finden Sie Details zur Browserunterstützung.
Thelem
3

Sie können versuchen, die hexadezimale Farbe in den Farbwähler von GIMP oder Photo Shop zu legen, um den RGB-Wert zu erhalten, und dann den Alpha-Wert verwenden. z.B. rot ist #FF0000oder rgb(255,0,0) wenn Sie rot mit einem Alpha-Wert von 0,5 wollen, dann rgba(255,0,0,.5).

Vielleicht nicht genau das, was Sie wollten, aber hoffentlich hilft.

Jinjubei
quelle
1
Dies wurde abgelehnt, was ein bisschen hart erscheint. Es beantwortet nicht die gestellte Frage, aber die Frage sagt nicht, warum sie es wissen wollen. Wenn sie nur eine RGBA-Farbe in CSS verwenden möchten, ist diese Antwort richtig.
Thelem