Значение RGB в конвертер HSL
Google maps api v3 позволяет применять «стили» к карте, включая настройку цвета различных объектов. Однако используемый цветовой формат - HSL (или что-то вроде этого):
- hue (шестнадцатеричная строка RGB)
- lightness (значение с плавающей запятой в диапазоне от -100 до 100)
- насыщенность (с плавающей запятой) значение между -100 и 100)
(из документов )
Мне удалось найти конвертеры RGB в HSL в Интернете, но я не уверен, как указать преобразованные значения таким образом, чтобы карты Google приму. Например, типичное значение HSL, заданное конвертером, будет: 209 ° 72% 49%
Как это значение HSL соответствует параметрам, которые я указал в API карт Google? т.е. как значение степени оттенка отображается в шестнадцатеричную строку RGB и как процентное соотношение отображается в значение с плавающей запятой в диапазоне от -100 до 100?
Я все еще не уверен, как выполнить преобразование. Мне нужно, учитывая значение RGB, быстро преобразовать его в то, что ожидает от Google Maps, чтобы цвет был идентичным ...
2 ответа
Поскольку аргумент оттенка предполагает 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) и карту Google со стилизованной геометрией дорог. , используя значения, рассчитанные, как указано выше ('0x2800E2', 100, -11).
Совершенно очевидно, что Google использует ваши стили для создания примерно шести различных цветов с центром в заданном цвете, с контурами, наиболее близкими к входным данным. Я считаю, что это настолько близко, насколько это возможно.
Из экспериментов с: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
Для воды gmaps вычитает гамму 0,5. Чтобы получить точный цвет, который вы хотите, используйте приведенные выше расчеты и добавьте эту гамму 0,5 обратно.
например:
{
featureType: "water",
elementType: "geometry",
stylers: [
{ hue: "#2800e2" },
{ saturation: 100 },
{ lightness: -11 },
{ gamma: 0.5 },
]
}
Со страницы по ссылке:
Примечание: хотя hue принимает шестнадцатеричное значение цвета HTML, он использует это значение только для определения основного цвета (его ориентации по цветовому кругу), а не его насыщенности или светлоты, которые указываются отдельно в виде процентных изменений. Например, оттенок чистого зеленого цвета может быть определен как "#00ff00" или "#000100" в свойстве hue, и оба оттенка будут идентичны. (Оба значения указывают на чистый зеленый цвет в цветовой модели HSL). Значения оттенка RGB, состоящие из равных частей красного, зеленого и синего - такие как "#000000" (черный) и "#FFFFFF" (белый) и все чистые оттенки серого - не указывают ни на какой оттенок, поскольку ни одно из этих значений не указывает на ориентацию в пространстве координат HSL. Чтобы обозначить черный, белый или серый цвет, необходимо убрать всю насыщенность (установить значение -100) и вместо этого отрегулировать светлоту.
По крайней мере, как я прочитал, это означает, что вам нужно преобразовать ваш угол на основе цветового колеса. Например, предположим, что 0 градусов - это чистый красный, 120 градусов - чистый синий, а 240 градусов - чистый зеленый. Тогда вы возьмете свой угол, выясните, между какими двумя первичными цветами он находится, и интерполируете, чтобы определить, сколько каждого из них нужно использовать. Теоретически вы должны использовать квадратичную интерполяцию, но есть вероятность, что вы вполне можете обойтись линейной.
Используя это, 90 градусов (например) - это 90/120 = 3/4тысячи пути от красного к синему, поэтому ваш шестнадцатеричный номер для оттенка будет 0x00010003 - или любой другой номер, в котором зеленый установлен на 0, а соотношение красного и синего 1:3.