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.

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?

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:

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

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 ).

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

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+')';

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

Chrome 52+ unterstützt Alpha Hex:

background: #56ff0077;

Verwenden Sie red, green, blueum RGBA zu konvertieren:

background-color: rgba(red($color), green($color), blue($color), 0.2);

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

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));

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.

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.

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.