Значение RGB до HSL Converter

StackOverflow https://stackoverflow.com/questions/3472040

Вопрос

Google Maps API V3 позволяет применять «стили» на карту, включая настройку цвета различных функций. Тем не менее, цветной формат, который он использует, это HSL (или что похоже на него):

  • оттенок (RGB Hex String)
  • Легкость (плавающее значение между -100 и 100)
  • Насыщенность (плавающее значение между -100 и 100)

(из документы)

Мне удалось найти RGB в HSL-преобразователи в Интернете, но я не уверен, как указать преобразованные значения таким образом, когда Google Maps примет. Например, типичное значение HSL, заданное преобразователем, будет: 209° 72% 49%

Как эта карта значений HSL к параметрам я указал из API Google Maps? Т.е. как определяет значение градуса оттенков в строку Hex RGB и как в процентах отображается отображение значения плавающего точка от -100 до 100?

Я все еще не уверен, как сделать преобразование. Мне нужно, учитывая значение RGB, быстро преобразовать его к тому, что Google Maps ожидает, что цвет будет идентичен ...

Это было полезно?

Решение

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

Другие советы

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

http://googlemapscolorizr.stadtwerk.org/

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

ПРИМЕЧАНИЕ. В то время как оттенок принимает значение цветового значения HTML, он использует только это значение для определения основного цвета (его ориентация вокруг цветового колеса), а не его насыщенность или легкость, которые указываются отдельно, как процентные изменения. Например, оттенок для чистого зеленого может быть определен как «# 00FF00» или «# 000100» в собственности HUE, и оба оттенка будут идентичны. (Оба значения указывают на чистое зеленое в цветовой модели HSL.) Значения оттенок RGB, которые состоят из равных деталей, красные, зеленые и синие - такие как «# 000000» (черные) и «#ffffff» (белый) и все чистые оттенки Серого - не указывайте оттенок, так как никто из этих ценностей не указывает на ориентацию в координатном пространстве HSL. Чтобы указать черное, белое или серое, вы должны удалить все насыщенность (установить значение на -100) и вместо этого настроить свет.

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top