Entwickler-Ecke
Algorithmen, Optimierung und Assembler - Unterscheidbare RGB-Farben erzeugen
Tastaro - Di 11.11.14 08:37
Titel: Unterscheidbare RGB-Farben erzeugen
Hallo,
ich brauche für eine Anwendung möglichst viele unterschiedliche Farben. Diese sollten aber nicht von einem Programm voneinander unterscheidbar sein, sondern vom Anwender.
(Extrem-) Beispiele:
$000001 wird wohl nur der Computer von $000000 unterscheiden können.
$FF0000 kann auch der Mensch von $00FF00 unterscheiden (meistens jedenfalls).
Die Frage ist nun: Kann man die Werte zwischen $000000 und $FFFFFF berechnen, sodass maximal viele unterscheidbare Farbe dabei heraus kommen?
Horst_H - Di 11.11.14 08:43
Hallo,
nur mal theoretischer Hinweis.
Die Farbhelligkeitswahrnehmung soll wohl auch logarithmisch sein. Also 255/ 128 aähnlich wie 128/64 .
Damit kann man also nur 8 Stufen pro Farbe darstellen.Bleiben 8*8*8.
Vielleicht ist ja 255/192 gut unterscheidbar, aber dass kannst Du leicht selbst rausfinden.
Gruß Horst
Nersgatt - Di 11.11.14 08:45
Ich schätze, das wird recht kompliziert. Vor allem, weil Du den menschlichen Faktor drin hast. Der eine wird vielleicht die Farbnuancen erkennen, der andere vielleicht noch nicht, weil der Unterschied zu groß ist. Ich könnte mir auch vorstellen, dass das von der Farbe selbst abhängt, wie groß der Unterschied sein muss.
Somit müsste man erst mal eine Versuchsreihe mit der Zielgruppe machen, wie groß der Unterschied wirklich sein muss und wie klein er sein darf.
Musst Du auch auf Leute mit Sehschwächen Rücksicht nehmen (Rot/Grün-Schwäche, z.B.).
Mathematiker - Di 11.11.14 08:58
Hallo,
unter
http://world.std.com/~wij/color/ wird mit 216 verschiedenen Farben gearbeitet, d.h. Schrittweiten von 33hex je Farbe.
Mit Einzelwerten 00, 40, 80, B0 und FF kommst Du mit der gleichen Idee auf 125 Farben, die man deutlich auseinander halten kann; natürlich nur ohne Farbschwäche. Vielleicht genügt das.
Beste Grüße
Steffen
Tastaro - Di 11.11.14 09:55
Sehschwächen muss ich nicht berücksichtigen. Ich kann davon ausgehen, dass die Anwender Farben "im normalen Bereich" unterscheiden können.
Vielen Dank für die Vorschläge und Links. Damit kann ich doch schon mal arbeiten.
OlafSt - Di 11.11.14 10:42
Beachte auch, das es zwischen Mann und Frau deutliche Unteschiede in der Farbwahrnehmung gibt. So können Frauen deutlich mehr Farbstufen im Bereich Rot/Orange wahrnehmen als Männer.
Th69 - Di 11.11.14 11:13
Statt von RGB würde ich eher vom
HSV-Farbraum [
http://de.wikipedia.org/wiki/HSV-Farbraum] ausgehen. Dort dann entsprechend den H-Wert (mit einer geeigneten Schrittweite) durchiterieren und dann evtl. 2-3 verschiedene Helligkeitswerte (aber nicht zu dunkel) nehmen (zusätzlich kannst du dann aber für Grau, d.h. von Schwarz bis Weiß, ein paar mehr Zwischenstufen nehmen).
Tastaro - Di 11.11.14 12:41
@Olaf: Frauen kennen meistens auch viel mehr Namen von Farben als Männer. :)
Xion - Di 11.11.14 18:10
Ich sehe da weniger das Problem beim Menschen, als beim Ausgabemedium. Bildschirme haben eine ganz enorme Spanne, wenn sie von "Normalos" eingestellt werden. Der Unterschied von meinem Notebook-Bildschirm zu meinem Desktop-Bildschirm ist vor allem im Rotbereich ganz enorm. Wenn du das Ergebnis ausdrucken willst, dann kommst du sowieso in Teufels Küche.
Wenn du so viele Farben brauchst scheint mir das wie ein konzeptionelles Problem. Was hast du denn vor? Ich könnte mir z.B. vorstellen, dass in deiner Legende (die ja irgendwie existieren muss, wenn deine Farben einen Sinn haben sollen) einen Mouse-Hover-Effekt eingebaut wird. Fährt man mit der Maus über den entsprechenden Eintrag, blinkert die Farbe (in der Legende und in der Legende). Dann ist soweit alles klar, die Farben müssen dann nicht garantiert unterscheidbar sein und man kommt mit einer Faustregel wie oben gut hin.
Tastaro - Mi 12.11.14 09:52
Hallo Xion,
Das (Farb-) Problem ist bei mir etwas einfacher als Du es darstellst. Es geht darum in einem Stromlaufplan Anschluss- bzw. Messpunkte (Pins), die mehrfach vorkommen in der gleichen Farbe zu markieren. Sie sind zudem auch noch beschriftet. Die Farben gewähren nur einen schnelleren Überblick als wenn man erst die Beschriftungen entziffern muss.
Es ist also nicht "Farbe X bedeutet dies und jenes", sondern "alle Dinge mit Farbe X sind gleich".
Sinspin - Mi 12.11.14 11:31
Strom, das ist mein Stichwort, ich liebe das Zeug an der Zunge.
Wieviele verschiedene Farben brauchst Du wirklich? Reichen da nicht in den meißten Fällen die 16 EGA Farben aus? Und dann könnte man das verdoppeln / verdreifachen indem man nicht eine Farbe sondern zwei nimmt die sich deutlich unterscheiden und schraffiert zeichnet. Ich kann mich erinnern das mal so in einem Schaltplan gesehen zu haben.
Und solange das ganze interaktiv ist, könnte man bei einem Mouseover einfach alles was gleich ist Fett hervorheben.
Tastaro - Mi 12.11.14 11:46
Hallo sinspin,
da es sich um Stromlaufpläne mit ein paar tausend Pins handeln kann, reichen 16 Farben nicht. Im Moment arbeite ich mit ca. 70, die ich mir manuell ausgesucht habe. Aber die sind mitunter schon knapp.
Das mit dem Mouseover ist prinzipiell eine coole Idee, die mir sehr gut gefällt. Allerdings funktioniert das nur, wenn der ganze Plan auf eine Bildschirmseite passt. Das ist bei mir leider nicht der Fall.
Ich hatte schon einmal ein Beispiel hochgeladen.
Beispielgrafik:
http://www.entwickler-ecke.de/download.php?id=16395
Thread:
http://www.entwickler-ecke.de/viewtopic.php?t=112752
ub60 - Mi 12.11.14 13:07
Würde es fachlich sehr falsch sein, um die farbigen Rauten einen andersfarbigen Rahmen zu zeichnen. Dann hätte man sofort sehr viele unterscheidbare Farbkombinationen.
Die Idee mit dem MouseOver gefällt mir auch. Da kann man die Untergrundfarbe ablesen und als Tooltip den Hinweis zum Bauelement angeben. Hierbei kann als Problem auftauchen, dass der Computer nicht volle 16 Mio. Farben zeigt (also ältere Grafikkarten mit 64k Farbraum). Dort würden sich geschriebene und gelesene Farbe unter Umständen unterscheiden.
ub60
Sinspin - Mi 12.11.14 14:13
Hm, da die Schaltungen nicht auf den Bildschirm passen ist es mit einer höheren Anzahl an Farben auch wieder blöd. Dann verliert man beim verschieben die anderen Pins aus den Augen und kann die Farben nicht mehr vergleichen.
Wenn man die Schaltung testen will, ich denke darauf soll es hinaus laufen, dann braucht man ja eh nur eine kleine Anzahl von Punkten. Wie wäre es wenn man die anklickt und ihnen wie ein Lesezeichen verpasst. Das bekommen dann alle Pins die gleich sind. Also eben Fetter zeichnen oder eine Umrandung mit Komplementärfarbe. So könnte man auch eine übersichtliche Liste aufbauen die man im Auge behalten kann. Eventuell noch einen extra Kommentar/Vermerk zulassen um es sich logischer beschriften zu können.
C# - Mi 12.11.14 14:39
Hallo,
was mir noch spontan einfällt ist eine kleine Legende zu erstellen in einem speraten Fenster. Dort steht dann der Name oder Bezeichner des Typs und die zugehörige Farbe. Wenn man in der Legende auf einen Bezeichner klickt (oder halt MouseOver), werden diese Elemente noch einmal extra hervorgehoben.
Was die Unterscheidbarkeit angeht könnte man auch Unterschiedliche Formen benutzen. Also deine 70 Farben und dann kombinieren mit Raute, Quadrat, Sechseck, Kreis, Stern, ...
Tastaro - Mi 12.11.14 14:48
@ub60: "Fachlich falsch" gibt es in diesem Zusammenhang nicht. Die Farben "gehören" eigentlich nicht zum Schaltplan, sondern werden nur von mir aus Gründen der besseren Nachverfolgbarkeit angezeigt. Das mit der Umrandung ist demnach tatsächlich eine Möglichkeit die Anzahl der Farben/Kombinationen zu erhöhen.
@sinspin: Das mit dem Hervorheben gefällt mir gut. Ich werde mir überlegen, ob und wie ich das zusätzlich zu den Farben einbauen kann. Das würde das gezielte Verfolgen eines einzelnen Pins über mehrere Bildschirmseiten wirklich erleichtern.
Danke für den Tipp.
@C#: Die Legende kann aufgrund der Größe des Stromlaufplans recht lang werden. Aber wenn ich es richtig verstehe, dann geht Dein Vorschlag in die gleiche Richtung wie der von sinspin. Das Hervorheben eines vom Benutzer gewählten Punktes wäre wirklich eine Hilfe.
Zur Farbenberechung werde ich wohl den Vorschlag verwenden, den Mathematiker verlinkt hat. Ich denke, dass die 216 Farben ausreichen werden. Wobei ich auf die dunkelsten verzichten werde, damit man die Schrift noch lesen kann.
Sinspin - Mi 12.11.14 16:49
@Tastaro + C# ihr habt gerade die gleiche Anzahl von Posts (
344 (png, 6.44 KB)), dachte erst das wäre ein Fehler, aber es ist ein Zeichen, eins unter vielen :roll:
Um Text auf jedem Untergrund lesen zu können kann man auch die Farbe des Textes ändern, zum Beispiel von Schwarz auf Weiß, ab einer bestimmten Helligkeit der Farbe. Oder immer die Komplementärfarbe zum Untergrund verwenden. So brauchst Du die dunklen Farben nicht weglassen.
Tastaro - Mi 12.11.14 16:59
Ja, doch. Weil mein Hintergrund ganz weiß ist und die Beschriftung teilweise über die Farben geht und teilweise über den Hintergrund. in dem Beispielbild, das ich oben verlinkt habe, sieht man das ganz gut.
OMG! Ein Zeichen! Wir werden alle sterben! :)
C# - Mi 12.11.14 20:25
:shock: in China ist ein Sack Reis umgefallen.
Also was die Textfarbe angeht, hätte ich eine Idee. Benutze doch subtraktive Farbmischung.
Ich stelle mir das so vor:
Zeichne zuerst den Text in
weiß in eine Bitmap (RGB=255,255,255). Danach gehst du in deinem Schaltplan an die Stelle, an der der Text gezeichnet werden soll. Dort kannst du jetzt die Bitmap mit dem Text subtraktiv drüberlegen. Als Ergebnis solltest du einen Text erhalten der immer die Komplementärfarbe zum Hintergrund hat.
Ich habs mal probiert:
C#-Quelltext
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58:
| using System; using System.Drawing; using System.Drawing.Text; using System.Windows.Forms;
namespace WindowsFormsApplication1 { public partial class Form2 : Form { private Bitmap schaltplan; private Graphics schaltplanGraphics;
public Form2() { InitializeComponent(); schaltplan = new Bitmap(1000,1000); schaltplanGraphics = Graphics.FromImage(schaltplan); }
private void Form2_Paint(object sender, PaintEventArgs e) { schaltplanGraphics.Clear(Color.White); schaltplanGraphics.FillEllipse(new SolidBrush(Color.Green), 100, 100, 50, 100); schaltplanGraphics.FillRectangle(new SolidBrush(Color.Red), 150, 150, 100, 100); DrawText(textBox1.Text, new Font("Comic Sans Ms", 24), schaltplan, new Point(90, 145)); e.Graphics.DrawImage(schaltplan, 0, 0); }
static void DrawText(string text, Font font, Bitmap targetImage, Point position) { if (String.IsNullOrEmpty(text.Trim())) return; Size size = Graphics.FromImage(targetImage).MeasureString(text, font).ToSize();
Bitmap bmp = new Bitmap(size.Width, size.Height); Graphics gfx = Graphics.FromImage(bmp);
gfx.DrawString(text, font, new SolidBrush(Color.White), 0, 0);
for (int y = 0; y < bmp.Height; y++) { for (int x = 0; x < bmp.Width; x++) { Color c1 = bmp.GetPixel(x, y); if (c1 == Color.FromArgb(0, 0, 0, 0)) continue; Color c2 = targetImage.GetPixel(position.X + x, position.Y + y);
targetImage.SetPixel(position.X + x, position.Y + y, Color.FromArgb(255 - c2.R, 255 - c2.G, 255 - c2.B)); } } }
private void textBox1_TextChanged(object sender, EventArgs e) { Invalidate(); } } } |
Das Ergebnis sieht so aus:
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2025 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!