CSS hexadezimale RGBA?

199

Ich weiß, dass du schreiben kannst ...

background-color: #ff0000;

... wenn Sie etwas wollen, das rot ist.

Und du kannst schreiben ...

background-color: rgba(255, 0, 0, 0.5);

... wenn Sie etwas Rotes und Durchscheinendes wollen.

Gibt es eine knappe Möglichkeit, teilweise transparente Farben hexadezimal zu schreiben? Ich möchte so etwas wie:

background-color: #ff000088; <--- the 88 is the alpha

... oder ...

background-color: #ff0000 50%;

Ich bekomme alle meine Farben hexadezimal und es ist ärgerlich, sie alle in die Dezimalskala 0-255 konvertieren zu müssen.

Li Haoyi
quelle
1
Sie können mit verschiedenen Notationen experimentieren, aber ich habe es nicht geschafft. rgb(0xff,\x80,#44)erstaunlich scheint Octal Darstellung ein wenig nach York rgb(0100, 0200,0300)ist#4080C0
yunzen
Möglicherweise möchten Sie ColorPic verwenden, das die Dezimalzahlen für eine ausgewählte Farbe zeigt iconico.com/colorpic
yunzen
2
Wie Slomojo vorgeschlagen hat, können Sie in WENIGER Hintergrundfarben ausführen: # ff0000 + rgba (0, 0, 0, .8); Dadurch wird das Hex für Sie konvertiert und die Transparenz wird weiterhin angewendet. Dies ist jedoch nicht mit nativem CSS möglich.
fl3x7
1
Der Vollständigkeit halber kann dies , wie Slomojo und fl3x7 erläutern, problemlos in Sass durchgeführt werden : background-color: opacify(#ff0000, 0.5);oder background-color: transparentize(#ff0000, 0.5);Sie können diesen Sass-Funktionen auch Sass-Hex-Farbvariablen bereitstellen.
Adam Caviness
1
Mögliches Duplikat der Hex-Darstellung einer Farbe mit Alphakanal?
Thelem

Antworten:

112

Das CSS-Farbmodul Level 4 unterstützt wahrscheinlich die 4- und 8-stellige hexadezimale RGBA-Notation!

Vor drei Wochen (18. Dezember 2014) wurde der Entwurf des CSS Color Module Level 4-Editors der CSS W3C-Arbeitsgruppe vorgelegt. Obwohl in einem Zustand, der Änderung stark anfällig ist, impliziert die aktuelle Version des Dokuments , das in der etwas nahen Zukunft CSS wird sowohl die 4 und 8-stellige hexadezimale Notation RGBA unterstützen.

Hinweis: Im folgenden Zitat sind irrelevante Abschnitte ausgeschnitten, und die Quelle wurde zum Zeitpunkt des Lesens möglicherweise stark geändert (wie oben erwähnt handelt es sich um einen Entwurf des Herausgebers und nicht um ein endgültiges Dokument).
Wenn sich die Dinge stark geändert haben, hinterlassen Sie bitte einen Kommentar, damit ich diese Antwort aktualisieren kann!

§ 4.2. Die hexadezimalen RGB-Notationen: #RRGGBB

Die Syntax von a <hex-color>ist ein <hash-token>Token, dessen Wert aus 3, 4, 6 oder 8 hexadezimalen Ziffern besteht . Mit anderen Worten, eine Hex-Farbe wird als Hash-Zeichen "#" geschrieben, gefolgt von einer Anzahl von Ziffern 0-9oder Buchstaben a-f(der Fall der Buchstaben spielt keine Rolle - #00ff00ist identisch mit #00FF00).

8 Ziffern

Die ersten 6 Ziffern werden identisch mit der 6-stelligen Notation interpretiert. Das letzte Ziffernpaar, das als Hexadezimalzahl interpretiert wird, gibt den Alphakanal der Farbe an, wobei 00eine vollständig transparente Farbe und ffeine vollständig undurchsichtige Farbe dargestellt wird.

Beispiel 3
Mit anderen Worten, #0000ffccrepräsentiert die gleiche Farbe wie rgba(0, 0, 100%, 80%)(ein leicht transparentes Blau).

4 Ziffern

Dies ist eine kürzere Variante der 8-stelligen Notation, die auf die gleiche Weise wie die 3-stellige Notation "erweitert" wird. Die erste Ziffer, die als Hexadezimalzahl interpretiert wird, gibt den roten Kanal der Farbe an, wobei 0der minimale Wert und fder maximale Wert dargestellt werden. Die nächsten drei Ziffern stehen für die grünen, blauen und Alpha-Kanäle.

Was bedeutet das für die Zukunft der CSS-Farben?

Unter der Annahme, dass dies nicht vollständig aus dem Level 4-Dokument entfernt wurde, können wir unsere RGBA-Farben (oder HSLA-Farben, wenn Sie einer dieser Typen sind) in Browsern, die die Farbe unterstützen , bald im hexadezimalen Format definieren Syntax von Modul Level 4.

Beispiel

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

Wann kann ich dies in meinen kundenorientierten Produkten verwenden?

Tumble Weed ist die einzige echte Antwort ...

Abgesehen von allen Witzen: Es ist derzeit erst Anfang 2015, daher werden diese noch einige Zeit in keinem Browser unterstützt - auch wenn Ihr Produkt nur für die aktuellsten Browser ausgelegt ist, die Sie wahrscheinlich verwenden werden Sie werden dies in Kürze nicht mehr in einem Produktionsbrowser in Aktion sehen.

Aktuelle Browserunterstützung für die Farbnotation #RRGGBBAA anzeigen

Die Art und Weise, wie CSS funktioniert, bedeutet jedoch, dass wir diese heute tatsächlich verwenden können! Wenn Sie sie jetzt wirklich verwenden möchten, ignorieren nicht unterstützende Browser die neuen Eigenschaften einfach, bis sie als gültig erachtet werden, solange Sie einen Fallback hinzufügen.

figure {
  margin: 0;
  padding: 4px;
  
  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;
  
  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}
<figure>Hello, world!</figure>

Solange Sie diese Antwort in einem Browser anzeigen, der das unterstützt backgroundcolor anzeigen, der Eigenschaften und in CSS unterstützt, <figure>sieht das Ergebnis des obigen Snippets sehr ähnlich aus:

Code Snippet Ergebnisbild

Verwenden Sie die neueste Version von Chrome unter Windows (v39.0.2171), um unsere zu überprüfen <figure> Element , sehen Sie Folgendes:

Beispiel für einen Elementinspektor

Der 6-stellige hexadezimale Fallback wird durch das überschrieben rgba() Werten , und unsere 8-stelligen hexadezimalen Werte werden ignoriert, da sie derzeit vom CSS-Parser von Chrome als ungültig eingestuft werden. Sobald unser Browser diese 8-stelligen Werte unterstützt, überschreiben diese die Werte rgba().

UPDATE 2018-07-04: Firefox, Chrome und Safari unterstützen diese Notation jetzt. Edge fehlt noch, wird aber wahrscheinlich folgen ( https://caniuse.com/#feat=css-rrggbbaa ).

James Donnelly
quelle
1
Ich erinnere mich, dass dies spätestens vor einem Jahr in den Mailinglisten erwähnt wurde (die Idee, ein 4- / 8-stelliges Hex zu haben, ist nichts Neues). Ich bin froh zu sehen, dass Colors 4 vorerst eingegeben wurde.
BoltClock
@BoltClock hoffentlich bleibt es auch hier!
James Donnelly
Firefox Nightly hat dies gerade implementiert :)
Florrie
/* Fall... foward? */»Ich schlage vor, vorwärts zu springen. Fallback und Jumpforward: ^ p
WoodrowShigeru
Fügen Sie einfach einen nützlichen Link hinzu. Link enthält Deckkraftwertliste in hex. gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
Ashish Kumar
33

Ich habe die Antwort gefunden, nachdem ich die Erweiterung der Frage veröffentlicht habe. Es tut uns leid!

MS Excel hat geholfen!

Fügen Sie einfach das Hex-Präfix zum Hex-Farbwert hinzu, um ein Alpha hinzuzufügen, das die entsprechende Deckkraft wie der% -Wert hat.

(in rbga wird die prozentuale Opazität wie oben erwähnt als Dezimalzahl ausgedrückt)

Opacity %   255 Step        2 digit HEX prefix
0%          0.00            00
5%          12.75           0C
10%         25.50           19
15%         38.25           26
20%         51.00           33
25%         63.75           3F
30%         76.50           4C
35%         89.25           59
40%         102.00          66
45%         114.75          72
50%         127.50          7F
55%         140.25          8C
60%         153.00          99
65%         165.75          A5
70%         178.50          B2
75%         191.25          BF
80%         204.00          CC
85%         216.75          D8
90%         229.50          E5
95%         242.25          F2
100%        255.00          FF
T9b
quelle
Verstehe nicht wirklich. Meinst du #FF00000Cgleichbedeutend mit rgba(255,0,0,0.05)?
Yunzen
Es ist ein Präfix, kein Suffix. Das heißt , Sie es auf der Vorderseite des 6 - stelligen Hex - Farbwert #000000wird #7F000000.
T9b
7
@ T9b: CSS3 unterstützt diese Notation nicht. Ende der Geschichte.
PointedEars
@PointedEars in beiden Punkten falsch. Das OP erwähnt CSS3 nicht ausdrücklich, und diese Frage, von der ich gedacht hätte, dass sie eher mit IE-spezifischen Problemen zusammenhängt, von denen wir alle wissen, dass sie schwierig sind. Trotzdem verwendet der IE sowohl CSS- als auch Hex-Transparenzwerte in seinem CSS.
T9b
4
@ T9b Unsinn. Das OP hat eine CSS- Frage zu RGBA-Werten. Vor CSS3 gibt es keine RGBA-Unterstützung in CSS. Wenn IE / MSHTML Ihre Notation unterstützt, ist dies proprietär , nicht kompatibel und von Natur aus unzuverlässig. Und sicherlich schlagen Sie nicht vor, clientseitiges Scripting zu verwenden, damit diese Notation funktioniert, oder? Denn das wäre nicht kompatibel und auch unzuverlässig.
PointedEars
22
RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';
James Alarie
quelle
var rgb = '#ffabcd'; var a = '0.5'; var matches = rgb.match(/#([\da-f]{2})([\da-f]{2})([\da-f]{2})/i); var rgba = 'rgba(' + matches.slice(1).map(function(m) { return parseInt(m, 16); }).concat(a) + ')';
PointedEars
2
Wenn Sie aus einer Welt der Reaktion kommen:<div style={ { backgroundColor: `rgba(${ parseInt(color.substring(1,3),16) }, ${ parseInt(color.substring(3,5),16) }, ${ parseInt(color.substring(5,7),16) }, 0.5)` } }></div>
Atul Yadav
14

Siehe hier http://www.w3.org/TR/css3-color/#rgba-color

Dies ist höchstwahrscheinlich nicht möglich, da 0xFFFFFFFF größer als der Maximalwert für 32-Bit-Ganzzahlen ist

Greif
quelle
28
#ffffff(sechs hexadezimale Ziffern) ist tatsächlich ein 24-Bit- Farbwert. 0xFFFFFFFF ist tatsächlich 2³² - 1 und kann als vorzeichenlose 32-Bit-Ganzzahl dargestellt werden. Ich denke, der Grund, warum #ffffffff(acht hexadezimale Ziffern) nicht angegeben wird, ist sowohl, dass CSS-Farben im sRGB-Farbraum verwurzelt sind, als auch, dass eine acht hexadezimale Notation mit einem Anzeigegerät, das eine Farbtiefe von 32 Bit unterstützt, nicht eindeutig wäre. Denken Sie daran, dass es immer noch #fffso gibt, dass es rgb(100%, 100%, 100%)- weiß - sowohl mit einer Farbtiefe von 8 Bit (256 Farben) als auch 16 Bit (65536 oder 64K Farben) bedeutet.
PointedEars
5
Genau das kann eine 32-Bit-Ganzzahl halten. 2 hexadezimale Ziffern können bis zu 8 binäre Ziffern enthalten. Oder ... 8 hexadezimale Ziffern können bis zu 32 binäre Ziffern enthalten.
Pijusn
Obwohl es keinen Hauptgrund gibt, warum die CSS-Funktion nicht von Anfang an so entworfen werden sollte (und rgba (0.0, 0.5, 1.0) schwebt, damit Normalen mit den anderen Farbfunktionen übereinstimmen). Die Unterstützung von 32-Bit-Anzeigefarben gibt es bei 6-stelligem RGB zunächst nicht und ist wirklich ein Randfall. Ich habe kein Problem mit dem Erlernen verschiedener Formate, aber es gibt Fälle, in denen Sie möglicherweise eine dynamische Farbe in Hex erhalten und zur Laufzeit CSS daraus erstellen müssen. Dies erfordert den zusätzlichen Schritt der Konvertierung von hexadezimal in dezimal, wenn Sie Alpha hinzufügen möchten, was klobig ist.
Beejor
13

Chrome 52+ unterstützt Alpha Hex:

background: #56ff0077;
Oded Breiner
quelle
4
Ich war aufgeregt, dies zu sehen, und versuchte es dann in devtools auf Chrome 55. Keine Würfel, es fehlerhaft als ungültiger Eigenschaftswert ...¯\_(ツ)_/¯
ericsoco
1
Anscheinend gab es verschiedene Probleme. Hier ist die Statusseite für die Funktion.
Billy
Chrome hat die Unterstützung entfernt, Safari und Firefox haben Unterstützung. Verwenden Sie dies nicht.
Fall
5
Ab Juli 2019 unterstützen 84,5% aller Browser diese Funktion weltweit. caniuse.com/#search=rrggbbaa
André Kuhlmann
10

Verwenden Sie red, green, blueum RGBA zu konvertieren:

background-color: rgba(red($color), green($color), blue($color), 0.2);
Jeremy Lynch
quelle
3
SASS unterstützt Hintergrundfarbe: rgba ($ color, .2);
Dschibe
Dies
7

Ich fürchte, das ist nicht möglich. Das rgbaFormat, das Sie kennen, ist das einzige.

Madaras Geist
quelle
1
@mdmullinax: Aber wer gibt Hex-Farben in HSL-Notation an?
BoltClock
1
Ich verbinde alles im Leben mit der HSLA-Notation, es ist eine Version der Synästhesie :)
MikeM
@mdmullinax: Oh, das ist eigentlich ziemlich genial!
BoltClock
6
@mdmullinax: Dies kann Sie erfreuen, wenn Sie es noch nicht gesehen haben: momeffinghsl.com
BoltClock
@ BoltClock Ich mag diese Seite, Paul Irish ist Gewinn
MikeM
5

Wenn Sie WENIGER verwenden können, gibt es eine Überblendfunktion.

@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);

background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color); 

// result: 
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));
Julian Mann
quelle
und sass / scss hat eine äquivalente Funktion:rgba(base-color, 0.5)
LocustHorde
2

Charmanter Prinz:

Nur der Internet Explorer erlaubt die 4-Byte-Hex-Farbe im ARGB-Format, wobei A der Alpha-Kanal ist. Es kann zum Beispiel in Verlaufsfiltern verwendet werden:

filter  : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";

Wobei dir sein kann: 1 (horizontal) oder 0 (vertikal) Und die Farbketten können hexadezimale Farben (# FFAAD3) oder argb hexadezimale Farben (# 88FFAAD3) sein.

Lajos Meszaros
quelle
0

Nun, verschiedene Farbnotationen müssen Sie lernen.
Kuler gibt Ihnen eine bessere Chance, Farbe und in mehreren Notationen zu finden.
Hex unterscheidet sich nicht von RGB, FF = 255 und 00 = 0, aber das wissen Sie. In gewisser Weise muss man es sich vorstellen.
Ich benutze Hex, RGBA und RGB. Wenn keine Massenkonvertierung erforderlich ist, können Sie sich bei manueller Ausführung einige ungerade 100 Farben und deren Codes merken.
Für die Massenkonvertierung schreiben Sie ein Skript wie das von Alarie. Viel Spaß mit Farben.


quelle
-2

warum nicht verwenden background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

Wenn Sie eine Farbe für einen Text oder wahrscheinlich ein Element auswählen, sollte dies viel einfacher sein.

Charmanter Prinz
quelle
9
-1 Deckkraft wirken sich auf den gesamten Inhalt aus, nicht nur auf die Hintergrundfarbe
yunzen
dann kann das Objekt verdoppelt werden, eines sollte das enthaltende Element sein, das andere sollte dasjenige innerhalb des Containers sein, das Deckkraft hat. denn von der frage will der benutzer eine andere methode als die konventionelle rgba.
Charmanter Prinz
1
Er möchte immer noch das gleiche Ergebnis, und ich sollte besser rgba () oder eine andere Notation verwenden, als HTML zu ändern.
FelipeAls
Dies ist die Antwort, nach der ich gesucht habe. Lassen Sie die Hex-Farben in Ruhe und ändern Sie die Deckkraft mithilfe der opacityCSS-Eigenschaft.
hier