Valeur RVB au convertisseur HSL

Question

L'API V3 de Google Maps permet d'appliquer des "styles" à la carte, y compris le définition de la couleur de diverses fonctionnalités. Cependant, le format de couleur qu'il utilise est HSL (ou ce qui semble être):

• Hue (une chaîne HEX RVB)
• légère (une valeur de point flottante entre -100 et 100)
• saturation (une valeur de point flottante entre -100 et 100)

(du docs)

J'ai réussi à trouver RVB à HSL Converters en ligne, mais je ne sais pas comment spécifier les valeurs converties d'une manière que Google Maps acceptera. Par exemple, une valeur HSL typique donnée par un convertisseur serait: 209° 72% 49%

Comment cette valeur HSL est-elle mapée par les paramètres que j'ai spécifiés à partir de l'API Google Maps? c'est-à-dire comment une valeur de valeur de teinte est-elle cartographiée sur une chaîne hexagonale RVB et comment un pourcentage est-il une valeur de point flottante entre -100 et 100?

Je ne sais toujours pas comment faire la conversion. J'ai besoin, étant donné une valeur RVB, de le convertir rapidement en ce que Google Maps attend afin que la couleur soit identique ...

Answer 1

Étant donné que l'argument Hue s'attend à RVB, vous pouvez utiliser la couleur d'origine comme teinte.

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

Exemple:

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

---

Résultat:

Vous trouverez ci-dessous une capture d'écran montrant le corps défini sur une couleur d'arrière-plan RVB (# 2800E2 dans ce cas), et une carte Google avec la géométrie routière stylée, en utilisant les valeurs calculées comme ci-dessus ('0x2800E2', 100, -11).

Il est assez clair que Google utilise votre style pour créer environ six couleurs différentes centrées sur la couleur donnée, les contours étant les plus proches de l'entrée. Je crois que c'est aussi proche que possible.

---

De l'expérimentation avec: http://gmaps-semples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Pour l'eau, GMAPS soustrait un gamma de .5. Pour obtenir la couleur exacte que vous souhaitez, utilisez les calculs ci-dessus et ajoutez que 0,5 gamma.

Comme:

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

Answer 2

Nous avons codé un outil qui veut exactement que vous souhaitiez. Il faut des valeurs RVB hexadécimales et génère le code HSL nécessaire. Il est livré avec un aperçu et une sortie de code API JavaScript Google Map. Profiter; D

http://googlemapscolorizr.stadtwerk.org/

Answer 3

À partir de la page liée:

Remarque: Bien que Hue prenne une valeur de couleur hexadécimale HTML, il n'utilise cette valeur que pour déterminer la couleur de base (son orientation autour de la roue chromatique), pas sa saturation ou sa légèreté, qui sont indiquées séparément en pourcentage de changements. Par exemple, la teinte pour le vert pur peut être définie comme "# 00FF00" ou "# 000100" dans la propriété Hue et les deux teintes seront identiques. (Les deux valeurs pointent vers le vert pur dans le modèle de couleur HSL.) Valeurs de teinte RGB qui se composent de parties égales rouges, vertes et bleues - comme "# 000000" (noir) et "#ffffff" (blanc) et toutes les nuances pures de gris - n'indiquez pas de teinte, car aucune de ces valeurs n'indique une orientation dans l'espace de coordonnées HSL. Pour indiquer le noir, le blanc ou le gris, vous devez supprimer toute saturation (régler la valeur sur -100) et ajuster la légèreté à la place.

Au moins, comme je l'ai lu, cela signifie que vous devez convertir votre angle en fonction d'une roue chromatique. Par exemple, supposons que 0 degrés est rouge pur, 120 degrés est bleu pur et 240 degrés est vert pur. Vous prenez ensuite votre angle, déterminez les deux primaires dans lesquelles il se passe et interpolez pour déterminer la quantité de chaque primaire à utiliser. En théorie, vous devriez probablement utiliser une interpolation quadratique - mais il y a de fortes chances que vous puissiez vous entendre assez bien avec linéaire.

En utilisant cela, 90 degrés (par exemple) est 90/120 = 3/4^ths Du chemin du rouge au bleu, donc votre numéro hexadécimal pour la teinte serait 0x00010003 - ou tout autre nombre qui avait un vert réglé à 0 et un rapport 1: 3 entre le rouge et le bleu.

Answer 4

J'avais besoin de faire correspondre exactement les couleurs. J'ai donc utilisé l'outil que @ stadt.werk propose (http://googlemapscolorizr.stadtwerk.org/) pour se rapprocher.

Mais j'ai ensuite rencontré le problème expliqué par @bukzor où l'API Google Maps crée des variations sur votre teinte, dont aucune ne semble être exactement ce que j'ai spécifié.

Alors j'ai remonté la carte dans un navigateur, j'ai pris une capture d'écran de la zone avec les deux nuances qui n'étaient pas tout à fait assorties, je l'ai ouverte dans un éditeur d'image (Pixlr.com, dans mon cas), j'ai utilisé le sucker couleur Outil pour obtenir la saturation et la légèreté pour l'ombre, ajusté ma saturation et / ou ma légèreté dans l'appel de l'API Google par 1, et répété jusqu'à ce que j'obtienne quelque chose qui semble correspondre parfaitement.

Il est possible, bien sûr, que l'API Google Maps fasse des choses différentes avec les couleurs sur différents appareils / navigateurs / etc., mais jusqu'à présent, tout va bien.

Fastious, oui, mais ça marche.