Eine Farbauswahl, die den Bereich des RGB-Farbspektrums abdeckt?

Unten ist ein Screenshot einer kleinen Anwendung, die ich baue. Ich würde gerne die wichtigsten Farben aus dem gesamten Farbspektrum abdecken, aber mir fehlen viele Farben. Ich erhalte nicht das beabsichtigte Ergebnis; Ich sehe einige Farben wie Gelb oder Orange nicht.

Ich habe 40 Kacheln, die 8x5 angeordnet sind. Ich habe das RGB-Farbspektrum von etwa 16 Millionen Farben durch 40 geteilt und diesen Wert in einen Hex-Wert umgewandelt, damit er auf die Kacheln angewendet wird.

Das Überblenden/Überblenden von Cyan nach Rot ist eindeutig kein Ansatz, der alle Teile des RGB-Spektrums erreicht. Was habe ich übersehen oder wie kann ich das machen?

Geben Sie hier die Bildbeschreibung ein

Wie John betont, müssen Sie RG&B verwenden, um den Bereich von RGB abzudecken. Sie verwenden nur R&G.

Antworten (3)

RGB ist dreidimensional. Um das Problem zu verstehen, hilft es, den RGB-Farbraum als dreidimensionale Form zu visualisieren. Ein klassischer Weg ist als Würfel basierend auf Mengen der drei Dimensionen Rot, Grün und Blau:

Geben Sie hier die Bildbeschreibung ein

(Bilder aus Digital Color Design with the RGB Color Cube: Visualization and Color Coordination Activities , ein Zeitschriftenartikel, über den ich beim Schreiben dieses Artikels gestolpert bin und der für alle Interessierten eine Lektüre wert ist)

Ein Würfel mit Schwarz und Weiß an den gegenüberliegenden Ecken, Rot, Grün und Blau an den Ecken neben Schwarz und den Mischungen - Gelb, Cyan, Magenta - an den mit Weiß verbundenen Ecken. Im zweiten Beispiel fügt „oben“ Grün hinzu, „unten-links“ fügt Rot hinzu, „unten-rechts“ fügt Blau hinzu.

Wie verwandelt man einen Würfel in eine flache Ebene? Es ist, als würde man ein flaches Blatt Papier in einen Würfel verwandeln, aber umgekehrt ...

Geben Sie hier die Bildbeschreibung ein

...Sie können dies tun, indem Sie den Würfel zu einem Faltplan glätten (wie das Bild oben rechts) oder indem Sie Scheiben aus dem Würfel schneiden (wie das Bild oben in der Mitte). Dann hast du deine Farben, und wie du sie anordnest, ist dir überlassen.


Aber eines fehlt – Grautöne. Alle diese Farben sind stark gesättigt. Wenn Sie den gesamten RGB-Farbraum darstellen möchten, einschließlich Grautöne und teilweise entsättigter Farben, müssen Sie einen anderen Satz von drei Dimensionen verwenden, um Ihren RGB-Würfel zu generieren: HSL (Farbton, Sättigung und Helligkeit) oder HSB (Farbton, Sättigung). und Helligkeit AKA HSV, Wert).

Dieser Vergleich (aus Wikimedia) zeigt Würfel basierend auf RGB, dann HSL, dann HSB:

Geben Sie hier die Bildbeschreibung ein

(Beachten Sie, dass es sich bei allen um RGB-Farben handelt - HSL und HSB sind nur unterschiedliche Arten, einen Farbraum zu konzipieren.)


Ich würde vorschlagen, etwas zu verwenden, das alle möglichen HSB-Kombinationen durch das RGB schleift, so dass die Anzahl der Ergebnisse nur 40 beträgt, und dann einen geeigneten Weg finden, sie anzuordnen, wahrscheinlich basierend auf Slices.

Beachten Sie jedoch, dass Sie mit 3 Dimensionen und nur 40 Figuren nicht viele Schritte haben werden. Zum Beispiel könnten Sie 2 Sättigungsstufen (gesättigt, gräulich) , 3 Helligkeitsstufen (blass, mittel, dunkel) und 6 Farbtonstufen (blau, cyan, grün, gelb, rot, magenta) haben, und das würde ergeben 36 Farben, nur 4 für die Extreme (weiß, schwarz, hellgrau, dunkelgrau)

Hm, hsb und hsl sind rgb-Derivate. An der Tabelle für die 216 websicheren Farben, die ich verlinkt habe, sieht man die Grauwerte nicht gut, aber sie sind da. 51,51,51 = dunkelgrau. 204, 204, 51 = hsl 60, 60, 50. Im Würfel verstecken sich die Grauwerte entlang der Diagonalen von Weiß nach Schwarz.
Das Abflachen des Würfels entspricht nicht meiner Antwort. Aus diesem Grund argumentieren Sie, dass Grautöne fehlen, was nicht stimmt. Ich sehe nicht, wie dieser Vorschlag, den Schwerpunkt auf verschiedene Arten von Werten (im Handel mit anderen) zu legen, im Kontext dieser Frage nützlich ist.
Das Abflachen des Würfels sollte Ihrer Antwort nicht entsprechen, und ich habe nie gesagt, dass Grautöne in Ihrem Ansatz fehlen würden. Dies ist eine Antwort, die den Menschen helfen soll zu verstehen, was es bedeutet, durch einen gesamten Farbraum zu navigieren, und dass es mehr als eine Möglichkeit gibt, dies zu tun. Es ist kein Kommentar zu Ihrer Antwort.
Aber das Abflachen des Würfels ist nicht, wie Sie in erster Linie in einem dreidimensionalen (relativen) Farbraum navigieren sollten. Ihre Quelle ist nicht gut, selbst wenn sie von einer .edu-Site stammt. Wenn Benutzer Vlad nach "den wichtigsten Farben aus dem gesamten Farbspektrum" fragt, wie können Sie dann annehmen, dass er zum Beispiel Orange weglassen möchte?
Ich nehme nicht an, dass er Orange weglassen möchte... aber er hat gesagt, dass er nur 40 Farben hat, also je nachdem, worauf er sich genau konzentrieren möchte, müssen vielleicht irgendwo Kompromisse gemacht werden, zB weniger unterschiedliche Farbtöne ermöglichen mehr Variation in Helligkeit oder Sättigung, umgekehrt usw. Ich sage nicht, dass ein Ansatz richtig oder falsch ist, ich zeige nur ein paar Denkansätze zum Farbraum, damit er den Ansatz finden kann, der den spezifischen Anforderungen am besten entspricht seine Bewerbung.
Eine Kugel abzuflachen und sie als Scheibe darzustellen, ist auch nur eine Möglichkeit zu zeigen, wie man über die Erde denken könnte.
Nun Leute, ich kann die Anzahl der Kacheln ändern, solange ich alle möglichen Farben in einen 800 x 1280 Pixel Bildschirm passe :) Aber zuerst muss ich die Antworten analysieren. Sehr aufwendig :) Habe das nicht erwartet
Beide Antworten sind gut, lassen Sie mir etwas Zeit zum Auswählen

Im RGB-Farbmodell haben Sie drei Kanäle reg, grün und blau mit Werten von 0 - 255 (das wussten Sie!).

Um das gesamte Spektrum abzudecken, kombinieren Sie die drei Kanäle mit einer gewissen Anzahl von Werteoptionen.

Wenn Sie also für jeden Kanal x Wertoptionen haben, erhalten Sie x * x * x = x^3 Farbwerte.

Für zwei Optionen zB 0 und 255 erhalten Sie 2^3 = 8 Farben.

Für sechs Optionen, die fünf (= 6 - 1) Segmente darstellen, haben Sie die Werte
0 * (255 / 5), 1 * (255 / 5), 2 * (255 / 5), 3 * (255 / 5) , 4 * (255 / 5), 5 * (255 / 5)
was 6^3 = 216 Farben ergibt, was Sie hier als Beispiel sehen können .

Der obige Bereich hat Ihnen gezeigt, wie Sie Ihr eindimensionales Array für einen Kanal erstellen. Da die drei Kanäle gleich sind, können Sie es für alle drei Kanäle verwenden.

Damit baust du dein zweidimensionales Array auf:

0, 0, 0
51, 0, 0
102, 0, 0
...

Ich denke, Sie verstehen es. Wenn nicht, müssen Sie diese Frage bei Stack Overflow stellen (und mich darauf hinweisen).

Ich visualisiere gerne Dinge, also habe ich versucht, einen grundlegenden Code zusammenzustellen, der dies ausführt - jsbin.com/inuzoy/3 - ist dies eine genaue Illustration Ihrer Antwort?
Neu zusammengefügt, um der Anordnung im verlinkten Wikipedia-Artikel zu entsprechen (und um einen Tippfehler zu beheben ...) jsbin.com/inuzoy/4
Ja. Ist jsbin.com/uruhir/2 eine genaue Illustration Ihrer Antwort?

Hier ist, wie ich es machen würde - dies könnte dem ähneln, was der andere John vorgeschlagen hat, aber weniger gleichungsmäßig.

Jede Farbe von RGB geht also von 0 bis 255. Finden Sie heraus, wie viele Samples Sie von jeder Farbe wollen, für dieses sehr einfache Beispiel sage ich 3, das sind 0, 128, 255 (128 ist der halbe Punkt gerundet) .

Arbeiten Sie nun alle möglichen Kombinationen:

0, 0, 0 | 0, 0, 128 | 0, 0, 255 | 0, 128, 0 | 0, 255, 0 | 0, 128, 128 | 0, 128, 255 | 0, 255, 128 | 0, 255, 255 | 128, 0, 0 | 255, 0, 0 | 128, 128, 0 | 128, 255, 0 | 128, 128, 128 | 128, 128, 255 | 128, 255, 128 | 128, 255, 255 | 255, 255, 255