Seltsam, oder? 4-stellige Hex-Codes auch. Sie sind eine Möglichkeit, Alpha-Transparenzinformationen in das Hex-Format für Farben einzubringen. Möglicherweise sehen Sie sie plötzlich öfter, wenn Sie Chrome verwenden, da es in Version 52 eingeführt wurde und die DevTools scheinbar standardmäßig Farben mit Alpha-Transparenz in diesem Format anzeigen, selbst wenn Sie sie ursprünglich in einem anderen Format festgelegt haben.
Firefox unterstützt es auch, nur zur Information.
Schauen wir uns an, wie es funktioniert
.element {
/* This is green */
background: rgb(0, 255, 0);
/* It's the same as this */
background: #00ff00;
/* We could make it 50% transparent like this */
background: rgba(0, 255, 0, 0.5);
/* Or, with an alpha hex like this */
background: #00ff0080;
}Die letzten beiden Ziffern stellen die Alpha-Transparenz dar. Aber warten Sie mal... die letzten beiden Ziffern sind "80", nicht "50". Dazu kommen wir noch.
Erinnern Sie sich zuerst, wie 3-stellige Hex-Codes funktionieren?
.element {
/* This */
background: #900;
/* Is the same as this */
background: #990000;
}Jede Ziffer wird verdoppelt. Das Gleiche gilt für vier Ziffern.
.element {
/* This */
background: #0f08;
/* Is the same as this */
background: #00ff0088;
}Die Formate werden manchmal als #RRGGBBAA und #RGBA bezeichnet.
Der AA-Teil ist eine Hex-Darstellung von 0-100 ist wie
0 = 00
1 = 03
2 = 05
…
9 = 17
…
10 = 1A
11 = 1C
12 = 1F
…
99 = FC
100 = FF
Deshalb waren "80" in dem Beispiel oben wirklich "50% Transparenz".
Außerdem ist hier eine Tabelle, die ich von hier übernommen habe.
Siehe den Stift XjbzAW von Chris Coyier (@chriscoyier) auf CodePen.
Sollten Sie es verwenden?
Wahrscheinlich nicht. Es ist noch nicht sehr gut unterstützt und hat keine Vorteile gegenüber rgba() oder hsla(), außer vielleicht einer winzigen Menge an gesparten Bytes.
Ich verstehe Ihre Reihe wirklich nicht. 10 = 1A? 11 = 1C? 12 = 1F? Was?! Sie vermischen die Werte von 0 % – 100 % mit den Werten von 0 – 255. Wenn Sie eine Reihe mit 0 – 255 machen, sind die von Ihnen geposteten Hexadezimalwerte Unsinn. Wenn Sie eine Reihe von 0 % – 100 % machen, ist die Reihe ebenfalls Unsinn, da Sie keine Zahlen größer als 100 % haben.
Es ist sicherlich ein wenig verwirrend. Ich denke, es könnte darauf zurückzuführen sein, dass Sie *sowohl* 0 als auch 100 mit nur 2 Ziffern darstellen müssen. Wenn es nur ganze Zahlen wären, gäbe es keine gute Möglichkeit, dies zu tun.
00könnte0sein, aber Sie können von dort aus wirklich nur bis99gehen. Also könnten Sie genauso gut dasselbe System wie für die anderen Zahlen verwenden, nehme ich an.Nein, Chris, das ist nicht so verwirrend. Ihre Reihe ist einfach falsch.
Ich finde Ihren Kommentar extrem unhöflich.
Ich *finde* es verwirrend. Mir war nicht bewusst, dass Hex-Werte unterschiedlich sind, je nachdem, welche Skala sie darstellen.
Auf der 255er-Skala ist 10 0A
Auf der 100er-Skala ist 10 1A
Dadurch werden diese Sätze gleichwertig.
Ich denke, das ist richtig, aber da ich mit diesem Konzept noch ziemlich neu bin, bin ich sicher, dass ich immer noch falsch liegen könnte.
Chris,
Abgesehen von der Unhöflichkeit, denke ich, Aaron hat Recht, Sie haben die Tabelle vielleicht falsch gelesen und das missverstanden.
Die Alpha ist keine ganze Prozentzahl, sondern ein Dezimalwert von 0 bis 1. Dieser wird auf 256 mögliche Werte abgebildet. 50% Deckkraft sind 80, weil das 128 Dezimal ist, was die Hälfte von 256 ist.
Wenn Sie sich Ihre generierte Sequenz ansehen, werden Sie feststellen, dass sie Ihnen Werte liefert, die von Ihren zitierten abweichen.
0% 00
1% 03
2% 05
…
9% 17
Ihre ursprüngliche Sequenz ist also, bevor sie seltsam wird, fast um die Hälfte falsch.
Drehen Sie die Mathematik auf den Kopf. Für jeden Hex-Wert von 00 bis ff, welchen Alpha-Wert schreiben Sie?
http://codepen.io/anon/pen/ALvzab
Es ist etwas anders wegen der Rundung, aber ich denke, das zeigt viel klarer, was Sie tun (ich glaube nicht, dass meine Mathematik falsch ist).
Ups! Ich habe vergessen, mich anzumelden, als ich das getan habe. Die Vorschau zeigte nur den Link, was mich dazu verleitete, es zu übersehen.
http://codepen.io/littlefyr/pen/JRdVBa
Ich denke, das ist alles ein Missverständnis. Was Chris meint, ist
1 % Transparenz wird durch den Hex-Wert "03" dargestellt, 9 % durch "23", 12 % durch "1F", 100 % durch "FF".
Wissen Sie, was an dieser Sache wirklich frustrierend ist? Internet Explorer hatte 8-stellige Hex-Codes. Aber sie sind nicht im Format #RRGGBBAA. Sie sind im Format #AARRGGBB. Was sich "Argh!" anhört, wenn man zu viel darüber nachdenkt. ;)
Ich denke, Microsoft hat damals eine schlechte Entscheidung getroffen (zusammen mit dem ganzen Legacy-
filter-Ding), den Alpha-Kanal vor RGB zu setzen, aber hatte Recht, eine Hex-Syntax dafür zu verwenden. Aber andererseits haben wirrgbaals Farbfunktion, nichtargb, daher ist es nur natürlich, bei#rrggbbaazu bleiben.Es ist auch durchaus möglich, dass das W3C das Alpha ans Ende gesetzt hat, um Microsoft zu ärgern. Das wäre nicht das erste Mal gewesen.
Ich denke, Sie haben einen Fehler in Ihrer Erklärung von Hex.
11d == 0x1B und 12d == 0x1C, nicht 1A und 1F, wie Sie geschrieben haben.
Die Hex-Umrechnungen sind durcheinander. Es sieht so aus, als wären einige davon Dezimal und einige Prozent.
0 = 00 (Dezimal und Prozent)
1 = 01 (Dezimal)
2 = 02 (Dezimal)
…
9 = 09 (Dezimal)
10 = 1A (Prozent)
… dann wird es seltsam …
11 = 1C (Prozent)
12 = 1F (Prozent)
… egal, jemand hat es herausgefunden und es funktioniert …
254 = FE (Dezimal)
255 = FF (Dezimal)
Sieht jetzt besser aus. Das einzige verbleibende Problem ist 9 = 23 sollte 9 = 17 sein, laut dem Codepen. 23 ist der Zahlenwert. 17 ist der Hex-Wert.
Sie meinten
So funktioniert Hex eigentlich: man zählt von 0 bis F, also 0,1,..8,9,A,B,..F.
Das scheint 100%ig richtig zu sein, wenn man 0-255 in Hex darstellt, aber die Skala für 0-100 in Hex ist anders.
Chris,
Es sieht so aus, als wären die ersten Zahlen in Ihrem Beispiel falsch.
Es sollte sein
http://stackoverflow.com/questions/5445085/understanding-colors-in-android-6-characters/25170174#25170174
Die Verwirrung besteht darin, dass Hex-Werte verwendet werden, um einen Prozentsatz von 1-100 darzustellen. Hex 1A ist also 26 in Dezimal, 26 / 255 = ~ 10 %. Deshalb ist 1A 10.
Es ist nichts Kompliziertes oder Seltsames daran, nur grundlegende Mathematik und Hex-Konvertierung. Genau wie wir andere RGB-Farbkomponenten in Hex-Notation verwenden. Sie machen es komplizierter, Chris ;)
var range = 256; // 0 bis 255 oder 16*16 oder FF
var alphaLevel = 1/2; // 50% also 50/100
var x = Math.round(range * alphaLevel); // einfaches Runden, um Gleitkommazahlen zu entfernen
x.toString(16);
Binär ist der Grund, warum es Sinn ergibt.
Was Adrian gesagt hat.
Um es einfach zu halten, genau wie bei den Hex-Farben ist es ein Verhältnis. 00/00 ist Schwarz, 88/FF ist die Hälfte jeder Farbe, und FF/FF ist Vollfarbe. Dasselbe gilt für Alpha.
Grob gesagt…
00 (Hex) = 00/FF (Hex) = 0/255 (Dezimal) = 0 % Alpha
40 (Hex) = 40/FF (Hex) = 64/255 (Dezimal) = 25 % Alpha
80 (Hex) = 80/FF (Hex) = 128/255 (Dezimal) = 50 % Alpha
C0 (Hex) = C0/FF (Hex) = 192/255 (Dezimal) = 75 % Alpha
FF (Hex) = FF/FF (Hex) = 255/255 (Dezimal) = 100 % Alpha
Sie können "Alpha" durch R, G oder B ersetzen. Es funktioniert genauso.
Ihre Tabelle muss aktualisiert werden – ich habe die Zahlen links als (dezimale) Prozentsätze markiert, die Werte der Hex-Zahlen rechts geändert und die Zahlen explizit als "Hex" markiert.
0 % = 00 (Hex)
1 % = 03 (Hex)
2 % = 05 (Hex)
3 % = 08 (Hex)
4 % = 0A (Hex)
5 % = 0D (Hex)
…
9 % = 17 (Hex)
~~… dann wird es seltsam …~~
10 % = 1A (Hex)
11 % = 1C
12 % = 1F
…
99 % = FC (Hex)
100 % = FF (Hex)
Ich wollte nur sagen, dass ich die ausführlichen Artikel auf CSS-Tricks absolut liebe und es eine wunderbare, super informative Website ist. Ich benutze viele CSS-Tricks Artikel als meine Referenz!
Ich hoffe, meine Kommentare zu Hex-Farben sind hilfreich.
Angesichts der bisherigen Kommentare denke ich, wir haben einen guten Grund gefunden, uns nicht mit 4/8-stelligen Hex-Codes zu befassen, ernsthaft :). Es gibt wahrscheinlich keinen einzigen guten Anwendungsfall dafür im Vergleich zu RGBA, HSLA. Es sei denn, Sie sind ein Hex-Zauberer, sie sind völlig unintuitiv, aber wie immer bei CSS-Tricks ist es schön, über etwas zu lesen, dem man nicht oft begegnet.
Sie könnten für Tool-Generatoren nützlich sein. Wenn Sie CSS verarbeiten, muss es nicht unbedingt menschenlesbar sein. Es ist nur ein Schritt weniger, den ein Compiler machen muss. Auch ein automatisiertes Tool, das eine CSS-Datei liest, könnte einfach nach einem Muster mit Hex-Codes suchen und eine Deckkraft hinzufügen, ohne tatsächlich einen Hex-Code zu ändern.
Kurz gesagt, wie bei den MEISTEN Anwendungen von Hexadezimal ist es nützlicher für Maschinen als für Menschen. Tatsächlich, seien wir ehrlich, selbst RGB ist für viele Leute wahrscheinlich nicht so gut wie HSLA, denn wenn Sie sich für die Hauptfarbtöne Ihrer Website entschieden haben, werden die meisten Änderungen, die Sie vornehmen, darin bestehen, wie gesättigt oder ausgewaschen dieser Farbton ist. Aber HSLA vs. RGBA ist eine andere Unterhaltung.
Die Verwendung von Hex-Codes für Deckkraft hat alles damit zu tun, dass sie als Binärwert gespeichert werden.
Dieser Wert wird in Bezug auf die reale Welt in einen Prozentsatz umgerechnet, bietet Ihnen aber im Wesentlichen 256 Stufen der Deckkraft, genau wie in Photoshop. Falls Sie sich gefragt haben: Jedes Grafikprogramm hat ebenfalls die Möglichkeit, 256 Stufen zu haben (0–255) und alles dazwischen ist ein Prozentsatz davon.
Im Wesentlichen können Sie es sich so vorstellen:
0–100 % in rgba übersetzt sich effektiv sowieso in einen Wert zwischen 0 und 255 (Dezimal). Der Grund dafür ist, dass die zugrunde liegende Speicherung 8 Bit beträgt, sodass Sie ohnehin 256 Stufen zur Verfügung haben.
0–255 (Basis 10)
00–FF (Basis 16)
0000 0000 – 1111 1111 (Basis 2)
Sie können den Fortschritt der Ziffern unten sehen.
Letztendlich ist die Speicherung von Dingen in Hex wahrscheinlich nur dann wirklich nützlich, wenn Ihre Farben von einem Tool automatisch generiert werden. Es ist tatsächlich weniger Arbeit, sie in Basis 16 zu halten, als sie von einer Dezimalzahl in Basis 10 hin und her zu konvertieren (was übrigens immer noch bedeutet, sie letztendlich in Binär zu speichern).
Normalerweise liebe ich Ihre Arbeiten hier, Chris, aber Ihre Erklärung der Skala ist falsch und Sie könnten Leute, die Hex nicht so gut kennen, leicht verwirren.
Die anderen Kommentare erklären die eigentliche Reihe gut, aber ich denke, der größere Punkt hier ist, dass Sie keine 0-100 in Hex darstellen (was 0-64 wäre), Sie haben einfach die Skala gestreckt (50 ist die Hälfte von 100, 128 ist die Hälfte von 256, beides ist 50 % des Maximums) und dann die Art und Weise geändert, wie Sie die Zahl schreiben (128 dezimal ist 80 hexadezimal, also ergibt 80 50 % in 8-stelliger Hexadezimalzahl). Wichtig ist der Bruchteil Ihres Wertes im Verhältnis zum Maximum.
Der größte Fehler war wirklich, für eine 0-100-Skala für Alpha in rgba() zu wählen, anstatt für die gleiche 1-255-Skala wie für die anderen Kanäle.
Ohne unhöflich klingen zu wollen, ist dieser Artikel ein perfektes Beispiel dafür, warum ich denke, dass Frontend-Entwickler auch außerhalb des Webbrowsers mit Programmierung experimentieren sollten. Schreiben Sie zum Beispiel ein eigenständiges Programm, das ein Bild invertiert. Sie lernen alles über Bildformate, Farbformate (24-Bit, 32-Bit, 64-Bit, RGB, RGBA, ABGR, ARGB und mehr, einige mit ungleichmäßigen Komponenten Größen!), Byte-Level-Farb- und Pixelmanipulation und mehr. In meinen Jahren der Frontend-Entwicklung habe ich festgestellt, dass ein Fundament in allgemeiner Grafikprogrammierung mir enorm geholfen hat.
Und wenn Sie das getan haben, werden Sie froh sein, dass Sie sich nie wieder mit Formaten wie R5G6B5 (16-Bit-RGB) oder R5G5B5A1 (16-Bit-RGBA) auseinandersetzen müssen ;)
Es gibt eine Möglichkeit, es auch heute noch zu nutzen. Mit einem PostCSS-Plugin: https://github.com/postcss/postcss-color-hex-alpha