Wie gut aussehende Schriftfarbe zu finden, wenn Hintergrundfarbe bekannt ist? [geschlossen]
https://stackoverflow.com/questions/301869
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Es scheint so viele Farbrad, Farbwähler zu sein, und Farbanpasser Web gibt apps heraus, wo Sie eine Farbe zu geben und die sie werden ein paar andere Farben finden, die eine harmonische Layout erstellen, wenn sie in Kombination verwendet werden, . Die meisten von ihnen konzentrieren sich auf Hintergrundfarben nur und jeder Text auf jeder Hintergrundfarbe gedruckt (falls der Text überhaupt in der Vorschau gedruckt wird) ist entweder schwarz oder weiß.
Mein Problem ist anders. Ich weiß, dass die Hintergrundfarbe ich für einen Textbereich verwenden möchten. Was ich brauche Hilfe mit ein paar Farben (je mehr, desto besser) wählen kann ich als Schriftfarben auf diesem Hintergrund verwenden. Am wichtigsten ist, dass die Farbe sicher, wird die Schriftart lesbar ist (Kontrast nicht zu niedrig, vielleicht auch nicht zu hoch sein, um zu vermeiden, dass die Augen sind gestresst) und natürlich, dass die Kombination von Vorder- und Hintergrund nur gut aussieht.
Wer sich bewusst für eine solche Anwendung zu sein? Ich würde eine Web-Anwendung, die ich herunterladen müssen, um etwas vorziehen. Danke.
Lösung
Wenn Sie einen Algorithmus benötigen, versuchen Sie dies: Konvertieren Sie die Farbe von RGB-Raum zu HSV-Raum (Farbton, Sättigung, Wert). Wenn Ihr UI-Framework es nicht tun können, lesen Sie in diesem Artikel: http://en.wikipedia.org / wiki / HSL_and_HSV # Conversion_from_RGB_to_HSL_or_HSV
Der Farbton ist in [0360). Um das „Gegenteil“ Farbe (man denke Farbrad) zu finden, fügen Sie einfach um 180 Grad:
h = (h + 180) % 360;
Für die Sättigung und Wert, kehren sie:
l = 1.0 - l;
v = 1.0 - v;
zu RGB konvertieren zurück. Dies sollte man immer geben einen hohen Kontrast, obwohl die meisten Kombinationen hässlich aussehen wird.
Wenn Sie die „hässlich“ Teil zu vermeiden, einen Tisch mit mehreren „gut“ Kombinationen bauen, finden die mit der geringsten Differenz
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 verwenden Sie diese.
Andere Tipps
Okay, das ist noch nicht die beste Lösung, aber ein schöner Punkt zu starten. Ich schrieb eine kleine Java-Anwendung, die das Kontrastverhältnis von zwei Farben berechnet und verarbeitet nur Farben mit einem Verhältnis von 5: 1 oder besser - diesem Verhältnis und der Formel I verwenden wird vom W3C veröffentlicht worden und wird wahrscheinlich die aktuelle Empfehlung ersetzen (die ich halte sehr begrenzt). Es erstellt eine Datei im aktuellen Arbeitsverzeichnis namens „Chosen-font-colors.html“, mit der Hintergrundfarbe Ihrer Wahl und eine Textzeile in jeder Farbe, die diesen W3C-Test bestanden. Er erwartet, dass ein einziges Argument, der Farbhintergrund zu sein.
z. Sie können es so nennen
java FontColorChooser 33FFB4
dann öffnen Sie einfach die erzeugten HTML-Datei in einem Browser Ihrer Wahl und eine Farbe aus der Liste auswählen. Alle angegebenen Farben bestanden den W3C-Test für diese Hintergrundfarbe. Sie können die durch Ersetzen 5 mit einer Nummer Ihrer Wahl (niedrigere Zahlen erlauben schwächere Kontraste, zB 3 nur stellen Sie sicher, Kontrast 3: 1, 10 wird sicherstellen, dass es mindestens 10: 1) abgeschnitten ändern und Sie können auch abgeschnitten zu hohen Kontraste zu vermeiden (durch sicherstellen, dass es kleiner ist als eine bestimmte Zahl ist), zB Hinzufügen
|| cDiff > 18.0
, um den if-Klausel wird sicher Kontrast macht nicht zu extrem sein, als auch extreme Kontraste Ihre Augen betonen können. Hier ist der Code und hat Spaß mit ihm ein wenig 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);
}
}
Dies ist eine interessante Frage, aber ich glaube nicht, das tatsächlich möglich ist. Unabhängig davon, ob zwei Farben „passen“, wie Hintergrund- und Vordergrundfarben auf Display-Technologie und physiologische Eigenschaften des menschlichen Sehens abhängig sind, sondern vor allem auf dem persönlichen Geschmack durch Erfahrung geprägt. Ein kurzer Überblick über MySpace zeigt ziemlich klar, dass nicht alle Menschen Farben auf die gleiche Art und Weise wahrnehmen. Ich glaube nicht, dass dies ein Problem ist, das algorithmisch gelöst werden kann, obwohl es eine riesige Datenbank irgendwo akzeptabler passenden Farben sein kann.
Ich habe etwas ähnliches aus einem anderen Grunde implementiert - der Code war der Endbenutzer zu sagen, ob die Vorder- und Hintergrundfarben, die sie ausgewählt in lesbarem Text führen würden. Um dies zu tun, anstatt die RGB-Werte untersuchen, umgewandelt ich den Farbwert zu HSL / HSV und dann bestimmt durch Experimentieren, was mein Cutoff-Punkt für die Lesbarkeit war, als die fg und bg Werte zu vergleichen. Dies ist etwas, das Sie möchten / müssen prüfen.
In einer aktuellen Anwendung, die ich gemacht habe, habe ich die invertierten Farben. Mit dem R, G und B-Werten in der Hand, berechnen gerade (in diesem Beispiel ist der Farbbereich variiert von 0 bis 255):
r = 127-(r-127) and so on.
mag seltsam sein meine eigene Frage zu beantworten, aber hier ist eine andere wirklich coole Farbwähler ich noch nie zuvor gesehen hat. Es ist nicht mein Problem lösen entweder: - ((((aber ich denke, es ist viel kühler diese kenne ich schon
.Auf der rechten Seite unter Extras wählen „Color Sphere“, eine sehr leistungsfähige und anpassbare Bereich (sehen, was Sie mit den Pop-ups auf tun können), „Color Galaxy“, ich bin immer noch nicht sicher, wie das funktioniert , aber sieht cool aus und „Color Studio“ ist auch schön. Weiterhin kann es für alle Arten von Formaten exportieren (z Illustrator oder Photoshop, etc.)
Wie wäre es damit, ich meine Hintergrundfarbe dort wählen, lassen Sie es ein kostenloses Farbe erstellen (aus dem ersten Pop-up) - dies sollte höchsten Kontrast und damit am besten lesbar sein, wählen Sie nun die Komplementärfarbe als Hauptfarbe und wählen Sie neutral ? Hmmm ... nicht zu groß auch nicht, aber wir werden immer besser; -)
Haben Sie darüber nachgedacht der Benutzer Ihrer Anwendung lassen ihr eigenes Farbschema wählen? Unweigerlich werden Sie alle Ihre Benutzer bitte mit Ihrer Auswahl nicht in der Lage sein, aber man kann es ihnen ermöglichen, zu finden, was ihnen gefällt.
ähnlich wie @Aaron Digulla Vorschlag, außer dass ich ein Grafik-Design-Tool vorschlagen würde, wählen Sie die Basisfarbe, die Hintergrundfarbe in Ihrem Fall, dann stellen Sie den Farbton, Sättigung und Wert. Mit diesem können Sie sehr leicht Farbmuster erstellen. Paint.Net ist frei, und ich benutze es die ganze Zeit dafür und auch die Pay-for-Tools wird auch dies tun.
Ich persönlich denke nicht, kann einen Algorithmus herausfinden, die am meisten angepassten Textfarbe zu berechnen, indem die Hintergrundfarbe angeben.
Ich glaube, zur Zeit der Künstler eine Liste von Farbpaare haben sollte, die eine gute Lesequalität hat, wir können sie zu einer Tabelle hinzufügen, und legen Sie eines dieser Paare zufällig als unsere Lesen Thema ...
Das ist viel angemessen, und wir werden nicht hässliche Farbpaare bekommen ....
