Конвертер значений RGB в HSL

Поскольку аргумент оттенка ожидает 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 },
  ]
}

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

http://googlemapscolorizr.stadtwerk.org/

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

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

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

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

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

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

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

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

Да, утомительно, но работает.