Farbverlauf RGB alle Farben

[Lasnik]

Hallo,
ich will (für mein Malprogramm) ein Farbverlauf ähnlich wie im Beispielbild erstellen:


Wichtig ist nur, dass er sich aus r, g und b Werten zusammensetzt und alle Farben enthält.

Im Internet hab ich zu dem Thema leider nach einer kurzen Googlesuche nur Farbverläufe zweier Farben gefunden.

Irgendwelche Ansätze für einen schönen Übergang?

 

[BestGoalkeeper]

Hm ich kann das jetzt nicht so genau einschätzen aber stimmt obiges Spektrum mit folgendem überein:

https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Triangulo_HSV.png/220px-Triangulo_HSV.png

Also nur wenig Gelb und Violett, dafür aber viel Rot, Blau und Grün? Wenn dem so ist dann ist der HSV-Farbraum die richtige Lösung.

 

[BestGoalkeeper]

....



hat keine Ähnlichkeit oder?

 

[MoxxiManagarm]

Wichtig ist nur, dass er sich aus r, g und b Werten zusammensetzt und alle Farben enthält.

Das wird du mit einer linearen Darstellung nicht hinbekommen. RGB sind 3 Werte und du brauchst dafür ein Dreieck/Kreis, so wie die Color Picker es normalerweise haben. Die Lineare Darstellung ist nur eine Aneinanderreihung von Verläufen 2er Farben.



0: 255 0 0
60: 255 255 0
120: 0 255 0
180: 0 255 255
240: 0 0 255
300: 255 0 255
360: 255 0 0

Zwischen diesen Markern wächst oder verringert sich ein Wert linear. Hier fängt es halt mit Rot an, aber es könnte genauso gut mit blau oder grün anfangen. Das Prinzip ist klar denke ich.

 

[httpdigest]

Du brauchst einfach einen anderen Farbraum als RGB. Hue-Saturation-Value bzw. Hue-Saturation-Lightness ist hier das richtige. Da kannst du "Hue" linear verändern und rechnest das dann in RGB um (suche nach HSV to RGB).

 

[Thallius]

Du brauchst einfach einen anderen Farbraum als RGB. Hue-Saturation-Value bzw. Hue-Saturation-Lightness ist hier das richtige. Da kannst du "Hue" linear verändern und rechnest das dann in RGB um (suche nach HSV to RGB).

Dann hat er aber immer noch nicht alle Farben und Helligkeiten in so einem Balken

 

[mrBrown]

Dann hat er aber immer noch nicht alle Farben und Helligkeiten in so einem Balken

Welche Farben fehlen denn hier, die im Beispielbild vorhanden sind?

Alle Helligkeiten sind auch im Beispielbild nicht vorhanden, in üblichen Malprogrammen (und darum gehts wohl) gibts dafür üblicherweise eine separate Auswahlmöglichkeit.

 

[httpdigest]

Dann hat er aber immer noch nicht alle Farben und Helligkeiten in so einem Balken

Warum nicht? Und was genau meinst du mit "alle Farben" und "alle Helligkeiten"? Man kann natürlich mit einer Farbauflösung von 32-bit nur ca. 4,2 Milliarden Farben (also nicht ALLE) Farben darstellen.

 

[BestGoalkeeper]

Man kann natürlich mit einer Farbauflösung von 32-bit nur ca. 4,2 Milliarden Farben (also nicht ALLE) Farben darstellen.

Zu dem schränkt der eingesetzte Monitor die möglichen darzustellenden Farben auch noch ein bisschen ein.

 

[Thallius]

Welche Farben fehlen denn hier, die im Beispielbild vorhanden sind?

Alle Helligkeiten sind auch im Beispielbild nicht vorhanden, in üblichen Malprogrammen (und darum gehts wohl) gibts dafür üblicherweise eine separate Auswahlmöglichkeit.

Zeig mir mal schwarz und weiß und alle Grautöne....

 

[sascha-sphw]

Zeig mir mal schwarz und weiß und alle Grautöne....

Die sind im Beispielbild aber auch nicht enthalten.

 

[Thallius]

Die sind im Beispielbild aber auch nicht enthalten.

Sagt ja keiner aber er hat geschrieben das er alle will

 

[Lasnik]

Danke an die vielen Antworten!
Ich habe ersteinmal nach einer simpen HSV Palette gesucht. Ich habe es also so in meinen Code integriert:

(Die Funktionen stammen aus Processing: https://processing.org/, "stroke()" verändert die Farbe)

Ich habe jetzt in einer Variable "strokeColor" den RGB Wert gespeichert, aber wie könnte ich nun die Helligkeit davon verändern?


Wie ihr merkt bin ich noch ein ganz schöner Anfänger, wenn es um Farben geht. Das ist mein erstes Programm in dem ich überhaupt welche nutze.
Ich freu mich trotzdem auf Antworten 😉

 

[Thallius]

Du kannst bei RGB Werten eben nicht so einfach die Helligkeit ändern. Deshalb haben wir ja gesagt solltest du HSV benutzen. HSV steht für Hue (Farbwert), Saturation (Sättigung), Value (Helligkeit). In dem Modell kannst du dann ganz einfach die Helligkeit ändern indem du einfach den V Wert änderst.

 

[httpdigest]

Dann hat er aber immer noch nicht alle Farben und Helligkeiten in so einem Balken

 

[Thallius]

Dann hat er aber immer noch nicht alle Farben und Helligkeiten in so einem Balken

Die kriegst du halt nur in der Dreidimensionalität welche sich auf einem Computermonitor nunmal schwer darstellen läst. Er braucht also auf jeden Fall zwei Elemente wie auch immer er die Kombiniert ist dann sein Ding. Das macht ja auch jedes Malprogramm anders.

 

[httpdigest]

Du merkst schon, dass du vorhin in deiner Antwort genau das geschrieben hast, was ich geschrieben hatte: Nutze halb HSV und konvertiere nach RGB bei der Ausgabe?
Und du dann als Antwort geschrieben hast: "Dann hat er aber immer noch nicht alle Farben und Helligkeiten in so einem Balken"

 

[Thallius]

Du merkst schon, dass du vorhin in deiner Antwort genau das geschrieben hast, was ich geschrieben hatte: Nutze halb HSV und konvertiere nach RGB bei der Ausgabe?
Und du dann als Antwort geschrieben hast: "Dann hat er aber immer noch nicht alle Farben und Helligkeiten in so einem Balken"

Versteh ich nicht. Was hat jetzt das eine mit dem anderen zu tun?

 

[BestGoalkeeper]

Zeig mir mal schwarz und weiß und alle Grautöne....

Sind Schwarz, Weiß und Grau Farben?

@Lasnik Genau richtig, es gibt Funktionen, um RGB nach HSV umzurechnen und umgekehrt, das ist ganz einfach. Du könntest dann von 0 bis 359 iterieren und jedes Mal eine andere, benachbarte Farbe bekommen.

 

[Thallius]

Sind Schwarz, Weiß und Grau Farben?

@Lasnik Genau richtig, es gibt Funktionen, um RGB nach HSV umzurechnen und umgekehrt, das ist ganz einfach. Du könntest dann von 0 bis 359 iterieren und jedes Mal eine andere, benachbarte Farbe bekommen.

So einfach ist das übrigens gar nicht. Es gibt keine 100% Konvertierung. Es ist immer nur eine Annäherung.

 

[Lasnik]

Ich habe jetzt (ziemlich unelegant) versucht die hin und her zu konvertieren (ich dachte bit shifting wäre der richtige Ansatz).
Aber irgendwie sieht das nicht so aus, wie ich es wollte.
Wo ist im folgenden Code mein Denkfehler?

 

[BestGoalkeeper]

Also, die Umrechnung an sich ist schon ausreichend genau. Aber du meinst vielleicht, dass beide Modelle nicht alle Farben abbilden und der Monitor auch nicht alle Farben die es gibt darstellen kann? (Auch, wenn es schon ziemlich viele sind) Ich hab mal gehört, dieses Magenta von der Telekom soll am Bildschirm immer anders aussehen als in echt...

 

[Lasnik]

Übrigens hier mein kleines Testprogramm, damit ihr nicht weiter grübelt, wie ich es umsetze:

Auf der rechten Seite sollen nun also die Farben dunkler und dunkler werden

 

[httpdigest]

Versteh ich nicht. Was hat jetzt das eine mit dem anderen zu tun?

Ja, indeed. Was hat das eine denn mit dem anderen zu tun. Das hab ich auch nicht verstanden:

httpdigest hat gesagt.:
Du brauchst einfach einen anderen Farbraum als RGB. Hue-Saturation-Value bzw. Hue-Saturation-Lightness ist hier das richtige. Da kannst du "Hue" linear verändern und rechnest das dann in RGB um (suche nach HSV to RGB).

Dann hat er aber immer noch nicht alle Farben und Helligkeiten in so einem Balken

Farbverlauf RGB alle Farben

Hallo, ich will (für mein Malprogramm) ein Farbverlauf ähnlich wie im Beispielbild erstellen: Wichtig ist nur, dass er sich aus r, g und b Werten zusammensetzt und alle Farben enthält. Im Internet hab ich zu dem Thema leider nach einer kurzen Googlesuche nur Farbverläufe zweier Farben...

www.java-forum.org

 

[Lasnik]

Dann hat er aber immer noch nicht alle Farben und Helligkeiten in so einem Balken

Ich habe meine Frage falsch formuliert!

 

[Lasnik]

Also, die Umrechnung an sich ist schon ausreichend genau. Aber du meinst vielleicht, dass beide Modelle nicht alle Farben abbilden und der Monitor auch nicht alle Farben die es gibt darstellen kann? (Auch, wenn es schon ziemlich viele sind) Ich hab mal gehört, dieses Magenta von der Telekom soll am Bildschirm immer anders aussehen als in echt...

Nein. Es funktioniert ziemlich grundlegend nicht:
https://cdn.discordapp.com/attachme...1258451216891914/2020-10-01_18-05-41_Trim.mp4

 

[BestGoalkeeper]

@Lasnik programmatisch errechnest du die Farben so:

    public static void showColorFrame() {
        JFrame f = new JFrame();
        Canvas c = new Canvas() {
            @Override
            public void paint(Graphics g) {
                for (int i = 0; i < 360; i++) {
                    Color hsbColor = Color.getHSBColor(i / 360.0f, 1f, 1f);
                    int rgb = hsbColor.getRGB();
                    System.out.printf("%5s%5s%5s%n", (rgb >> 16) & 0xff, (rgb >> 8) & 0xff, (rgb >> 0) & 0xff);
                    g.setColor(hsbColor);
                    g.drawRect(i, 0, 1, 50);
                }
            }
        };
        c.setPreferredSize(new Dimension(360, 50));
        f.add(c);
        f.pack();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setVisible(true);
    }

    public static void main(String[] args) {
        showColorFrame();
    }

Spoiler

  255    0    0
  255    4    0
  255    9    0
  255   13    0
  255   17    0
  255   21    0
  255   26    0
  255   30    0
  255   34    0
  255   38    0
  255   43    0
  255   47    0
  255   51    0
  255   55    0
  255   60    0
  255   64    0
  255   68    0
  255   72    0
  255   77    0
  255   81    0
  255   85    0
  255   89    0
  255   94    0
  255   98    0
  255  102    0
  255  106    0
  255  111    0
  255  115    0
  255  119    0
  255  123    0
  255  128    0
  255  132    0
  255  136    0
  255  140    0
  255  145    0
  255  149    0
  255  153    0
  255  157    0
  255  162    0
  255  166    0
  255  170    0
  255  174    0
  255  179    0
  255  183    0
  255  187    0
  255  191    0
  255  196    0
  255  200    0
  255  204    0
  255  208    0
  255  213    0
  255  217    0
  255  221    0
  255  225    0
  255  230    0
  255  234    0
  255  238    0
  255  242    0
  255  247    0
  255  251    0
  255  255    0
  251  255    0
  247  255    0
  242  255    0
  238  255    0
  234  255    0
  230  255    0
  225  255    0
  221  255    0
  217  255    0
  212  255    0
  208  255    0
  204  255    0
  200  255    0
  196  255    0
  191  255    0
  187  255    0
  183  255    0
  179  255    0
  174  255    0
  170  255    0
  166  255    0
  162  255    0
  157  255    0
  153  255    0
  149  255    0
  144  255    0
  140  255    0
  136  255    0
  132  255    0
  128  255    0
  123  255    0
  119  255    0
  115  255    0
  111  255    0
  106  255    0
  102  255    0
   98  255    0
   94  255    0
   89  255    0
   85  255    0
   81  255    0
   76  255    0
   72  255    0
   68  255    0
   64  255    0
   60  255    0
   55  255    0
   51  255    0
   47  255    0
   43  255    0
   38  255    0
   34  255    0
   30  255    0
   26  255    0
   21  255    0
   17  255    0
   13  255    0
    8  255    0
    4  255    0
    0  255    0
    0  255    4
    0  255    8
    0  255   13
    0  255   17
    0  255   21
    0  255   25
    0  255   30
    0  255   34
    0  255   38
    0  255   42
    0  255   47
    0  255   51
    0  255   55
    0  255   60
    0  255   64
    0  255   68
    0  255   72
    0  255   76
    0  255   81
    0  255   85
    0  255   89
    0  255   93
    0  255   98
    0  255  102
    0  255  106
    0  255  111
    0  255  115
    0  255  119
    0  255  123
    0  255  128
    0  255  132
    0  255  136
    0  255  140
    0  255  144
    0  255  149
    0  255  153
    0  255  157
    0  255  161
    0  255  166
    0  255  170
    0  255  174
    0  255  178
    0  255  183
    0  255  187
    0  255  191
    0  255  196
    0  255  200
    0  255  204
    0  255  208
    0  255  212
    0  255  217
    0  255  221
    0  255  225
    0  255  229
    0  255  234
    0  255  238
    0  255  242
    0  255  247
    0  255  251
    0  255  255
    0  251  255
    0  247  255
    0  242  255
    0  238  255
    0  234  255
    0  230  255
    0  225  255
    0  221  255
    0  217  255
    0  212  255
    0  208  255
    0  204  255
    0  200  255
    0  196  255
    0  191  255
    0  187  255
    0  183  255
    0  178  255
    0  174  255
    0  170  255
    0  166  255
    0  162  255
    0  157  255
    0  153  255
    0  149  255
    0  144  255
    0  140  255
    0  136  255
    0  132  255
    0  128  255
    0  123  255
    0  119  255
    0  115  255
    0  111  255
    0  106  255
    0  102  255
    0   98  255
    0   94  255
    0   89  255
    0   85  255
    0   81  255
    0   76  255
    0   72  255
    0   68  255
    0   64  255
    0   60  255
    0   55  255
    0   51  255
    0   47  255
    0   42  255
    0   38  255
    0   34  255
    0   30  255
    0   26  255
    0   21  255
    0   17  255
    0   13  255
    0    8  255
    0    4  255
    0    0  255
    4    0  255
    8    0  255
   13    0  255
   17    0  255
   21    0  255
   25    0  255
   30    0  255
   34    0  255
   38    0  255
   42    0  255
   47    0  255
   51    0  255
   55    0  255
   60    0  255
   64    0  255
   68    0  255
   72    0  255
   76    0  255
   81    0  255
   85    0  255
   89    0  255
   94    0  255
   98    0  255
  102    0  255
  106    0  255
  111    0  255
  115    0  255
  119    0  255
  123    0  255
  128    0  255
  132    0  255
  136    0  255
  140    0  255
  144    0  255
  149    0  255
  153    0  255
  157    0  255
  161    0  255
  166    0  255
  170    0  255
  174    0  255
  179    0  255
  183    0  255
  187    0  255
  191    0  255
  195    0  255
  200    0  255
  204    0  255
  208    0  255
  213    0  255
  217    0  255
  221    0  255
  225    0  255
  230    0  255
  234    0  255
  238    0  255
  242    0  255
  247    0  255
  251    0  255
  255    0  255
  255    0  251
  255    0  247
  255    0  242
  255    0  238
  255    0  234
  255    0  229
  255    0  225
  255    0  221
  255    0  217
  255    0  213
  255    0  208
  255    0  204
  255    0  200
  255    0  195
  255    0  191
  255    0  187
  255    0  183
  255    0  178
  255    0  174
  255    0  170
  255    0  166
  255    0  161
  255    0  157
  255    0  153
  255    0  149
  255    0  144
  255    0  140
  255    0  136
  255    0  132
  255    0  128
  255    0  123
  255    0  119
  255    0  115
  255    0  111
  255    0  106
  255    0  102
  255    0   98
  255    0   94
  255    0   89
  255    0   85
  255    0   81
  255    0   77
  255    0   72
  255    0   68
  255    0   64
  255    0   59
  255    0   55
  255    0   51
  255    0   47
  255    0   43
  255    0   38
  255    0   34
  255    0   30
  255    0   25
  255    0   21
  255    0   17
  255    0   13
  255    0    8
  255    0    4
  255    0    0
  255    4    0
  255    9    0
  255   13    0
  255   17    0
  255   21    0
  255   26    0
  255   30    0
  255   34    0
  255   38    0
  255   43    0
  255   47    0
  255   51    0
  255   55    0
  255   60    0
  255   64    0
  255   68    0
  255   72    0
  255   77    0
  255   81    0
  255   85    0
  255   89    0
  255   94    0
  255   98    0
  255  102    0
  255  106    0
  255  111    0
  255  115    0
  255  119    0
  255  123    0
  255  128    0
  255  132    0
  255  136    0
  255  140    0
  255  145    0
  255  149    0
  255  153    0
  255  157    0
  255  162    0
  255  166    0
  255  170    0
  255  174    0
  255  179    0
  255  183    0
  255  187    0
  255  191    0
  255  196    0
  255  200    0
  255  204    0
  255  208    0
  255  213    0
  255  217    0
  255  221    0
  255  225    0
  255  230    0
  255  234    0
  255  238    0
  255  242    0
  255  247    0
  255  251    0
  255  255    0
  251  255    0
  247  255    0
  242  255    0
  238  255    0
  234  255    0
  230  255    0
  225  255    0
  221  255    0
  217  255    0
  212  255    0
  208  255    0
  204  255    0
  200  255    0
  196  255    0
  191  255    0
  187  255    0
  183  255    0
  179  255    0
  174  255    0
  170  255    0
  166  255    0
  162  255    0
  157  255    0
  153  255    0
  149  255    0
  144  255    0
  140  255    0
  136  255    0
  132  255    0
  128  255    0
  123  255    0
  119  255    0
  115  255    0
  111  255    0
  106  255    0
  102  255    0
   98  255    0
   94  255    0
   89  255    0
   85  255    0
   81  255    0
   76  255    0
   72  255    0
   68  255    0
   64  255    0
   60  255    0
   55  255    0
   51  255    0
   47  255    0
   43  255    0
   38  255    0
   34  255    0
   30  255    0
   26  255    0
   21  255    0
   17  255    0
   13  255    0
    8  255    0
    4  255    0
    0  255    0
    0  255    4
    0  255    8
    0  255   13
    0  255   17
    0  255   21
    0  255   25
    0  255   30
    0  255   34
    0  255   38
    0  255   42
    0  255   47
    0  255   51
    0  255   55
    0  255   60
    0  255   64
    0  255   68
    0  255   72
    0  255   76
    0  255   81
    0  255   85
    0  255   89
    0  255   93
    0  255   98
    0  255  102
    0  255  106
    0  255  111
    0  255  115
    0  255  119
    0  255  123
    0  255  128
    0  255  132
    0  255  136
    0  255  140
    0  255  144
    0  255  149
    0  255  153
    0  255  157
    0  255  161
    0  255  166
    0  255  170
    0  255  174
    0  255  178
    0  255  183
    0  255  187
    0  255  191
    0  255  196
    0  255  200
    0  255  204
    0  255  208
    0  255  212
    0  255  217
    0  255  221
    0  255  225
    0  255  229
    0  255  234
    0  255  238
    0  255  242
    0  255  247
    0  255  251
    0  255  255
    0  251  255
    0  247  255
    0  242  255
    0  238  255
    0  234  255
    0  230  255
    0  225  255
    0  221  255
    0  217  255
    0  212  255
    0  208  255
    0  204  255
    0  200  255
    0  196  255
    0  191  255
    0  187  255
    0  183  255
    0  178  255
    0  174  255
    0  170  255
    0  166  255
    0  162  255
    0  157  255
    0  153  255
    0  149  255
    0  144  255
    0  140  255
    0  136  255
    0  132  255
    0  128  255
    0  123  255
    0  119  255
    0  115  255
    0  111  255
    0  106  255
    0  102  255
    0   98  255
    0   94  255
    0   89  255
    0   85  255
    0   81  255
    0   76  255
    0   72  255
    0   68  255
    0   64  255
    0   60  255
    0   55  255
    0   51  255
    0   47  255
    0   42  255
    0   38  255
    0   34  255
    0   30  255
    0   26  255
    0   21  255
    0   17  255
    0   13  255
    0    8  255
    0    4  255
    0    0  255
    4    0  255
    8    0  255
   13    0  255
   17    0  255
   21    0  255
   25    0  255
   30    0  255
   34    0  255
   38    0  255
   42    0  255
   47    0  255
   51    0  255
   55    0  255
   60    0  255
   64    0  255
   68    0  255
   72    0  255
   76    0  255
   81    0  255
   85    0  255
   89    0  255
   94    0  255
   98    0  255
  102    0  255
  106    0  255
  111    0  255
  115    0  255
  119    0  255
  123    0  255
  128    0  255
  132    0  255
  136    0  255
  140    0  255
  144    0  255
  149    0  255
  153    0  255
  157    0  255
  161    0  255
  166    0  255
  170    0  255
  174    0  255
  179    0  255
  183    0  255
  187    0  255
  191    0  255
  195    0  255
  200    0  255
  204    0  255
  208    0  255
  213    0  255
  217    0  255
  221    0  255
  225    0  255
  230    0  255
  234    0  255
  238    0  255
  242    0  255
  247    0  255
  251    0  255
  255    0  255
  255    0  251
  255    0  247
  255    0  242
  255    0  238
  255    0  234
  255    0  229
  255    0  225
  255    0  221
  255    0  217
  255    0  213
  255    0  208
  255    0  204
  255    0  200
  255    0  195
  255    0  191
  255    0  187
  255    0  183
  255    0  178
  255    0  174
  255    0  170
  255    0  166
  255    0  161
  255    0  157
  255    0  153
  255    0  149
  255    0  144
  255    0  140
  255    0  136
  255    0  132
  255    0  128
  255    0  123
  255    0  119
  255    0  115
  255    0  111
  255    0  106
  255    0  102
  255    0   98
  255    0   94
  255    0   89
  255    0   85
  255    0   81
  255    0   77
  255    0   72
  255    0   68
  255    0   64
  255    0   59
  255    0   55
  255    0   51
  255    0   47
  255    0   43
  255    0   38
  255    0   34
  255    0   30
  255    0   25
  255    0   21
  255    0   17
  255    0   13
  255    0    8
  255    0    4

 

[Lasnik]

System.out.printf("%5s%5s%5s%n", (rgb >> 16) & 0xff, (rgb >> 8) & 0xff, (rgb >> 0) & 0xff);

Danke!
Mein Bit shifting schien falsch zu sein. Wenn ich es so shifte funktioniert alles!!

 

[BestGoalkeeper]

Nicht verzagen, BestGoalkeeper fragen! 😉