Konvertieren einer RGB-Farbe-zu-Dezimal-Wert

Wie konvertiere ich einen RGB-Farbwert, um einfach nur dezimal?

Also ich habe: RGB(255,255,255) weiß

Ihr dezimales äquivalent ist: 16777215

Ich habe versucht zu denken, es könnte nur sein:

var dec = r*g*b; //but this doesn't work

Obwohl das nicht funktioniert.

Wer kennt den Algorithmus/Gleichung zum umwandeln von RGB - (oder rgba -) zu dezimal?

  • 16,777,215 ist die Dezimalzahl hex-version, 0x00FFFFFF, Ihrer RGB(255,255,255).
  • Was planst du zu tun mit diesen Werten? Auf welche software/Funktionen/usw sind, die Sie Ihnen gegeben?
  • Ich habe die Farbwerte aus einer flash-Anwendung, die in dezimal & ich brauche die Anzeige in html/css & konvertieren auch wieder Umgekehrt.
InformationsquelleAutor sazr | 2011-12-12
  1. 15

    RGB-Ganzzahlen werden in der Regel behandelt, als drei unterschiedliche bytes, wo die linke (die höchste Ordnung) byte ist rot, das mittlere byte ist grün und die meisten der rechten (niedrigste Ordnung) byte ist blau. Sie können rufen Sie die Werte der einzelnen bytes so:

    var c = 0xff03c0; //16712640
var components = {
    r: (c & 0xff0000) >> 16, 
    g: (c & 0x00ff00) >> 8, 
    b: (c & 0x0000ff)
};

    Können Sie neu erstellen, eine Farbe aus seiner Komponenten durch die Verschiebung der bytes zurück, in:

    c = (components.r << 16) + (components.g << 8) + (components.b);

    In deinem Fall, ersetzen Sie einfach components.r (etc) mit Ihren tatsächlichen Variablen.

    InformationsquelleAutor Wayne Burkett
  2. 6

    Eine viel bessere Antwort (in Bezug auf Klarheit), ist dies:

    'Convert RGB to LONG:
 LONG = B * 65536 + G * 256 + R

'Convert LONG to RGB:
 B = LONG \ 65536
 G = (LONG - B * 65536) \ 256
 R = LONG - B * 65536 - G * 256

    LANG ist dein long integer (dezimal), die Sie machen wollen.
    Einfach, oder?
    Sicher, bitshift

    • ich denke, dass die bit-shift ist viel klarer.
    • kann nicht so denken, aber ich sehe nicht, wie jede andere Antwort auf diese Frage ist halb so klar wie dieses. Auch ich kann ich verstehen.
    • Das scheint nur leichter zu jemanden, der nicht weiß, bit-manipulation in der gleichen Weise, dass eine schlechte Antwort in Englisch scheint besser zu sein als eine gute Antwort in Französisch für jemanden, der nicht Französisch Lesen. Erfahren Sie, bit-manipulation und lernen Sie die verallgemeinerbare Prinzipien, dass meine Antwort viel klarer im langen Lauf.
    InformationsquelleAutor Sam Brown
  3. 3
    var dec = (b & 0xff) << 16 + (g & 0xff) << 8 + (r & 0xff);

    (Ich denke, das ist die richtige Reihenfolge für die r -, g -, b-Werte)

    Update

    Ich habe gerade überprüft, die für browser-Anwendungen und ich hab die Reihenfolge falsch ist, also die richtige Formel für Browser (Lesen von HTML+CSS+javascript):

    var dec = r << 16 + g << 16 + b;

    Vorausgesetzt, r,g,b-Werte <= 255

    Andere API ' s können erwarten, dass eine andere Reihenfolge für die r -, g -, b-Werte. Ich scheine zu erinnern, zumindest eine, die hat die Reihenfolge Umgekehrt (pro meine ursprüngliche Antwort), aber ich denke, es ist im moment.

    • Sie können auch richtig sein, über die Reihenfolge, in diesem Fall, meine Antwort ist falsch 🙁
    • Die richtige Reihenfolge in Bezug auf was? Für wen? Die Reihenfolge hängt davon ab, wer ist Lesen den Wert.
    • Nein, die richtige Reihenfolge hängt von der API. Ich bin mir nicht sicher über die Win32-API, aber für browser-basierte Anwendungen (was ich davon ausgehen, wird hier angesprochen) ich bin mir ziemlich sicher, dass Blau das high-order-byte (der drei) und Rot ist die low-order byte.
    • zu sein scheinen immer die falschen Farben, sind Sie sicher, das ist die richtige Reihenfolge?
    • Wenn diese Variablen halten Sie einfach die einzelnen Farbkomponenten, dann gibt es eigentlich keinen Punkt an die bit-Masken.
    • Nicht 100%, Nein. Tauschen r und b.
    • Wahr. Die bit-Masken sind für die Sicherheit bei den einzelnen Variablen enthalten Werte > 255 aus irgendeinem Grund. Sie können auch max(r, 255) wenn Sie möchten clip die Wert eher als Maske (die möglicherweise besser geeignet für einige Anwendungen).
    • Richtig, denn wenn Sie Werte enthalten, die größer als 255, dann wird die Maske zu gehen, um Effekte zu erstellen, die waren fast sicher un-erwartet/wollte. Es sollte wohl einfach nur behandelt werden wie ein Fehler in diesem Fall.
    • James - NÖ. Deine Antwort ist korrekt. Siehe mein update.

    InformationsquelleAutor Andrew Cooper
  4. 1
    if (color.substr(0, 1) === '#') {
    return color;
}
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var rgb = blue | (green << 8) | (red << 16);
return rgb.toString(10);
    • rgb.toString(10) ist, was benötigt wird
    InformationsquelleAutor sharon_antony
  5. 0

    Müssen Sie Links-Verschiebung der R 16, der G Links durch 8 und oder sowohl in der B. Sehen Sie sich die Werte als bits und wird alles klar:

    R 255 = 11111111B
    G 255 = 11111111B
    B 255 = 11111111B

    Shift-R 16: 111111110000000000000000
    Shift G 8: 000000001111111100000000

    oder in B: 111111111111111111111111

    Konvertieren Sie Sie in Dezimalformat: 16777215

    InformationsquelleAutor Martin James
  6. 0

    Ich bin damit einverstanden, dass bitshift ist klarer und wahrscheinlich eine bessere Leistung.

    Sagte, dass, wenn Sie möchten, eine math Antwort durch Sprache unterstützen (wie dies zu tun in einer Tabellenkalkulation) Modul % und trunc() oder floor () " machen Sie es sich einfach:

    Vorausgesetzt 8-bit-Werte für rot, grün und blau natürlich (0-255):

    var rgbTotal = red * 65536 + green * 256 + blue;

var R = Math.trunc( rgbTotal / 65536 );
var G = Math.trunc( ( rgbTotal % 65536 ) / 256 );
var B = rgbTotal % 256;

    Diskussion:
    Zeigt auf sam ' s Antwort, die RGB-Werte sind fast immer big-endian-im Sinne von Ordnung, sicherlich auf Webseiten, jpeg und png. Ich persönlich denke, es ist am besten zu multiplizieren rot mit 65536 statt blau, es sei denn, Sie arbeiten mit einer Bibliothek, die es erfordert, anders.

    Zurückzukehren, um die Werte zu trennen:

    • Für R, nur Division durch 65536 abschneiden und den Rest.
    • Für G, verwerfen wir R via mod 65536 dann geteilt durch 256, abgeschnitten den Rest (Rest ist blau).
    • Für B nehmen wir mod 256, die über die zwei
      höheren bytes.

    Für R & G die Zahl abgeschnitten werden müssen, verwerfen Sie den Rest, sprachspezifisch, hauptsächlich wir wollen die ganze Zahl ist. In javascript Math.trunc() ist der einfache Weg, und Math.floor() auch funktioniert. Es ist nicht nötig für B wie IST der Rest aus dem Modul — aber dies setzt auch Voraus, dass wir nicht brauchen, error checking, wie von Benutzereingaben, d.h. der Wert für B ist immer eine ganze Zahl zwischen 0 und 255.

    InformationsquelleAutor Myndex
Schreibe einen Kommentar