Valor RGB para conversor HSL

Question

O Google Maps API V3 permite que os "estilos" sejam aplicados ao mapa, incluindo a definição da cor de vários recursos. No entanto, o formato de cor que ele usa é HSL (ou o que parece):

• Hue (uma string hexadecida RGB)
• leveza (um valor de ponto flutuante entre -100 e 100)
• saturação (um valor de ponto flutuante entre -100 e 100)

(de documentos)

Consegui encontrar conversores RGB para HSL on -line, mas não tenho certeza de como especificar os valores convertidos de uma maneira que o Google Maps aceitará. Por exemplo, um valor HSL típico dado por um conversor seria: 209° 72% 49%

Como esse mapa de valor HSL para os parâmetros que especificou na API do Google Maps? ou seja, como um mapa de valor de grau de matiz para uma string hexadecimal rgb e como um mapa percentual para um valor de ponto flutuante entre -100 e 100?

Ainda não tenho certeza de como fazer a conversão. Eu preciso, com um valor RGB, convertê -lo rapidamente para o que o Google Maps espera, para que a cor seja idêntica ...

Answer 1

Como o argumento da matilha espera RGB, você pode usar a cor 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:])

Exemplo:

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

---

Resultado:

Abaixo está uma captura de tela mostrando o corpo definido como uma cor de fundo RGB (#2800E2 neste caso) e um mapa do Google com geometria de estrada com estilo, usando os valores calculados como acima ('0x2800E2', 100, -11).

É bem claro que o Google usa seu estilo para criar cerca de seis cores diferentes centradas na cor fornecida, com os contornos mais próximos da entrada. Eu acredito que isso é o mais próximo possível.

---

De experimentação com: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Para a água, os GMAPs subtraem uma gama de 0,5. Para obter a cor exata desejada, use os cálculos acima e adicione isso .5 gama de volta.

Curti:

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

Answer 2

Codificamos uma ferramenta que exatamente deseja. São necessários valores de RGB hexadecimal e gera o código HSL necessário. Ele vem com uma saída de código Visualize e Google Map JavaScript API V3. Desfrute; d

http://googlemapscolorizr.stadtwerk.org/

Answer 3

Na página vinculada:

Nota: Enquanto o Hue pega um valor de cor HTML Hex, ele usa apenas esse valor para determinar a cor básica (sua orientação ao redor da roda de cores), não sua saturação ou leveza, que são indicadas separadamente como alterações percentuais. Por exemplo, o tom de verde puro pode ser definido como "#00FF00" ou "#000100" na propriedade Hue e ambos os tons serão idênticos. (Ambos os valores apontam para o verde puro no modelo de cores HSL.) Valores de matiz RGB que consistem em partes iguais vermelhas, verdes e azuis - como "#000000" (preto) e "#ffffff" (branco) e todos os tons puros de cinza - não indique uma tonalidade, pois nenhum desses valores indica uma orientação no espaço de coordenadas HSL. Para indicar preto, branco ou cinza, você deve remover toda a saturação (defina o valor como -100) e ajuste a leveza.

Pelo menos ao ler, isso significa que você precisa converter seu ângulo com base em uma roda de cores. Por exemplo, vamos assumir que 0 graus é vermelho puro, 120 graus é azul puro e 240 graus é verde puro. Você então pegaria seu ângulo, descobriria quais duas primárias ele cai e interpolaria para determinar quanto de cada primário usar. Em teoria, você provavelmente deve usar uma interpolação quadrática - mas é provável que você possa obter razoavelmente bem com linear.

Usando isso, 90 graus (por exemplo) é 90/120 = 3/4^ths do caminho de vermelho ao azul, para que seu número hexadecimal para o tom seja 0x00010003 - ou qualquer outro número que tivesse verde definido para 0 e uma proporção de 1: 3 entre vermelho e azul.

Answer 4

Eu precisava combinar exatamente as cores. Por isso, usei a ferramenta que @stadt.werk oferece (http://googlemapscolorizr.stadtwerk.org/) para se aproximar.

Mas então eu encontrei o problema explicado por @bukzor, onde a API do Google Maps cria variações na sua sombra, nenhuma das quais parece ser exatamente o que eu especifiquei.

Então, puxei o mapa em um navegador, tirei uma captura de tela apenas da área com os dois tons que não eram completamente correspondentes, abri-lo em um editor de imagens (Pixlr.com, no meu caso), usei o sucker de cores Ferramenta para obter a saturação e a leveza da sombra, ajustou minha saturação e/ou leveza na chamada da API do Google por 1 e repeti até que eu recebi algo que parece combinar perfeitamente.

É possível, é claro, que a API do Google Maps faça coisas diferentes com as cores em diferentes dispositivos/navegadores/etc., mas até agora, tão bom.

Tedioso, sim, mas funciona.