RGB -Wert zum HSL -Konverter

Question

Mit Google Maps API V3 können "Stile" auf die Karte angewendet werden, einschließlich der Festlegung der Farbe verschiedener Funktionen. Das von es verwendete Farbformat ist jedoch HSL (oder was es scheint):

• Farbton (eine RGB -Hex -Zeichenfolge)
• Leichtigkeit (ein schwimmender Punktwert zwischen -100 und 100)
• Sättigung (ein schwimmender Punktwert zwischen -100 und 100)

(von dem Dokumente)

Ich habe es geschafft, RGB für HSL -Konverter online zu finden, aber ich bin mir nicht sicher, wie die konvertierten Werte so angeben, dass Google Maps akzeptiert wird. Beispielsweise wäre ein typischer HSL -Wert, der von einem Konverter angegeben ist,: 209° 72% 49%

Wie kann dieser HSL -Wert zu den Parametern, die ich aus der Google Maps -API angegeben habe, zugeordnet? dh Wie kann ein Hue -Grad -Wert zu einer RGB -Hex -Zeichenfolge und wie eine prozentuale Karte zu einem schwimmenden Punktwert zwischen -100 und 100 Karte geordnet?

Ich bin mir immer noch sicher, wie man die Konvertierung durchführt. Ich muss angesichts eines RGB -Werts ihn schnell in das umwandeln, was Google Maps erwartet, damit die Farbe identisch ist ...

Answer 1

Da das Hue -Argument RGB erwartet, können Sie die ursprüngliche Farbe als Farbton verwenden.

rgb2hsl.py:

#!/usr/bin/env python

def rgb2hsl(r, g, b):
    #Hue: the RGB string
    H = (r<<16) + (g<<8) + b
    H = "0x%06X" % H

    #convert to [0 - 1] range
    r = float(r) / 0xFF
    g = float(g) / 0xFF
    b = float(b) / 0xFF

    #http://en.wikipedia.org/wiki/HSL_and_HSV#Lightness
    M = max(r,g,b)
    m = min(r,g,b)
    C = M - m

    #Lightness
    L = (M + m) / 2

    #Saturation (HSL)
    if L == 0:
        S = 0
    elif L <= .5:
        S = C/(2*L)
    else:
        S = C/(2 - 2*L)

    #gmaps wants values from -100 to 100
    S = int(round(S * 200 - 100))
    L = int(round(L * 200 - 100))

    return (H, S, L)


def main(r, g, b):
    r = int(r, base=16)
    g = int(g, base=16)
    b = int(b, base=16)
    print rgb2hsl(r,g,b)

if __name__ == '__main__':
    from sys import argv
    main(*argv[1:])

Beispiel:

$ ./rgb2hsl.py F0 FF FF
('0xF0FFFF', 100, 94)

---

Ergebnis:

Im Folgenden finden Sie einen Screenshot, der den Körper zeigt, der auf eine RGB -Hintergrundfarbe (in diesem Fall#2800E2) eingestellt ist, und eine Google -Karte mit gestalteter Road -Geometrie unter Verwendung der wie oben berechneten Werte ('0x2800e2', 100, -11).

Es ist ziemlich klar, dass Google Ihr Styling verwendet, um ungefähr sechs verschiedene Farben auf der angegebenen Farbe zu erstellen, wobei die Umrisse der Eingabe am nächsten sind. Ich glaube, das ist so nah wie es nur geht.

---

Aus Experimentieren mit: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Für Wasser subtrahiert GMAPs eine Gamma von .5. Verwenden Sie die oben genannten Berechnungen, um die genaue Farbe zu erhalten, und fügen Sie diesen Gamma zurück.

wie:

{
  featureType: "water",
  elementType: "geometry",
  stylers: [
    { hue: "#2800e2" },
    { saturation: 100 },
    { lightness: -11 },
    { gamma: 0.5 },
  ]
}

Answer 2

Wir haben ein Tool codiert, das genau Sie möchten. Es benötigt Hexadezimal -RGB -Werte und generiert den benötigten HSL -Code. Es wird mit einer Vorschau und einer Google Map JavaScript API V3 -Codeausgabe geliefert. Genießen; d

http://googlemapscolorizr.stadtwerk.org/

Answer 3

Aus der verknüpften Seite:

HINWEIS: Während Hue einen HTML -Hex -Farbwert nimmt, verwendet er diesen Wert nur, um die Grundfarbe (seine Ausrichtung um das Farbrad) zu bestimmen, nicht die Sättigung oder Leichtigkeit, die separat als prozentuale Änderungen angezeigt werden. Beispielsweise kann der Farbton für reines Grün als "#00ff00" oder "#000100" in der Hue -Eigenschaft definiert werden, und beide Farbtöne sind identisch. (Beide Werte weisen im HSL -Farbmodell auf reines Grün hin.) RGB -Farbtonwerte, die aus rot, grün und blau gleichen Teilen bestehen - wie "#000000" (schwarz) und "#ffffffffffffffffffs) und alle reinen Farbtöne Grau - geben Sie keinen Farbton an, da keiner dieser Werte eine Ausrichtung im HSL -Koordinatenraum anzeigt. Um Schwarz, Weiß oder Grau anzuzeigen, müssen Sie die gesamte Sättigung (den Wert auf -100 einstellen) und stattdessen die Leichtigkeit einstellen.

Zumindest wie ich es gelesen habe, bedeutet dies, dass Sie Ihren Winkel basierend auf einem Farbrad konvertieren müssen. Nehmen wir beispielsweise an, dass 0 Grad rein rot ist, 120 Grad rein blau und 240 Grad rein grün. Sie würden dann Ihren Winkel nehmen, herausfinden, welche zwei Vorwahlen sie fallen, und interpolieren, um festzustellen, wie viel von jedem Primär verwendet werden soll. Theoretisch sollten Sie wahrscheinlich eine quadratische Interpolation verwenden - aber es besteht die Möglichkeit, dass Sie mit linear einigermaßen gut auskommen können.

Mit diesem sind 90 Grad (zum Beispiel) 90/120 = 3/4^ths Der Weg von rot nach blau, also wäre Ihre Hex -Nummer für den Farbton 0x00010003 - oder eine andere Zahl, die grün auf 0 gesetzt war, und ein Verhältnis von 1: 3 zwischen Rot und Blau.

Answer 4

Ich musste genau die Farben entsprechen. Also habe ich das Tool verwendet, das @stadt.werk (http://googlemapscolorizr.stadtwerk.org/) anbietet, um mich näher zu bringen.

Aber dann bin ich auf das von @bukozuzor erklärte Problem gestoßen, in dem die Google Maps -API Variationen in Ihrem Schatten erstellt, von denen keines genau das zu sein scheint, was ich angegeben habe.

Also habe ich die Karte in einem Browser hochgezogen und einen Screenshot aus dem Gebiet mit den beiden Farbtönen gemacht, die nicht ganz übereinstimmten, sie in einem Image-Editor (pixlr.com in meinem Fall) geöffnet haben, verwendete den Farbschucker Werkzeug, um die Sättigung und Leichtigkeit für den Schatten zu erhalten, meine Sättigung und/oder Leichtigkeit im Google -API -Anruf um 1 anzupassen und wiederholte, bis ich etwas bekam, das perfekt zu passen scheint.

Es ist natürlich möglich, dass die Google Maps -API mit den Farben auf verschiedenen Geräten/Browsern/usw. unterschiedliche Dinge tut, aber so weit, so gut.

Langweilig, ja, aber es funktioniert.