HTML alle farben html

[world of color]

Jo moin,

Ich hab da eine Idee und wollte fragen ob es überhaupt möglich ist diese umzusetzen.

Es gibt mit dem RGB-System 255 hoch 3 farben die man erstellen kann.

1. Wäre es möglich mit einem html geschrieben code alle Farbkombination (folglich 16.581.375) auslesen zu lassen?
2. wenn ja , auch noch als PNG-Datei abspeichern zu lassen, in einer x beliebigen Größe, keine Ahung 500 x 500 pixel
um praktisch "die größte Farbkollektion" zu erstellen die is geben kann.

Wäre das Speicherplatzmäßig überhaupt möglich?

Zusatz Frage: wenn man von allen Farben der digitalen Welt sprechen würde. Bezieht man sich eher auf das RGB-System oder die Hexadezimale Fardefinition?

bleibt konstruktiv, hab nicht so Ahnung davon, könnte auch eine sehr dumme Fragen sein..

sonnie Grüße und bleibt gesund

 

[madmax2010]

In dem Fall brauchst du bei einer Bitmap 24 bytes pro pixel. Sind dann fuer alle Farben 397MB
Beides wurde garantiert schon gemacht. Mach einfach

Zusatz Frage: wenn man von allen Farben der digitalen Welt sprechen würde. Bezieht man sich eher auf das RGB-System oder die Hexadezimale Fardefinition?

Wird beides genutzt.

um praktisch "die größte Farbkollektion" zu erstellen die is geben kann.

Die es in dem Zahlenraum geben kann.

 

[CrazyT]

Meinst du alle Farben auf einen schlag oder jede Farbe mit einer einzelnen PNG datei?

Wenn letzteres: viel spass beim sortieren...

Speichertechnisch sollte das machbar sein, solltest aber eher auf 512x512 oder besser 2048x2048px setzen für sowas.

 

[User007]

Hi und (erstmal) willkommen im Forum...

Meinst Du vllt. etwas so in der Art umgesetzt, wie bspw. bei dieser Webseite mit PANTONE-Farbmustern?

 

[S.Kara]

Es gibt mit dem RGB-System 255 hoch 3 farben die man erstellen kann.

Bei 8 Bit ja (256^3). Bei 10 Bit sind es 1024^3, bei 12 Bit 4096^3 usw...

1. Wäre es möglich mit einem html geschrieben code alle Farbkombination (folglich 16.581.375) auslesen zu lassen?

Ich nehme an du meinst erzeugen? Dann ja. Ansonsten keine Ahnung was du mit auslesen meinst. (Anzahl falsch)

2. wenn ja , auch noch als PNG-Datei abspeichern zu lassen, in einer x beliebigen Größe, keine Ahung 500 x 500 pixel
um praktisch "die größte Farbkollektion" zu erstellen die is geben kann.

Wenn ich dich richtig verstehe willst du alle möglichen Farben in diesem Bild speichern? Das wird nicht funktionieren.
Bei 500 x 500 px hast du logischerweise nur Platz für 250.000 Pixel.

Für 8 Bit bräuchtest du 16.777.216 Pixel, also 4096 x 4096 px. Bei 10 Bit wären es 32.768 x 32.768 px.
Dann klappt das.

Wäre das Speicherplatzmäßig überhaupt möglich?

Bei 8 Bit wäre das Bild so 100 MB groß, bei 10 Bit ein paar GB. Also durchaus machbar würde ich sagen.

Zusatz Frage: wenn man von allen Farben der digitalen Welt sprechen würde.

Ohne Kontext schwierig von "allen Farben" zu sprechen. Bei normalen Anwendungen ist man meist bei 8 Bit, also 16 Mio Farben.

Bei HDR sind es mindestens 10 Bit, also 1 Mrd. Farben.

In der Fotografie sind es oft 12 - 16 Bit. Bei 16 Bit wären es 281.474.976.710.656 Farben. Auch wenn die nicht dargestellt werden können, werden solche Lookup-Tables genutzt.

Bezieht man sich eher auf das RGB-System oder die Hexadezimale Fardefinition?

RGB oder Hexa gibt es so nicht. RGB kannst du im Dezimalsystem, Hexa, Octa, Binär oder was auch immer angeben.
Im Web nutzt man eher Hexa, also z.B. #00ff00 für grün. Spricht aber auch nichts dagegen das als 0, 255, 0 anzugeben.

 

[DJMadMax]

Bei 8 Bit wäre das Bild so 100 MB groß, bei 10 Bit ein paar GB. Also durchaus machbar würde ich sagen.

In einem solchen Fall würde mich brennend interessieren, wie eine verlustfreie Komprimierung a la PNG oder TGA an diese Aufgabe herangeht.

Bekanntlich fassen beide Formate Bildbereiche so zusammen, dass eben für große, farbgleiche Bereiche nicht jeder einzelne Pixel seine 8 Bit-Information erhält, sondern dieser gesamte Flächenbereich mittels Koordinaten/nearest Neighbor-Information gefüttert wird - eben so, dass man die Informationen jederzeit verlustfrei vorliegen hat, auch wenn nicht für jeden einzelnen Pixel die eigentliche Information vorliegt.

Was diese Art der verlustfreien Komprimierung nun tut, wenn eigentlich kein (angrenzender wie auch entfernter) Pixel dem anderen gleicht, wäre durchaus interessant, herauszufinden. Gleichzeitig handelt es sich bei einer wie von @world of color (toller, zum Thema passender Name übrigens ^^) beschriebenen, farblich aufsteigenden Bilddatei ja um einen nachvollziehbaren und mathematisch leicht umsetzbaren/erklärebaren Logarithmus.

Wie gesagt, mich interessiert das an dieser Stelle rein in Bezug auf die mögliche (verlustfreie!) Kompression der Ergebnisdatei.

Eventuell können wir das hier gemeinsam mit dem Threadersteller herausfinden, wenn die eigentlichen Fragen in die Tat umgesetzt werden können

 

[netzgestaltung]

Solche Farbseiten hab ich schon oft gesehen, zb:
https://coolors.co oder https://www.color-hex.com/

das kann dir ev als inspiration dienen.
MMN brauchst du nicht alle Farben gleichzeitig ausgeben.
Die würde ich eher in eine Datenbank eingeben, denn bei einigen Farben gibts noch Metadaten, die haben tw Namen oder auch Geschichte.

 

[DJMadMax]

In dem Fall brauchst du bei einer Bitmap 24 bytes pro pixel. Sind dann fuer alle Farben 397MB

Rechnerisch ja, tatsächlich erzeugt eine 1x1 Pixel große Bitmap aber eine Datei mit 58 Bytes - vermutlich aufgrund des Headers in der Datei ("was bin ich?"). Das aber nur am Rande.

EDIT:
Wieso eigentlich 24 Byte pro Pixel? Ich komme auf 3 Byte pro Pixel (Bit / 8 = Byte).

 

[S.Kara]

nachvollziehbaren und mathematisch leicht umsetzbaren/erklärebaren Logarithmus.

Algorithmus

Ein PNG nimmt soweit ich weiß Bildbereiche zusammen, speichert einen Basiswert und für die einzelnen Pixel die Differenz. Bei einem gleichmäßigen Anstieg des Farbwertes wird der Algorithmus sehr viele gleiche Bereiche finden, bei denen sich lediglich dieser Basiswert unterscheidet.

Genau identische Bereiche werden sich ja in dem Fall nicht finden / optimieren lassen.

Ich habe mal ein wenig gebastelt:

Spoiler: 8BitDefault

<!doctype html>
<html lang=de>
    <head>
        <meta charset=utf-8>
        <title>8BitDefault</title>
    </head>
    <body>
        <canvas id="canvas" width="4096" height="4096"></canvas>
        <script>
            document.addEventListener("DOMContentLoaded", function(event) {
                var canvas = document.getElementById("canvas");
                var canvasWidth = canvas.width;
                var canvasHeight = canvas.height;
                var ctx = canvas.getContext("2d");
                var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

                var r = 0, g = 0, b = 0;
                for (let h = 0; h < canvasHeight; h++) {
                    for (let w = 0; w < canvasWidth; w++) {
                        var index = (w + h * canvasWidth) * 4;

                        canvasData.data[index + 0] = r;
                        canvasData.data[index + 1] = g;
                        canvasData.data[index + 2] = b;
                        canvasData.data[index + 3] = 255;

                        r++;
                        if (r > 255) {
                            r = 0;
                            b++;
                        }
                        if (b > 255) {
                            b = 0;
                            g++;
                        }
                    }   
                }

                ctx.putImageData(canvasData, 0, 0);
            });
        </script>
    </body>
</html>

Hier haben wir alle Farben bei 8 Bit Farbtiefe. Als png gespeichert belegt das Teil einen halben MB. Als BMP (unkomprimiert) 50 MB.

Wenn wir den ganzen Spaß etwas mischen

Spoiler: 8BitShuffle

<!doctype html>
<html lang=de>
    <head>
        <meta charset=utf-8>
        <title>8BitShuffle</title>
    </head>
    <body>
        <canvas id="canvas" width="4096" height="4096"></canvas>
        <script>
            document.addEventListener("DOMContentLoaded", function(event) {
                var canvas = document.getElementById("canvas");
                var canvasWidth = canvas.width;
                var canvasHeight = canvas.height;
                var ctx = canvas.getContext("2d");
                var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

                var r = 0, g = 0, b = 0;
                for (let h = 0; h < canvasHeight; h++) {
                    for (let w = 0; w < canvasWidth; w++) {
                        var index = (w + h * canvasWidth) * 4;

                        canvasData.data[index + 0] = r;
                        canvasData.data[index + 1] = g;
                        canvasData.data[index + 2] = b;
                        canvasData.data[index + 3] = 255;

                        r++;
                        if (r > 255) {
                            r = 0;
                            b++;
                        }
                        if (b > 255) {
                            b = 0;
                            g++;
                        }
                    }   
                }

                // shuffle
                var maxIdx = canvasWidth * canvasHeight * 4;
                for (let i = 0; i < maxIdx * 10; i++) {
                    var idxA = Math.trunc(Math.random() * maxIdx);
                    var idxB = Math.trunc(Math.random() * maxIdx);

                    var tmp = canvasData.data[idxA];
                    canvasData.data[idxA] = canvasData.data[idxB];
                    canvasData.data[idxB] = tmp;
                }

                ctx.putImageData(canvasData, 0, 0);
            });

        </script>
    </body>
</html>

benötigt die PNG plötzlich 66 MB (kann variieren). Als BMP bleibt es natürlich bei den 50 MB.

Wir sehen verlustfreie Komprimierung ist nicht immer besser als keine Komprimierung.


Die Forensoftware scheint keine Bilder mit 4096x4096 Pixeln zu erlauben. Das in den Spoilern kann einfach als .html gespeichert und mit einem Browser geöffnet werden. Das shuffle-Ding braucht ein paar Sekunden für die Berechnungen.

Leider lässt das JavaScript Canvas nur 8 Bit zu. Wäre schön das noch als 10 Bit zu haben.
Jemand fit in Python hier?

Edit:
Habs mal bei JSFiddle hochgeladen:
normal: https://jsfiddle.net/bns3crgj
shuffle: https://jsfiddle.net/0jmoeaub (wie gesagt hier braucht es ein paar Sekunden)

 

[DJMadMax]

Oh, saugut @S.Kara - und ja, natürlich ALGOrithmus, danke für die Korrektur

Vielen Dank für das Aufschlüsseln der PNG vs. BMP und wie sich das Ganze bei einem nicht gleichmäßig verteilten Farbverlauf verhält. Die zweite PNG-Dateigröße verwundert mich nicht, aber Ich bin höchst überrascht, wie effizient die verlustfreie Komprimierung bei der "sauber" erstellten Bilddatei verläuft.

 

[world of color]

Erstmal danke an alle die sich hier beteiligen! Mega!

Find die Idee auf einer PNG Datei alle Farben zu haben im Bezug auf die komprimierung sehr Interessant.

Mir ging es aber eher darum eine Art Kollektion zu erstellen. Praktisch jede Farb-Wert-Kombination im RGB-System auslesen zu lassen und jede Kombination als seperate Datei im Format bsp 500 x 500 pixeln erstellen zu lassen.
Bei 500 x 500 pixeln wären alle Dateien dann zusammen (1. png Datei 500 x 500 Pixel = 4096 Bytes)
~ 68 Gigabyte (4096 x Anzahl Farbtöne) groß.

Praktisch möchte ich jede erdenklich mischbare Farbe als seperates bild haben, die Digital im Zahlenraum möglich ist.
Am besten noch benannt, da die beschriftung von so vielen Dateien ja extrem Mühsam wäre.
Grün würde dann zum Beispiel = 0 128 0 heißen oder in Hex-Code #008000. (als Dateiname)

Also einmal die Komplette Paint Pallette seperat als PNG Datei.
Dort ist die Problematik, das noch drei zusätzliche Attribute Farbtönung Sättigung und Hellichkeit dabei sind, was aber die generelle Anzahl an möglichen Farben nicht erweitert sondern es irgendwie feste zugeordnete Werte sind, sodass auch alle Farben abgebildet werden können. Wobei meiner Empfindung nach weiß und schwarz bei paint in der Farbpalette ganz weiß oben/schwarz unten horizontal verlaufen und sich grundlegend nicht unterscheiden oder doch? und es ist fürs Auge nur nicht erkennbar weil der Unterschied so minimal ist?

Lange rede kurzer Sinn: Ich hab keine Ahnung wie ich einen Code schreibe der SEPERATE 500 x 500 große PNG Dateien erstellt, die einmal alle im digitalen Zahlenraum mögliche Farben darstellt und erstellt.

Wie als würde man ein Schloss knacken wollen aber man möchte das jede Zahlenkombination vorher einmal aufgeschrieben wird (keine doppelt natürlich= ggf bei schwarz und weiß der Fall im Bezug auf die Paint Palette) und dann einmal Seperat als PNG Datei hat. Also jeder mögliche Code soll ein Bild haben und auch angezeigt werden.

Hoffe das ist verständlich und danke an jeden der noch Hilft und ernst nimmt !

Prob auch an @S.Kara , echt ne starke Leistung

 

[floq0r]

Eine Grundsatzfrage: Warum möchtest du Informationen abspeichern, die sich offensichtlich programmatisch mit minimaler Speichernutzung erstellen lassen?

 

[world of color]

Eine Grundsatzfrage: Warum möchtest du Informationen abspeichern, die sich offensichtlich programmatisch mit minimaler Speichernutzung erstellen lassen?

Es ist eine Digitale Kunstidee und eventuell ein Stück Herrausforderrung auch wenn dies simpel erscheint.

 

[Piktogramm]

Lange rede kurzer Sinn: Ich hab keine Ahnung wie ich einen Code schreibe der SEPERATE 500 x 500 große PNG Dateien erstellt, die einmal alle im digitalen Zahlenraum mögliche Farben darstellt und erstellt.

Solang es digitale Werte sind, sind es keine Farben sondern schlicht und ergreifend Werte. Farbig wird das Ganze erst, wenn diesen Werten Farben zugeordnet werden! Was du dir dringend fürs eigene Verständnis und Kommunikations durchlesen solltest ist der Wikipediaartikel zu Farbräumen:
https://de.wikipedia.org/wiki/Farbraum
Samt der Empfehlung den enthaltenen Querverweisen zu folgen und auch diese verstehend zu lesen.

An der Stelle geh es auch noch fröhlich weiter, das was ein Computer an Farbkoordinaten in einem Farbraum berechnet und das was Ausgabegeräte wie Bildschirme und Drucker darauf machen ist nochmals eine ganz andere Geschichte.

Zu dem hier:

Wobei meiner Empfindung nach weiß und schwarz bei paint in der Farbpalette ganz weiß oben/schwarz unten horizontal verlaufen und sich grundlegend nicht unterscheiden oder doch?

RGB bedeutet, dass Farben in drei Dimensionen angesteuert werden. Die aller meisten Programme werden dir Farbpaletten jedoch nicht in diesen drei Dimensionen sondern als 2 dimensionale Abbildung dieser 3 Dimensionen anzeigen. Bei dieser Transformation von 3 zu 2 Dimensionen kommt es zu eben solchen Erscheinungen, dass Farben mehrfach angezeigt werden. Meist halt Schwarz und Weiß.

 

[S.Kara]

Es ist eine Digitale Kunstidee und eventuell ein Stück Herrausforderrung auch wenn dies simpel erscheint.

Ich kann mir nicht so recht vorstellen was du genau vor hast, aber bedenke dass du da in Richtung 16,7 Mio Dateien steuerst.

Bei sehr geringer Unterscheidung der RGB-Werte kann man normal kaum ein Unterschied festellen, es sei denn die Bilder/Farben werden direkt nebeneinander betrachtet. Im Anhang daher mal deine gewünschten Dateien in 4er Schritten. Dadurch sind es nur 1/64-tel an Dateien/Größe.

Wichtig: Nach dem Download musst du das .rar am Ende entfernen, die Datei heißt eigentlich "data.tar.xz", aber das Forum erlaubt kein Upload von xz-Dateien und rar hat das Teil nicht unter 50 MB bekommen.
Entpackt sind es 262.144 Dateien (ca halber GB).

Hier der python-Code falls du dir doch alle erzeugen möchtest:

Spoiler: Code

from PIL import Image, ImageDraw
import asyncio

w, h = 500, 500
shape = [(0, 0), (w, h)]

def background(f):
    def wrapped(*args, **kwargs):
        return asyncio.get_event_loop().run_in_executor(None, f, *args, **kwargs)

    return wrapped

@background
def work(r):
    img = Image.new("RGB", (w, h))
    img1 = ImageDraw.Draw(img)
    for g in range(0,256,4):
        for b in range(0,256,4):
            img1.rectangle(shape, fill=(r,g,b))
            img.save("data/" + str(r).zfill(3) + "_" + str(g).zfill(3) + "_" + str(b).zfill(3) + ".png", "PNG")


for r in range(0,256,4):
    work(r)

Des Weiteren stimme ich @Piktogramm zu. Was auch immer du da vor hast, besser etwas einlesen.

 

[testuser32123]

Es ist eine Digitale Kunstidee und eventuell ein Stück Herrausforderrung auch wenn dies simpel erscheint.

Etwas zu Simplifizieren ist - wenn gut gemacht - oft eine ganz besondere Kunst...

Hier noch eine schöne Umsetzung der Visualisierung von Farbkombinationsmöglichkeiten:
https://www.gerhard-richter.com/de/art/paintings/abstracts/colour-charts-12