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
quelle
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.
quelle
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). ZBafterOpacity([255,0,0],0.5)gibt[255,127.5,127.5]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
Zuletzt
efist die Hex-Darstellung eines Alpha-Kanals. Oder Sie können es so verwendenAngabe 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)wennY- 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 .
quelle
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.
quelle