RGB 值到 HSL 转换器

Question

Google 地图 API v3 允许将“样式”应用于地图，包括设置各种要素的颜色。但是，它使用的颜色格式是 HSL（或者看起来像它的格式）：

• 色调（RGB 十六进制字符串）
• 亮度（-100 到 100 之间的浮点值）
• 饱和度（-100 到 100 之间的浮点值）

（来自docs）

我设法找到了 RGB 到 HSL 转换器在线，但我不确定如何以谷歌地图接受的方式指定转换后的值。例如，转换器给出的典型 HSL 值将是：209° 72% 49%

该 HSL 值如何映射到我从 google 地图 API 指定的参数？即色调度值如何映射到 RGB 十六进制字符串以及百分比如何映射到 -100 到 100 之间的浮点值？

我仍然不确定如何进行转换。我需要，给定一个 RGB 值，快速将其转换为谷歌地图期望的值，以便颜色相同......

Answer 1

由于色调参数需要 RGB，因此您可以使用原始颜色作为色调。

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

示例：

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

---

结果：

下面的屏幕截图显示了设置为 rgb 背景颜色的主体（在本例中为#2800E2），以及带有样式道路几何形状的谷歌地图，使用计算的值如上所述（'0x2800E2'，100，-11）。

很明显，谷歌使用您的样式创建以给定颜色为中心的大约六种不同的颜色，其中轮廓最接近输入。我相信这已经是最接近的了。

---

来自实验：http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

对于水，gmap减去 0.5 的伽玛值。要获得您想要的确切颜色，请使用上面的计算，然后添加 0.5 伽马值。

喜欢：

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

Answer 2

我们编写了一个正是您想要的工具。它采用十六进制 RGB 值并生成所需的 HSL 代码。它带有预览和 Google Map JavaScript API V3 代码输出。尽情享受 ;D

http://googlemapscolorizr.stadtwerk.org/

Answer 3

从链接页面：

注意：虽然色调采用 HTML 十六进制颜色值，但它仅使用该值来确定基本颜色（其在色轮周围的方向），而不是其饱和度或亮度，它们分别以百分比变化表示。例如，纯绿色的色调可以在色调属性中定义为“#00ff00”或“#000100”，并且两种色调将相同。 （这两个值都指向 HSL 颜色模型中的纯绿色。）由等量的红色、绿色和蓝色组成的 RGB 色调值 — 例如“#000000”（黑色）和“#FFFFFF”（白色）以及所有纯色调灰色 — 不指示任何色调，因为这些值都不指示 HSL 坐标空间中的方向。要表示黑色、白色或灰色，您必须删除所有饱和度（将值设置为 -100）并调整亮度。

至少在我读到的时候，这意味着您需要根据色轮转换角度。例如，假设 0 度为纯红色，120 度为纯蓝色，240 度为纯绿色。然后，您需要确定角度，找出它位于哪两个原色之间，并进行插值以确定每个原色要使用多少。从理论上讲，您可能应该使用二次插值 - 但很可能您可以使用线性插值相当好。

使用它，90 度（例如）是从红色到蓝色的 90/120 = 3/4^ths，因此色调的十六进制数将为 0x00010003 - 或任何其他数字将绿色设置为 0，红色和蓝色之间的比例为 1:3。

Answer 4

我需要精确匹配颜色。所以我使用@stadt.werk提供的工具（http://googlemapscolorizr.stadtwerk.org/）来接近。

但后来我遇到了 @bukzor 解释的问题，其中 Google Maps API 在你的阴影上创建了变化，但这些变化似乎都不完全是我指定的。

所以我在浏览器中打开了地图，只截取了两个色调不太匹配的区域的屏幕截图，在图像编辑器中将其打开（在我的例子中是 pixlr.com），使用了 color-sucker工具来获取阴影的饱和度和亮度，将 Google API 调用中的饱和度和/或亮度调整为 1，然后重复，直到得到看起来完美匹配的东西。

当然，Google Maps API 可能会在不同的设备/浏览器等上对颜色执行不同的操作，但到目前为止，效果还不错。

是的，很乏味，但它有效。