Значение RGB в конвертер HSL - PullRequest
       5

Значение RGB в конвертер HSL

7 голосов
/ 13 августа 2010

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, чтобы цвет был идентичным ...

Ответы [ 4 ]

7 голосов
/ 24 августа 2010

Поскольку аргумент оттенка ожидает 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 использует ваш стиль для создания шести различных цветов с центром в заданном цвете, причем контуры находятся ближе всего к входу. Я считаю, что это настолько близко, насколько это возможно.

alt text


Из экспериментов с: http://gmaps -samples-v3.googlecode.com / svn / trunk / styledmaps / wizard / index.html

Для воды gmaps вычитает гамму .5. Чтобы получить нужный вам цвет, используйте приведенные выше расчеты и добавьте обратно .5 гаммы.

как:

{
  featureType: "water",
  elementType: "geometry",
  stylers: [
    { hue: "#2800e2" },
    { saturation: 100 },
    { lightness: -11 },
    { gamma: 0.5 },
  ]
}
4 голосов
/ 08 апреля 2011

Мы закодировали инструмент, который точно хочет, что вы хотите. Он принимает шестнадцатеричные значения RGB и генерирует необходимый код HSL. Он поставляется с предварительным просмотром и выводом кода Google Map JavaScript API V3. Наслаждайся; D

http://googlemapscolorizr.stadtwerk.org/

0 голосов
/ 18 мая 2011

Мне нужно было точно подобрать цвета. Поэтому я использовал инструмент, который предлагает @ stadt.werk (http://googlemapscolorizr.stadtwerk.org/), чтобы приблизиться.

Но затем я столкнулся с проблемой, объясненной @bukzor, где API Карт Google создает вариации для вашего оттенка, ни один из которых, кажется, не совсем соответствует указанному мной.

Итак, я поднял карту в браузере, сделал скриншот только с областью с двумя не совсем подходящими оттенками, открыл ее в редакторе изображений (в моем случае pixlr.com), использовал инструмент color-sucker, чтобы получить насыщенность и яркость для тени, отрегулировать мою насыщенность и / или яркость в вызове API Google на 1 и повторять до тех пор, пока я не получу что-то, что, кажется, идеально соответствует.

Конечно, возможно, что API Карт Google будет делать разные вещи с цветами на разных устройствах / браузерах / и т. Д., Но пока все хорошо.

Утомительно, да, но это работает.

0 голосов
/ 13 августа 2010

со связанной страницы:

Примечание: хотя hue принимает значение цвета в шестнадцатеричном формате HTML, оно использует это значение только для определения основного цвета (его ориентации вокруг цветового круга), а не его насыщенности или яркости, которые указываются отдельно в виде процентных изменений. Например, оттенок для чистого зеленого цвета может быть определен как «# 00ff00» или «# 000100» в свойстве оттенка, и оба оттенка будут идентичны. (Оба значения указывают на чистый зеленый в цветовой модели HSL.) Значения оттенков RGB, которые состоят из равных частей красного, зеленого и синего, например, "# 000000" (черный) и "#FFFFFF" (белый) и всех чистых оттенков серого - не указывайте какой-либо оттенок, поскольку ни одно из этих значений не указывает ориентацию в координатном пространстве HSL. Чтобы указать черный, белый или серый, вы должны удалить всю насыщенность (установите значение -100) и вместо этого отрегулируйте яркость.

По крайней мере, как я прочитал, это означает, что вам нужно конвертировать угол на основе цветового круга. Например, предположим, что 0 градусов - чистый красный, 120 градусов - чистый синий, а 240 градусов - чистый зеленый. Затем вы берете свой угол обзора, выясняете, между какими двумя основными цветами он находится, и интерполируете, чтобы определить, сколько из каждого основного элемента использовать. Теоретически, вам, вероятно, следует использовать квадратичную интерполяцию, но есть вероятность, что вы можете достаточно хорошо справиться с линейной.

Используя это, 90 градусов (например) - это 90/120 = 3/4 тыс. пути от красного до синего, поэтому ваш шестнадцатеричный номер для оттенка будет 0x00010003 - или любой другой число, для которого зеленый цвет был равен 0, а соотношение красного и синего 1: 3.

...