Valor RGB al convertidor HSL

Question

Google Maps API V3 permite aplicar "estilos" al mapa, incluida la configuración del color de varias características. Sin embargo, el formato de color que usa es HSL (o lo que parece):

• Hue (una cadena hexadecimal RGB)
• Ligera (un valor de punto flotante entre -100 y 100)
• Saturación (un valor de punto flotante entre -100 y 100)

(desde el documentos)

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

¿Cómo se mapea ese valor de HSL a los parámetros que especifiqué de la API de Google Maps? es decir, ¿cómo se asigna un valor de grado de tono a una cadena HEX RGB y cómo se asigna un porcentaje de valor de un punto flotante entre -100 y 100?

Todavía no estoy seguro de cómo hacer la conversión. Necesito, dado un valor RGB, convertirlo rápidamente en lo que Google Maps espera para que el color sea idéntico ...

Answer 1

Dado que el argumento del tono espera RGB, puede usar el color original como tono.

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 establecido en un color de fondo RGB (#2800E2 en este caso) y un mapa de Google con geometría de carretera con estilo, utilizando los valores calculados como anteriormente ('0x2800e2', 100, -11).

Está bastante claro que Google usa 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 cerca 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 .5. Para obtener el color exacto que desee, use los cálculos anteriores y agregue ese .5 gamma hacia atrás.

me gusta:

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

Answer 2

Codificamos una herramienta que exactamente quiere que desee. Se necesitan valores Hexadecimal RGB y genera el código HSL necesario. Viene con una vista previa y la salida del código API V3 de Google Map JavaScript. Disfruta; D

http://googlemapscolorizr.stadtwerk.org/

Answer 3

Desde la página vinculada:

Nota: Si bien Hue toma un valor de color hexadecimal HTML, solo usa este valor para determinar el color básico (su orientación alrededor de la rueda de color), no su saturación o ligereza, que se indican por separado como cambios porcentuales. Por ejemplo, el tono para el verde puro puede definirse como "#00FF00" o "#000100" dentro de la propiedad del tono y ambos tonos serán idénticos. (Ambos valores apuntan al verde puro en el modelo de color HSL). Valores de tono RGB que consisten en partes iguales rojas, verdes y azules, como "#000000" (negro) y "#ffffff" (blanco) y todos los tonos puros de gris: no indique un tono en absoluto, ya que ninguno de esos valores indica una orientación en el espacio de coordenadas de HSL. Para indicar negro, blanco o gris, debe eliminar toda la saturación (establezca el valor en -100) y ajuste la ligereza.

Al menos como lo leo, eso significa que debe convertir su ángulo en función de una rueda de colores. Por ejemplo, supongamos que 0 grados son de rojo puro, 120 grados es azul puro y 240 grados es verde puro. Luego tomaría su ángulo, averiguaría en qué dos primarias caen e interpolar para determinar cuánto de cada primario usar. En teoría, probablemente debería usar una interpolación cuadrática, pero es probable que pueda obtener razonablemente bien con lineal.

Usando eso, 90 grados (por ejemplo) es 90/120 = 3/4^ths del camino de rojo a azul, por lo que su número hexadecimal para el tono sería 0x00010003, o cualquier otro número que tuviera verde establecido en 0, y una relación 1: 3 entre rojo y azul.

Answer 4

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

Pero luego me encontré con el problema explicado por @Bukzor, donde la API de Google Maps crea variaciones a tu sombra, ninguno de los cuales parece ser exactamente lo que especificé.

Así que detuve el mapa en un navegador, tomé una captura de pantalla de solo el área con los dos tonos que no coincidían del todo, lo abrí en un editor de imágenes (Pixlr.com, en mi caso), usó el chiflador de color Herramienta para obtener la saturación y la ligereza para la sombra, ajustó mi saturación y/o ligereza en la llamada de la API de Google en 1, y repití hasta que obtuve algo que parece coincidir perfectamente.

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

Tedioso, sí, pero funciona.