RGB value for HSL converter

Question

Google Maps api v3 allows you to apply "styles" to the map, including color adjustment of various functions. However, the color format used is HSL (or something like this):

• hue (RGB hexadecimal string)
• lightness (floating point value between -100 and 100)
• saturation (floating point value between -100 and 100)

(from docs )

I managed to find HSL RGB converters on the Internet, but I'm not sure how to specify the converted values ​​in such a way that Google maps will accept. For example, a typical HSL value set by the transmitter would be: 209° 72% 49%

How does this HSL value compare with the parameters I specify on google maps? that is, how is the hue value displayed in the RGB hexadecimal string and how does the percentage map correspond to a floating point value between -100 and 100?

I'm still not sure how to do the conversion. I need, given the RGB value, quickly convert it to what Google maps expects, so that the color is identical ...

Answer 1

Since the hue argument expects RGB, you can use the original color as a hue.

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

Example:

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

---

Result:

Below is a screenshot showing that the body is set to rgb background color (in this case # 2800E2) and a google map with stylized road geometry using the values ​​calculated as above ('0x2800E2', 100, -11).

It's pretty clear that Google uses your style to create around six different colors oriented to a given color, with the contours closest to the input. I believe this is as close as possible.

---

From experiments with: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

For water, gmaps subtracts a gamma of .5. To get the color you want, use the above calculations and add .5 gamma back.

as:

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

Answer 2

We have encoded the tool that you really need. It accepts hexadecimal RGB values ​​and generates the required HSL code. It comes with preview code output and Google Maps JavaScript API V3. Enjoy D

http://googlemapscolorizr.stadtwerk.org/

Answer 3

On the linked page:

Note: while the hue takes on the color value of the HTML hexagram, it uses this value only to determine the primary color (its orientation around the color wheel), and not its saturation or brightness, which are indicated separately in percent. For example, a hue for pure green can be defined as "# 00ff00" or "# 000100" inside the hue property, and both hues will be identical. (Both values ​​indicate pure green in the HSL color model.) RGB shades that consist of equal parts: red, green, and blue — for example, “# 000000” (black) and “#FFFFFF” (white) and all are clear shades of gray - do not indicate any shade, since none of these values ​​indicate the orientation in the HSL coordinate space. To indicate black, white or gray, you must remove all saturation (set the value to -100) and adjust the lightness.

At least when I read this, it means that you need to convert your angle based on the color wheel. For example, suppose that 0 degrees is pure red, 120 degrees is pure blue, and 240 degrees is pure green. Then you take your angle, find out with what two primary objects it is between them, and interpolate to determine how much of each primary is used. Theoretically, you should probably use quadratic interpolation, but most likely you can get reasonably reasonably with linear.

Using this, 90 degrees (for example) is 90/120 = 3/4 ^{ths of the} way from red to blue, so your hexadecimal number for the hue will be 0x00010003 - or any other number that has a green color of 0, and a 1: 3 ratio between red and blue.

Answer 4

I needed to match the colors exactly. So I used the tool that @ stadt.werk offers (http://googlemapscolorizr.stadtwerk.org/) to get closer.

But then I ran into the problem described by @bukzor where the Google Maps API creates variations on your shade, none of which seem to be exactly what I pointed out.

So, I picked up the map in the browser, took a screenshot of only the area with two shades that did not quite match, opened it in the image editor (pixlr.com, in my case), used the Color-sucker tool to get the saturation and lightness for the shadow , adjusted my saturation and / or ease of use of the Google APIs to 1, and repeated until I got something that seems perfect.

It’s possible, of course, that the Google Maps API will do different things with colors on different devices / browsers, etc., but so far it’s so good.

Thoughtful, yes, but it works.