it-swarm.com.de

Wie finde ich eine gut aussehende Schriftfarbe, wenn die Hintergrundfarbe bekannt ist?

Es scheint so viele Farbrad-, Farbwähler- und Farbanpassungsweb-Apps zu geben, in denen Sie eine Farbe angeben und die ein paar andere Farben finden, die in Kombination ein harmonisches Layout erzeugen. Die meisten von ihnen konzentrieren sich jedoch nur auf Hintergrundfarben, und jeder Text, der auf jeder Hintergrundfarbe gedruckt wird (wenn in der Vorschau überhaupt Text gedruckt wird), ist entweder schwarz oder weiß.

Mein Problem ist anders. Ich kenne die Hintergrundfarbe, die ich für einen Textbereich verwenden möchte. Ich brauche Hilfe bei der Auswahl einiger Farben (je mehr, desto besser), die ich als Schriftfarben auf diesem Hintergrund verwenden kann. Das Wichtigste ist, dass die Farbe dafür sorgt, dass die Schrift lesbar ist (der Kontrast ist nicht zu niedrig, möglicherweise auch nicht zu hoch, um eine Belastung der Augen zu vermeiden), und dass die Kombination aus Vordergrund und Hintergrund natürlich gut aussieht.

Kennt jemand eine solche Anwendung? Ich würde eine Webanwendung dem vorziehen, was ich herunterladen muss. Vielen Dank.

86
Mecki

Wenn Sie einen Algorithmus benötigen, versuchen Sie Folgendes: Konvertieren Sie die Farbe vom RGB-Raum in den HSV-Raum (Farbton, Sättigung, Wert). Wenn Ihr UI-Framework dies nicht kann, lesen Sie diesen Artikel: http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV

Der Farbton ist in [0,360]. Um die "entgegengesetzte" Farbe zu finden (denken Sie an das Farbrad), addieren Sie einfach 180 Grad:

h = (h + 180) % 360;

Für die Sättigung und den Wert invertieren Sie diese:

l = 1.0 - l;
v = 1.0 - v;

Zurück in RGB konvertieren. Dies sollte immer einen hohen Kontrast ergeben, auch wenn die meisten Kombinationen hässlich aussehen.

Wenn Sie den "hässlichen" Teil vermeiden möchten, erstellen Sie eine Tabelle mit mehreren "guten" Kombinationen und finden Sie die mit dem geringsten Unterschied

def q(x):
    return x*x
def diff(col1, col2):
    return math.sqrt(q(col1.r-col2.r) + q(col1.g-col2.g) + q(col1.b-col2.b))

und benutze das.

39
Aaron Digulla

Okay, dies ist immer noch nicht die bestmögliche Lösung, aber ein guter Ausgangspunkt. Ich habe eine kleine Java App geschrieben, die das Kontrastverhältnis zweier Farben berechnet und nur Farben mit einem Verhältnis von 5: 1 oder besser verarbeitet - dieses Verhältnis und die Formel, die ich verwende, wurden vom W3C veröffentlicht und ersetzt wahrscheinlich die aktuelle Empfehlung (die ich als sehr begrenzt betrachte) .Erstellt eine Datei im aktuellen Arbeitsverzeichnis mit dem Namen "chosen-font-colors.html", mit der Hintergrundfarbe Ihrer Wahl und einer Textzeile in jeder Farbe Dieser Test hat den W3C-Test bestanden und erwartet ein einziges Argument als Hintergrundfarbe.

Z.B. Sie können es so nennen

Java FontColorChooser 33FFB4

öffnen Sie dann einfach die generierte HTML-Datei in einem Browser Ihrer Wahl und wählen Sie eine Farbe aus der Liste aus. Alle angegebenen Farben haben den W3C-Test für diese Hintergrundfarbe bestanden. Sie können den Grenzwert ändern, indem Sie 5 durch eine Zahl Ihrer Wahl ersetzen (niedrigere Zahlen ermöglichen schwächere Kontraste, z. B. 3 stellt nur sicher, dass der Kontrast 3: 1 beträgt, 10 stellt sicher, dass er mindestens 10: 1 beträgt) abgeschnitten, um zu hohe Kontraste zu vermeiden (indem sichergestellt wird, dass sie kleiner als eine bestimmte Zahl sind), z Hinzufügen

|| cDiff > 18.0

die if-Klausel stellt sicher, dass der Kontrast nicht zu extrem ist, da zu extreme Kontraste Ihre Augen belasten können. Hier ist der Code und viel Spaß beim Herumspielen :-)

import Java.io.*;

/* For text being readable, it must have a good contrast difference. Why?
 * Your eye has receptors for brightness and receptors for each of the colors
 * red, green and blue. However, it has much more receptors for brightness
 * than for color. If you only change the color, but both colors have the
 * same contrast, your eye must distinguish fore- and background by the
 * color only and this stresses the brain a lot over the time, because it
 * can only use the very small amount of signals it gets from the color
 * receptors, since the breightness receptors won't note a difference.
 * Actually contrast is so much more important than color that you don't
 * have to change the color at all. E.g. light red on dark red reads nicely
 * even though both are the same color, red.
 */


public class FontColorChooser {
    int bred;
    int bgreen;
    int bblue;

    public FontColorChooser(String hexColor) throws NumberFormatException {
        int i;

        i = Integer.parseInt(hexColor, 16);
        bred = (i >> 16);
        bgreen = (i >> 8) & 0xFF;
        bblue = i & 0xFF;
    }

    public static void main(String[] args) {
        FontColorChooser fcc;

        if (args.length == 0) {
            System.out.println("Missing argument!");
            System.out.println(
                "The first argument must be the background" +
                "color in hex notation."
            );
            System.out.println(
                "E.g. \"FFFFFF\" for white or \"000000\" for black."
            );
            return;
        }
        try {
            fcc = new FontColorChooser(args[0]);
        } catch (Exception e) {
            System.out.println(
                args[0] + " is no valid hex color!"
            );
            return;
        }
        try {
            fcc.start();
        } catch (IOException e) {
            System.out.println("Failed to write output file!");
        }
    }

    public void start() throws IOException {
        int r;
        int b;
        int g;
        OutputStreamWriter out;

        out = new OutputStreamWriter(
            new FileOutputStream("chosen-font-colors.html"),
            "UTF-8"
        );

        // simple, not W3C comform (most browsers won't care), HTML header
        out.write("<html><head><title>\n");
        out.write("</title><style type=\"text/css\">\n");
        out.write("body { background-color:#");
        out.write(rgb2hex(bred, bgreen, bblue));
        out.write("; }\n</style></head>\n<body>\n");

        // try 4096 colors
        for (r = 0; r <= 15; r++) {
            for (g = 0; g <= 15; g++) {
                for (b = 0; b <= 15; b++) {
                    int red;
                    int blue;
                    int green;
                    double cDiff;

                    // brightness increasse like this: 00, 11,22, ..., ff
                    red = (r << 4) | r;
                    blue = (b << 4) | b;
                    green = (g << 4) | g;

                    cDiff = contrastDiff(
                        red, green, blue,
                        bred, bgreen, bblue
                    );
                    if (cDiff < 5.0) continue;
                    writeDiv(red, green, blue, out);
                }
            }
        }

        // finalize HTML document
        out.write("</body></html>");

        out.close();
    }

    private void writeDiv(int r, int g, int b, OutputStreamWriter out)
        throws IOException
    {
        String hex;

        hex = rgb2hex(r, g, b);
        out.write("<div style=\"color:#" + hex + "\">");
        out.write("This is a sample text for color " + hex + "</div>\n");
    }

    private double contrastDiff(
        int r1, int g1, int b1, int r2, int g2, int b2
    ) {
        double l1;
        double l2;

        l1 = ( 
            0.2126 * Math.pow((double)r1/255.0, 2.2) +
            0.7152 * Math.pow((double)g1/255.0, 2.2) +
            0.0722 * Math.pow((double)b1/255.0, 2.2) +
            0.05
        );
        l2 = ( 
            0.2126 * Math.pow((double)r2/255.0, 2.2) +
            0.7152 * Math.pow((double)g2/255.0, 2.2) +
            0.0722 * Math.pow((double)b2/255.0, 2.2) +
            0.05
        );

        return (l1 > l2) ? (l1 / l2) : (l2 / l1);
    }

    private String rgb2hex(int r, int g, int b) {
        String rs = Integer.toHexString(r);
        String gs = Integer.toHexString(g);
        String bs = Integer.toHexString(b);
        if (rs.length() == 1) rs = "0" + rs;
        if (gs.length() == 1) gs = "0" + gs;
        if (bs.length() == 1) bs = "0" + bs;
        return (rs + gs + bs);
    }
}
4
Mecki

Ich habe aus einem anderen Grund etwas Ähnliches implementiert - das war Code, der dem Endbenutzer mitteilte, ob die von ihm ausgewählten Vordergrund- und Hintergrundfarben zu unlesbarem Text führen würden. Zu diesem Zweck habe ich, anstatt die RGB-Werte zu untersuchen, den Farbwert in HSL/HSV konvertiert und dann durch Experimentieren ermittelt, welcher Grenzwert für die Lesbarkeit beim Vergleich der fg- und bg-Werte maßgeblich war. Dies ist etwas, das Sie möglicherweise in Betracht ziehen möchten/müssen.

2
RedFilter

Dies ist eine interessante Frage, aber ich denke nicht, dass dies tatsächlich möglich ist. Ob zwei Farben als Hintergrund- und Vordergrundfarben "passen" oder nicht, hängt von der Anzeigetechnologie und den physiologischen Eigenschaften des menschlichen Sehens ab, aber am wichtigsten von den persönlichen Vorlieben, die durch Erfahrung geprägt sind. Ein kurzer Blick durch MySpace zeigt ziemlich deutlich, dass nicht alle Menschen Farben gleich wahrnehmen. Ich denke nicht, dass dies ein Problem ist, das algorithmisch gelöst werden kann, obwohl es möglicherweise eine riesige Datenbank mit akzeptablen übereinstimmenden Farben gibt.

2
MusiGenesis

In einer kürzlich von mir erstellten Anwendung habe ich die invertierten Farben verwendet. Berechnen Sie einfach mit den Werten für r, g und b (in diesem Beispiel variiert der Farbbereich von 0 bis 255):

r = 127-(r-127) and so on.
2
Flávio Batista

Es mag seltsam sein, meine eigene Frage zu beantworten, aber hier ist ein weiterer wirklich cooler Farbwähler, den ich noch nie gesehen habe. Es löst auch nicht mein Problem: (((aber ich denke, es ist viel cooler für diese, die ich bereits kenne.

--- (http://www.colorjack.com/

Rechts unter Extras wählen Sie "Color Sphere", eine sehr mächtige und anpassbare Kugel (sehen Sie, was Sie mit den Popups oben machen können), "Color Galaxy". Ich bin mir immer noch nicht sicher, wie das funktioniert, aber wie es aussieht cool und "Color Studio" ist auch schön. Außerdem kann es in alle Arten von Formaten (z. B. Illustrator oder Photoshop usw.) exportiert werden.

Wie wäre es damit, ich wähle dort meine Hintergrundfarbe aus, lasse sie eine Komplementärfarbe erzeugen (ab dem ersten Popup) - diese sollte den höchsten Kontrast haben und daher am besten lesbar sein, wähle nun die Komplementärfarbe als Hauptfarbe und wähle neutral aus? Hmmm ... auch nicht so toll, aber wir werden besser ;-)

1
Mecki

Persönlich glaube ich nicht, dass wir einen Algorithmus finden können, um die am besten passende Textfarbe durch Angabe der Hintergrundfarbe zu berechnen.

Ich denke, derzeit sollte der Künstler eine Liste von Farbpaaren mit guter Lesequalität haben. Wir können sie einer Tabelle hinzufügen und eines dieser Paare zufällig als unser Lesethema festlegen ...

das ist sehr vernünftig und wir werden keine hässlichen Farbpaare bekommen ...

0
flypig

Haben Sie darüber nachgedacht, den Benutzer Ihrer Anwendung sein eigenes Farbschema auswählen zu lassen? Sie können auf jeden Fall nicht alle Benutzer mit Ihrer Auswahl zufriedenstellen, aber Sie können zulassen, dass sie das finden, was ihnen gefällt.

0
billcoke

Ähnlich wie @Aaron Digullas Vorschlag, außer dass ich ein Grafikdesign-Tool vorschlagen würde, wählen Sie die Grundfarbe, in Ihrem Fall die Hintergrundfarbe, und passen Sie dann den Farbton, die Sättigung und den Wert an. Mit dieser Funktion können Sie ganz einfach Farbfelder erstellen. Paint.Net ist kostenlos und ich benutze es die ganze Zeit dafür und auch die Pay-for-Tools werden dies auch tun.

0
MotoWilliams