RGB-Wert für HSL-Konverter

Question

Google Maps Mit api v3 können "Stile" auf die Karte angewendet werden, einschließlich der Einstellung der Farbe verschiedener Funktionen. Jedoch verwendet das Farbformat ist es HSL (oder was scheint, wie es):

• Farbton (eine RGB hex string)
• Helligkeit (ein Gleitkommawert zwischen -100 und 100)
• Sättigung (ein Gleitkommawert zwischen -100 und 100)

(vom docs)

ich es geschafft, RGB zu HSL-Wandler online zu finden, aber ich bin nicht sicher, wie die gewandelten Werte angeben in einer Weise, die Google Maps akzeptiert. Zum Beispiel wäre ein typischer HSL-Wert, der durch einen Konverter gegeben ist: 209° 72% 49%

Wie wird dieser HSL-Wert den Parametern zugeordnet, die ich von Google Maps api angegeben habe? h. wie wird ein Farbtongradwert einer RGB-Hex-Zeichenkette zugeordnet und wie wird ein Prozentwert auf einen Gleitkommawert zwischen -100 und 100?

Ich bin immer noch unsicher, wie man die Umwandlung macht. Ich muß, da ein RGB-Wert, es schnell konvertieren, was Google Maps erwartet, so dass die Farbe identisch sein wird ...

Answer 1

Da das hue-Argument RGB erwartet, können Sie die Originalfarbe 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:

Nachstehend ist ein Screenshot des Körpers auf eine rgb Hintergrundfarbe (# 2800E2 in diesem Fall) gesetzt zeigen , und eine Google-Karte mit gestylter Straßengeometrie unter Verwendung der wie oben berechneten Werte ('0x2800E2', 100, -11).

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

---

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

Für Wasser, subtrahiert gmaps ein Gamma von 0,5. Verwenden Sie die oben genannten Berechnungen, um die gewünschte Farbe zu erhalten, und fügen Sie die Option .5 gamma back hinzu.

wie:

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

Answer 2

Von der gelinkten Seite:

Hinweis: während Farbton nimmt einen HTML-hex Farbwert, es verwendet nur diesen Wert, um die Grundfarbe (ihre Ausrichtung um das Farbrad) zu bestimmen, nicht ihre Sättigung oder Helligkeit, die getrennt als prozentuale Änderungen angezeigt werden. Zum Beispiel kann der Farbton für reines Grün als "# 00ff00" oder "# 000100" innerhalb der hue-Eigenschaft definiert werden und beide Farbtöne sind identisch. (Beide Werte zeigen im HSL-Farbmodell auf reines Grün.) RGB-Farbtonwerte, die aus gleichen Teilen Rot, Grün und Blau bestehen - wie "# 000000" (schwarz) und "#FFFFFF" (weiß) und alle reinen Farbtöne Grau - Geben Sie keinen Farbton an, da keiner dieser Werte eine Orientierung im HSL-Koordinatenraum anzeigt. Um Schwarz, Weiß oder Grau anzuzeigen, müssen Sie die gesamte Sättigung entfernen (stellen Sie den Wert auf -100 ein) und stattdessen die Helligkeit anpassen.

Zumindest, wie ich es gelesen habe, bedeutet das, dass Sie Ihren Winkel basierend auf einem Farbrad konvertieren müssen. Nehmen wir zum Beispiel an, dass 0 Grad rein rot ist, 120 Grad rein blau und 240 Grad rein grün sind. Sie würden dann Ihren Winkel nehmen, herauszufinden, welche zwei Primärfarben dazwischen liegen, und interpolieren, um zu bestimmen, wie viel von jedem Primärwert verwendet wird. In der Theorie sollten Sie wahrscheinlich eine quadratische Interpolation verwenden - aber die Chancen stehen gut, dass Sie mit linear ziemlich gut zurechtkommen.

verwenden, die um 90 Grad (zum Beispiel) sind 90/120 = 3/4 ^ths der Weg von Rot zu Blau, so dass Ihre Hex-Zahl für den Farbton wäre 0x00010003 - oder jede andere Zahl, die hatten grün auf 0 gesetzt und ein Verhältnis von 1: 3 zwischen rot und blau.

Answer 3

Wir codiert ein Werkzeug, das genau wollen tut Sie wollen. Es verwendet hexadezimale RGB-Werte und generiert den benötigten HSL-Code. Es kommt mit einer Vorschau und Google Map JavaScript API V3-Code-Ausgabe. Genießen; D

http://googlemapscolorizr.stadtwerk.org/

Answer 4

Ich brauchte Farben genau zu entsprechen. Also habe ich das Tool verwendet, das @ stadt.werk anbietet (http://googlemapscolorizr.stadtwerk.org/), um sich zu nähern.

Aber dann stieß ich auf das Problem von @bukzor erläutert, wo die Google Maps API Variationen auf Ihrem Schatten, von denen keiner genau das, was ich angegeben, zu sein scheint.

Also habe ich die Karte in einem Browser hochgezogen, einen Screenshot gemacht von nur dem Bereich mit den zwei Schattierungen, die nicht ganz übereinstimmten, öffneten sie in einem Bildbearbeitungsprogramm (pixlr.com, in meinem Fall), benutzt das Farb-Sauger-Tool, um die Sättigung und Helligkeit für den Schatten zu erhalten, meine Sättigung und/oder Helligkeit im Google API-Aufruf um 1 anzupassen und zu wiederholen, bis ich etwas gefunden habe, das perfekt zusammenpasst.

Es ist natürlich möglich, dass Google Maps API verschiedene Dinge mit den Farben auf verschiedenen Geräten/Browsern/etc. Tun, aber so weit, so gut.

Mühsam, ja, aber es funktioniert.