Valor RGB para el convertidor HSL

Question

Google maps api v3 permite aplicar "estilos" al mapa, incluido el ajuste del color de varias funciones. Sin embargo, el formato de color que utiliza es HSL (o lo que parece que):

• tonalidad (una cadena hexadecimal RGB)
• ligereza (un valor de punto flotante entre -100 y 100)
• saturación (un valor de punto flotante entre -100 y 100)

(desde el docs)

he conseguido encontrar RGB a HSL convertidores en línea, pero estoy seguro de cómo especificar los valores convertidos de una manera que Google Maps aceptará. Por ejemplo, un valor de HSL típico dado por un convertidor sería: 209° 72% 49%

¿Cómo se correlaciona ese valor de HSL con los parámetros que especifiqué de la API de Google Maps? es decir, ¿cómo se correlaciona un valor de grado de matiz con una cadena hexadecimal RGB y cómo se correlaciona un porcentaje con un valor de coma flotante entre -100 y 100?

Todavía no sé cómo hacer la conversión. Necesito, dado un valor RGB, convertir rápidamente a lo que los mapas de Google espera para que el color será idéntico ...

Answer 1

Dado que el argumento hue espera RGB, puede usar el color original como matiz.

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

Ejemplo:

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

---

Resultado:

A continuación se muestra una captura de pantalla que muestra el cuerpo se establece en un color de fondo rgb (# 2800E2 en este caso) , y un mapa de Google con una geometría de carretera con estilo, utilizando los valores calculados como se indica anteriormente ('0x2800E2', 100, -11).

Está bastante claro que Google utiliza su estilo para crear alrededor de seis colores diferentes centrados en el color dado, con los contornos más cercanos a la entrada. Creo que esto es lo más cercano posible.

---

de la experimentación con: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Para el agua, gmaps resta una gamma de 0,5. Para obtener el color exacto que desea, use los cálculos anteriores y agregue ese .5 gamma de vuelta.

como:

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

Answer 2

Desde la página enlazada:

Nota: mientras se toma una tonalidad hexadecimal HTML color value, solo usa este valor para determinar el color básico (su orientación alrededor de la rueda de color), no su saturación o luminosidad, que se indican por separado como cambios porcentuales. Por ejemplo, el matiz para verde puro se puede definir como "# 00ff00" o "# 000100" dentro de la propiedad de matiz y ambos matices serán idénticos. (Ambos valores apuntan al verde puro en el modelo de color HSL.) Los valores de tono RGB que constan de partes iguales Rojo, Verde y Azul, como "# 000000" (negro) y "#FFFFFF" (blanco) y todos los tonos puros de gris: no indique un matiz en absoluto, ya que ninguno de esos valores indica una orientación en el espacio de coordenadas HSL. Para indicar negro, blanco o gris, debe eliminar toda la saturación (establecer el valor en -100) y ajustar la claridad en su lugar.

Al menos mientras lo leo, eso significa que necesita convertir su ángulo basado en una rueda de color. Por ejemplo, supongamos que 0 grados es rojo puro, 120 grados es azul puro y 240 grados es verde puro. A continuación, toma tu ángulo, calcula en qué dos primarias se encuentra e interpola para determinar qué cantidad de cada elemento primario usar. En teoría, probablemente debas usar una interpolación cuadrática, pero es probable que puedas pasar razonablemente bien con lineal.

usando que, a 90 grados (por ejemplo) es 90/120 = 3/4 ^THS de la forma de rojo a azul, por lo que su número hexadecimal para el color sería 0x00010003 - o cualquier otro número que tenía verde establecido en 0 y una relación de 1: 3 entre rojo y azul.

Answer 3

codificamos una herramienta que hace exactamente lo que desea. Toma valores RGB hexadecimales y genera el código HSL necesario. Viene con una vista previa y salida de código V3 de la API de JavaScript de Google Map. Disfrutar; D

http://googlemapscolorizr.stadtwerk.org/

Answer 4

que necesitaba para que coincida con los colores exactamente. Así que utilicé la herramienta que @ stadt.werk ofrece (http://googlemapscolorizr.stadtwerk.org/) para acercarse.

Pero luego me encontré con el problema explicado por @bukzor donde el API de Google Maps crea variaciones en su pantalla, ninguna de las cuales parece ser exactamente lo que especifiqué.

Así que detuve el mapa en un navegador, tomé una captura de pantalla del área con las dos sombras que no coincidían, la abrí en un editor de imágenes (pixlr.com, en mi caso), utilicé la herramienta de succión de color para obtener la saturación y la luminosidad de la sombra, ajustó mi saturación y/o luminosidad en la llamada API de Google por 1, y repitió hasta que obtuve algo que parece coincidir perfectamente.

Es posible, por supuesto, que Google Maps API haga cosas diferentes con los colores en diferentes dispositivos/navegadores/etc., pero hasta ahora, todo bien.

Tedioso, sí, pero funciona.