android - rgb color

Valor RGB a convertidor HSL

Question

Google maps api v3 permite aplicar "estilos" al mapa, incluida la configuración del color de diversas funciones. Sin embargo, el formato de color que utiliza es HSL (o lo que parece):

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

(de los documentos )

Logré encontrar convertidores de RGB a HSL en línea, pero no estoy seguro de cómo especificar los valores convertidos de una manera que aceptará Google Maps. 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é en 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 estoy seguro de cómo hacer la conversión. Necesito, dado un valor RGB, convertirlo rápidamente a lo que google maps espera para que el color sea idéntico ...

Answer 1

Codificamos una herramienta que exactamente quiere que usted quiera. 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. Disfruta; D

http://googlemapscolorizr.stadtwerk.org/

Answer 2

Como 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 configurado en color de fondo rgb (# 2800E2 en este caso) y un mapa de google con geometría de camino con estilo, utilizando los valores calculados anteriormente (''0x2800E2'', 100, -11).

Está bastante claro que google usa tu 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 .5. Para obtener el color exacto que desea, use los cálculos anteriores y agregue ese .5 gamma de vuelta.

me gusta:

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

Answer 3

Desde la página enlazada:

Nota: mientras Hue toma un valor de color hexadecimal HTML, solo utiliza 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 necesitas convertir tu ángulo basado en una rueda de colores. 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 eso, 90 grados (por ejemplo) es 90/120 = 3/4 de camino de rojo a azul, entonces su número hexadecimal para el tono sería 0x00010003 - o cualquier otro número que tenga el verde configurado en 0, y una relación de 1: 3 entre rojo y azul.

Answer 4

Necesitaba unir 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 tu pantalla, ninguna de las cuales parece ser exactamente lo que especifiqué.

Así que saqué el mapa en un navegador, tomé una captura de pantalla del área con los dos tonos que no coincidían, lo abrí en un editor de imágenes (pixlr.com, en mi caso), usé el color-lechón herramienta para obtener la saturación y la luminosidad para el tono, 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.