Wartość RGB dla konwertera HSL

Question

Google maps api v3 umożliwia stosowanie "stylów" do mapy, w tym ustawianie koloru różnych funkcji. Jednak format koloru używa się HSL (lub, co wydaje się podoba):

• odcień (an hex ciąg RGB)
• lekkość (a wartością zmiennoprzecinkową pomiędzy -100 i 100)
• nasycenia (pływający wartość punktowa pomiędzy -100 i 100)

(od docs)

udało mi się znaleźć RGB do HSL konwerterów online, ale jestem pewien, w jaki sposób określić wartości przekonwertowane w sposób, który akceptują mapy google. Na przykład typowa wartość HSL podana przez konwerter będzie wynosić: 209° 72% 49%

Jak ta wartość HSL jest zgodna z parametrami podanymi w apeksie google maps? tj. w jaki sposób wartość stopnia odcienia odwzorowuje łańcuch szesnastkowy RGB i jak przedstawia mapę procentową do wartości zmiennoprzecinkowej między -100 a 100?

Wciąż nie jestem pewien, jak przeprowadzić konwersję. Muszę, biorąc pod uwagę wartość RGB, szybko przekonwertować go na co Google Maps oczekuje więc, że kolor będzie identyczny ...

Answer 1

Ponieważ argument koloru oczekuje na RGB, możesz użyć oryginalnego koloru jako odcienia.

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:]) 

Przykład:

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

---

Wynik:

Poniżej znajduje się zrzut ekranu przedstawiający ciało ustawiony na RGB tła (# 2800E2 w tym przypadku) oraz mapę z google stylizowany geometrii dróg, korzystając z wartości obliczonych jak powyżej („0x2800E2”, 100, -11).

Jest całkiem jasne, że Google wykorzystuje swoją stylizację stworzyć około sześciu różnych kolorach skupionych na danym kolorze, a kontury są najbliżej wejścia. Uważam, że jest to tak blisko, jak to tylko możliwe.

---

Z doświadczeń z: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

wody, GMaps odejmuje gamma .5. Aby uzyskać dokładnie taki kolor, jaki chcesz, użyj powyższych obliczeń i dodaj, że .5 gamma z powrotem.

jak:

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

Answer 2

Od połączonego stronie:

Uwaga: podczas gdy barwa bierze hex HTML wartość koloru, wykorzystuje tylko tę wartość do określenia podstawowego koloru (jego orientacji wokół koła kolorów), a nie jego nasycenia lub jasności, które są wskazane osobno jako zmiany procentowe. Na przykład kolor czystego zielonego można zdefiniować jako "# 00ff00" lub "# 000100" we właściwości barwy i oba odcienie będą identyczne. (Obie wartości wskazują na zielony kolor w modelu kolorów HSL.) Wartości barwy RGB, które składają się z równych części Czerwony, Zielony i Niebieski - takich jak "# 000000" (czarny) i "#FFFFFF" (biały) i wszystkie czyste odcienie koloru szarego - nie wskazują żadnego odcienia, ponieważ żadna z tych wartości nie wskazuje orientacji w przestrzeni współrzędnych HSL. Aby wskazać kolor czarny, biały lub szary, należy usunąć całe nasycenie (ustaw wartość na -100) i dostosować jasność.

Przynajmniej tak, jak go przeczytałem, oznacza to, że musisz zmienić kąt w oparciu o koło kolorów. Na przykład załóżmy, że 0 stopni to czysta czerwień, 120 stopni to czysty niebieski, a 240 stopni to zielony. Następnie należy wziąć pod uwagę, dowiedzieć się, które dwa prymitywne są pomiędzy, i interpolować, aby określić, ile każdego podstawowego użyć. Teoretycznie powinieneś prawdopodobnie użyć interpolacji kwadratowej - ale są szanse, że uda ci się uzyskać w miarę dobrze liniowo.

Korzystanie że 90 stopni (na przykład) jest 90/120 = 3/4 ^tys uboczu od czerwonego do niebieskiego, więc liczba hex do odcienia byłoby 0x00010003 - lub dowolny inny numer, który miał zielony ustawiony na 0 i stosunek 1: 3 między czerwonym i niebieskim.

Answer 3

Mamy zakodowane narzędzie, które dokładnie chce chcesz. Pobiera szesnastkowe wartości RGB i generuje potrzebny kod HSL. Zawiera podgląd i kod JavaScript V3 w API JavaScript. Enjoy; D

http://googlemapscolorizr.stadtwerk.org/

Answer 4

Musiałam dokładnie dopasować kolory. Więc użyłem narzędzia, które @ stadt.werk oferty (http://googlemapscolorizr.stadtwerk.org/) zbliżyć.

Ale wtedy natknąłem się na problem wyjaśniony przez @bukzor, gdzie Google Maps API tworzy wariacje na cieniu, z których żaden nie wydaje się być dokładnie tym, co podałem.

Tak więc podciągnąłem mapę w przeglądarce, zrobiłem zrzut ekranu z obszaru z dwoma odcieniami, które nie pasowały do ​​siebie, otworzyłem je w edytorze zdjęć (pixlr.com, w moim przypadku), narzędzie koloru-przyssawki, aby uzyskać nasycenie i jasność dla cienia, dostosować nasycenie i/lub jasność w wywołaniu interfejsu Google API o 1, i powtarzać, aż otrzymałem coś, co idealnie pasuje.

Jest możliwe, że Google Maps API będzie robić różne rzeczy z kolorami na różnych urządzeniach/przeglądarkach/itp., Ale do tej pory, tak dobrze.

Tedious, tak, ale to działa.