So bestimmen Sie die äquivalente undurchsichtige RGB-Farbe für eine bestimmte teilweise transparente RGB-Farbe vor einem weißen Hintergrund

Ich habe festgestellt, dass das Reduzieren der Deckkraft vor einem weißen Hintergrund ein guter Weg ist, um brauchbare hellere und weniger gesättigte Farbtöne einer Grundfarbe zu finden.

Nehmen Sie als Beispiel dieses orangefarbene Bild:

Die untere Reihe zeigt die Varianten. Die Prozentsätze sind die Trübungen.

Ein weißer Hintergrund und eine Verringerung der Deckkraft sind gut, wenn ich nach guten Farbtönen suche, aber ich verwende im Endprodukt gerne äquivalente 100% opake RGB-Farben.

Wie berechne oder finde ich die entsprechenden RGB-Zahlen, wenn die RGB-Zahlen der Grundfarbe und der Deckkraft bereits ausgewählt sind?

Ich habe Farbauswahl versucht, aber in Illustrator gibt es zumindest nur die Grundfarbe.

color transparency color-reproduction

— Jonas Praem
quelle

Kommentare sind nicht für eine ausführliche Diskussion gedacht. Dieses Gespräch wurde in den Chat verschoben .

— Ryan

@ JonasPraem Finden Sie, dass die letzten Änderungen an Ihrer Frage richtig widerspiegeln, was Sie gefragt haben? Wenn ja, werde ich die Frage erneut öffnen. Vielen Dank!

— neugierig

Ja, die vorgenommenen Änderungen spiegeln perfekt

— wider,

Warum wird diese Frage gestimmt? Es ist eine vollkommen gültige Frage imho.

— Filip

Die ursprüngliche Frage wurde mit einem sehr starken Entwickler-POV geschrieben. Die Frage wird jetzt bearbeitet, um für Designer verständlicher und präziser zu sein. Ich bin ein Entwickler, kein Designer - es scheint, als hätte ich eine Sprachbarriere erreicht.

— Jonas Praem

Antworten:

Verwenden Sie die Formel Y = 255 - P * (255-X), wobei X eine RGB-Zahl ist, P = Deckkraft (0 ... 1), Y = neue RGB-Zahl, die bei 100% Deckkraft das gleiche Aussehen wie X haben sollte 100p% Deckkraft vor weißem Hintergrund.

Die Formel ist die allgemeine Opazitätsformel, die nur für diesen speziellen Fall vereinfacht wurde - die teilweise transparente Deckschicht ist gegen reines Weiß.

Hinweis: Der weiße Hintergrund sollte ein weißes Objekt sein, nicht die weiße Zeichenfläche. Weißes Hintergrundobjekt wird farblich verwaltet.

Wenn Sie sich in Illustrator befinden und die Farbe mit dem Farbwähler kopieren möchten, erstellen Sie eine Kopie des teilweise transparenten Objekts und rastern Sie es. Wählen Sie im Rasterdialog den weißen Hintergrund. Jetzt gibt der Farbwähler die Farbe an, es sind keine Berechnungen erforderlich.

— user287001
quelle

Hier ist eine Python-Implementierung, um diese Grafik

— joojaa

Ich habe eine Folgefrage, wie man dies in Sass implementiert, bei Stapelüberlauf, wenn jemand interessiert ist: Frage

— Jonas Praem

RE: Der Sonderfall (dh nicht weiß) funktioniert nicht für jeden Fall, da die Formel für einen einzelnen Kanal gilt und man dies für jeden Kanal tun müsste? Oder ist der Sonderfall "der erste 255" in der Formel?

— Yorik

@Yorik Die allgemeine Formel für ein 2-Ebenen-Bild lautet Y = p * T + (1-p) * B, wobei p die Deckkraft 0 ... 1 der obersten Ebene ist, T = RGB-Zahl der Farbe der obersten Ebene, B das RGB Anzahl der vollständig undurchsichtigen unteren Schichten. Y ist die RGB-Zahl der äquivalenten vollständig undurchsichtigen Farbe.

— user287001

JavaScript-Implementierung der allgemeinen Formel (danke @ user287001): const afterOpacity = (fg,o,bg=[255,255,255]) => fg.map((colFg,idx)=>o*colFg+(1-o)*bg[idx])wobei fg die Vordergrundfarbe ist [r,g,b], o die Deckkraft (0 ... 1) und bg die Hintergrundfarbe (standardmäßig Weiß, wenn weggelassen). ZB afterOpacity([255,0,0],0.5)gibt[255,127.5,127.5]

— Chris M

Ich habe ein Tool dafür geschrieben: https://github.com/igrmk/blec . Für Ihren speziellen Fall können Sie es auf diese Weise verwenden

blec white deadbeef

Zuletzt efist die Hex-Darstellung eines Alpha-Kanals. Oder Sie können es so verwenden

blec white deadbe:0.75

Angabe der Deckkraft als Dezimalbruch.

Bitte beachten Sie, dass die vorgeschlagene Formel Y = 255 - P * (255 - X)aufgrund einer Gammakorrektur nicht ganz genau ist. Genauer wäre, Y = (255^G * (1 - P) + X^G * P) ^ (1 / G)wenn Y- der resultierende RGB-Komponentenwert, X- der RGB-Komponentenwert überlagert wird, P- seine Opazität, G- ein Wert eines Gammas. Der häufigste Wert eines Gammas ist 2,2. Der Grund für die Aufnahme einer Gammakorrektur in die Formel besteht darin, Komponenten beim Berechnen in den linearen Raum zu verschieben. Fast jeder heute verwendete RGB-Raum interpretiert Farbkomponenten nichtlinear, um mehr Farbinformationen in 8 Bit zu platzieren. In der Vergangenheit wurde es eingeführt, um eine Nichtlinearität von CRT-Anzeigen zu kompensieren.

Hier ist ein Beispiel, warum eine Gammakorrektur für das Mischen wichtig ist. Nehmen wir dieses rote Bild

und dieses blaue Bild

Nehmen wir das erste Bild vollständig undurchsichtig und stellen Sie eine Deckkraft des zweiten Bildes ein, die der x-Achse entspricht

Jetzt mischen wir sie ohne Gammakorrektur (Gamma = 1)

Lassen Sie uns eine Gammakorrektur aktivieren und dasselbe tun (Gamma = 2,2)

Wie Sie sehen, gibt es einen viel lokaleren Übergang, wenn wir keine Gammakorrektur verwenden. In der Mitte sind deutlich dunklere Farben zu sehen. Wenn wir eine Gammakorrektur verwenden, werden der Übergang und die Helligkeit viel glatter.

Der letzte Gradient wird durch Dithering erstellt.

Das Bild enthält Pixel mit nur zwei Farben, aber die Wahrscheinlichkeit von Blau steigt linear von 0 links auf 1 rechts. Das Ergebnis kommt dem Bild mit Gamma = 2,2 in Bezug auf Helligkeit und Übergangsfarben viel näher. Versuchen Sie es aus der Ferne zu betrachten. Und das erwarten Sie wahrscheinlich von der Mischung zweier Farben. Wir mischen sie buchstäblich, indem wir sie in diesem Beispiel wie Aquarelle mischen. Daher ist Gamma für das Mischen sehr wichtig, insbesondere wenn die Deckkraft nahe bei 0,5 liegt.

Vergleichen wir abschließend die Mischung von opakem Rot und Blau mit einem Alpha von 0,5, wobei der Effekt einer Gammakorrektur maximal ist.

Das erste Bild verwendet keine Gammakorrektur, das zweite ein Gamma von 2,2 und das dritte ein Dithering. Wie Sie sehen können, unterscheidet sich der erste sehr von den beiden anderen. Ich rate daher, immer eine Gammakorrektur zu verwenden. Wenn Sie einen anständigen Bildeditor verwenden, sind Sie höchstwahrscheinlich sicher und eine Gammakorrektur ist standardmäßig aktiviert.

Bitte beachten Sie, dass Sie zum Vergleichen eines Ditherings mit einer Überblendung Bilder in einem Maßstab von 100% betrachten müssen, damit jedes einzelne Pixel des Bildes genau ein Pixel eines Bildschirms einnimmt. Dies ist fast nie der Fall, wenn Sie ein Mobiltelefon verwenden. Wenn Sie Bilder in unterschiedlichem Maßstab betrachten, sehen Sie wahrscheinlich ein Antialias-Bild. Das Antialiasing kann zu sehr ungenauen Ergebnissen führen, da derzeit keine Gammakorrektur verwendet wird. Ich kann es für Chrome 83 unter Android 10 und für die neueste Safari unter iOS 13 bestätigen. Ich denke, es benötigt zu viele Ressourcen, um es richtig zu machen. Wenn Sie sehr kontrastreiche, verrauschte Bilder betrachten, wird das Gamma eines Displays effektiv auf etwa 1,8 verringert.

Bitte beachten Sie auch, dass nicht jedes Display gut kalibriert ist. Wenn Sie das Gefühl haben, dass ein Bild mit einem Gamma von 2,2 und ein Bild mit einem Dithering unterschiedliche Farben erzeugen, habe ich eine schlechte Nachricht für Sie. Sie können ein Gamma Ihres Monitors hier überprüfen: http://web.mit.edu/jmorzins/www/gamma/adilger/gamma.html . Wenn Sie jedoch ein mobiles Gerät verwenden, ist es besser, eine Anwendung zu verwenden, da ein Antialiasing zu sehr ungenauen Ergebnissen führen kann.

Hier ist ein Code, um diese Bilder zu erhalten https://pastebin.com/fHYtWrMb .

— Igor Mikushkin
quelle

Ich denke du hast mindestens einen Gang mehr als ich. Das Beispiel für das Stapeln von Glas ist vage. Gestapelt gegen was? Was wird beobachtet und wo kommt und geht das Licht? Die Gammakorrektur erfolgt in Computern aus Gründen, die auf Computer- und Displaykonstruktionen basieren. Sie erfolgt nicht in physischen Farbmaterialien, sodass Glas die Formel überhaupt nicht klarer macht.

— user287001

@ user287001 Vielen Dank für den Hinweis. Glasbeispiel war wirklich schlecht. Es gibt zu viele physikalische Faktoren, um sie zu klären. Ich denke jetzt sieht es viel besser aus.

— Igor Mikushkin

Sie müssen nicht zu all diesen technischen Berechnungen gehen. Sie können stattdessen das Farbfeld-Pannel verwenden. Sie speichern Ihre Originalfarbe als Farbfeld mit der Option Global.

Sie können dann das Farbfeld verwenden und den gewünschten Prozentsatz auswählen. Dies verwendet keine Transparenz, es ist undurchsichtig.

Wenn Sie den RGB- oder Hex-Code für Ihren endgültigen Farbton anzeigen müssen, können Sie auf das RGB-Symbol im Farbfeld drücken und die RGB- und Hex-Werte anzeigen.

— Designways
quelle