Valore RGB al convertitore HSL

Question

Google Maps API V3 consente di applicare "stili" sulla mappa, incluso l'impostazione del colore di varie funzionalità. Tuttavia, il formato colore che utilizza è HSL (o quello che sembra):

• Hue (una stringa esagonale RGB)
• Lightness (un valore di punto galleggiante tra -100 e 100)
• saturazione (un valore di punto galleggiante tra -100 e 100)

(dal Documenti)

Sono riuscito a trovare RGB in convertitori HSL online, ma non sono sicuro di come specificare i valori convertiti in un modo che Google Maps accetterà. Ad esempio, un tipico valore HSL dato da un convertitore sarebbe: 209° 72% 49%

In che modo quel valore HSL mappa sui parametri che ho specificato dall'API di Google Maps? cioè come fa una mappa di un valore del grado di tonalità su una stringa esadecimale RGB e come fa una mappa percentuale a un valore di punto galleggiante compreso tra -100 e 100?

Sono ancora incerto su come fare la conversione. Devo, dato un valore RGB, convertirlo rapidamente in ciò che Google Maps si aspetta in modo che il colore sia identico ...

Answer 1

Poiché l'argomento Hue si aspetta RGB, puoi usare il colore originale come tonalità.

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

Esempio:

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

---

Risultato:

Di seguito è riportato uno screenshot che mostra il corpo impostato su un colore di sfondo RGB (#2800E2 in questo caso) e una mappa di Google con geometria stradale in stile, usando i valori calcolati come sopra ('0x2800e2', 100, -11).

È abbastanza chiaro che Google utilizza il tuo stile per creare circa sei colori diversi incentrati sul colore dato, con i contorni più vicini all'input. Credo che questo sia il più vicino possibile.

---

Dalla sperimentazione con: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Per l'acqua, GMAPS sottrae una gamma di .5. Per ottenere il colore esatto che desideri, usa i calcoli sopra e aggiungi quel .5 gamma di retro.

piace:

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

Answer 2

Abbiamo codificato uno strumento che vuoi esattamente tu voglia. Ci vogliono valori RGB esadecimali e genera il codice HSL necessario. Viene fornito con un'output del codice API V3 Anteprima e Google Map JavaScript. Divertirsi; d

http://googlemapscolorizr.stadtwerk.org/

Answer 3

Dalla pagina collegata:

Nota: mentre Hue prende un valore di colore esadecimale HTML, utilizza solo questo valore per determinare il colore di base (il suo orientamento attorno alla ruota del colore), non la sua saturazione o leggerezza, che sono indicate separatamente come variazioni percentuali. Ad esempio, la tonalità per il verde puro può essere definita come "#00ff00" o "#000100" all'interno della proprietà Hue ed entrambe le tonalità saranno identiche. (Entrambi i valori indicano il verde puro nel modello di colore HSL.) Valori Hue RGB che consistono in parti uguali rosse, verde e blu - come "#000000" (nero) e "#ffffff" (bianco) e tutte le tonalità pure di grigio: non indicano una tonalità, poiché nessuno di questi valori indica un orientamento nello spazio delle coordinate HSL. Per indicare il nero, il bianco o il grigio, è necessario rimuovere tutta la saturazione (impostare invece il valore su -100) e regolare la leggerezza.

Almeno mentre lo leggo, ciò significa che devi convertire l'angolazione in base a una ruota a colori. Ad esempio, supponiamo che 0 gradi sia rosso puro, 120 gradi è blu puro e 240 gradi è verde puro. Prenderesti quindi l'angolazione, capiresti in quale due primarie rientrano e interpoleresti per determinare la quantità di ciascuna primaria da usare. In teoria, probabilmente dovresti usare un'interpolazione quadratica, ma è probabile che tu possa ottenere ragionevolmente bene con lineare.

Usando quello, 90 gradi (ad esempio) sono 90/120 = 3/4^ths Di mezzo dal rosso al blu, quindi il tuo numero esadecimale per la tonalità sarebbe 0x00010003 - o qualsiasi altro numero che avesse il verde impostato su 0 e un rapporto 1: 3 tra rosso e blu.

Answer 4

Avevo bisogno di abbinare esattamente i colori. Quindi ho usato lo strumento che @stadt.werk offre (http://googlemapscolorizr.stadtwerk.org/) per avvicinarsi.

Ma poi ho riscontrato il problema spiegato da @Bukzor in cui l'API di Google Maps crea variazioni sulla tua ombra, nessuna delle quali sembra essere esattamente ciò che ho specificato.

Così ho tirato su la mappa in un browser, ho preso uno screenshot solo l'area con le due tonalità che non erano abbastanza abbinate, l'ho aperta in un editor di immagini (Pixlr.com, nel mio caso), ho usato il Color-Sucker Strumento per ottenere la saturazione e la leggerezza per l'ombra, ha regolato la mia saturazione e/o leggerezza nella chiamata API di Google da 1 e ripetuto fino a quando non ho avuto qualcosa che sembra corrispondere perfettamente.

È possibile, ovviamente, che l'API di Google Maps farà cose diverse con i colori su diversi dispositivi/browser/ecc., Ma finora, così bene.

Noioso, sì, ma funziona.