HSLコンバーターへのRGB値

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

質問

Google Maps API V3を使用すると、さまざまな機能の色を設定するなど、「スタイル」をマップに適用できます。ただし、使用する色形式はHSL（またはそのように見えるもの）です。

  • 色相（RGBヘックスストリング）
  • 軽さ（-100〜100の間の浮動小数点値）
  • 飽和（-100〜100の間の浮動小数点値）

（から ドキュメント)

RGBからHSLコンバーターをオンラインで見つけることができましたが、Googleマップが受け入れる方法で変換された値を指定する方法がわかりません。たとえば、コンバーターによって与えられる典型的なHSL値は次のとおりです。 209° 72% 49%

そのHSLは、GoogleマップAPIから指定したパラメーターにどのようにマップしますか？つまり、色相度値はRGB 16進ストリングにどのようにマップされ、-100から100の間のフローティングポイント値へのパーセンテージマップはどのようにマップされますか？

私はまだ変換を行う方法は不明です。 RGB値を考えると、Googleマップが期待するものにすばやく変換して、色が同一になるようにする必要があります...

役に立ちましたか？

解決

色相の引数は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)

結果：

以下は、上記のように計算された値（ '0x2800E2'、100、-11）を使用して、ボディがRGBの背景色（この場合は＃2800E2）に設定されたスクリーンショット（＃2800E2）と、スタイルのロードジオメトリを備えたGoogleマップを示すスクリーンショットです。

Googleがスタイリングを使用して、指定された色を中心とした約6つの異なる色を作成し、アウトラインが入力に最も近いことは明らかです。これは、それが得られるほど近いと思います。

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 },
  ]
}

他のヒント

私たちはあなたが望む正確なツールをコーディングしました。 16進RGB値が必要で、必要なHSLコードが生成されます。プレビューとGoogleマップJavaScript API V3コード出力が付属しています。楽しむ; d

http://googlemapscolorizr.stadtwerk.org/

リンクされたページから：

注：HueはHTML HEXの色の値を取得しますが、この値のみを使用して、飽和または軽さではなく、基本色（カラーホイールの周りの方向）を決定します。たとえば、純粋な緑の色相は、色相プロパティ内で「＃00FF00」または「＃000100」として定義される場合があり、両方の色合いは同一です。 （HSLカラーモデルでは、両方の値が純粋な緑を指します。）「＃000000」（黒）や「#ffffff」（白）など、赤、緑、青の等しい部分で構成されるRGB HUE値とすべての純粋な色合い灰色の - HSL座標空間の方向を示すものではないため、色合いを示すことはありません。黒、白、灰色を示すには、すべての飽和度（値を-100に設定）を削除し、代わりに軽さを調整する必要があります。

少なくとも私が読んだように、それはあなたがカラーホイールに基づいてあなたの角度を変換する必要があることを意味します。たとえば、0度は純粋な赤、120度は純粋な青、240度が純粋な緑であると仮定しましょう。次に、角度を取って、どの2つのプライマリーがその間に落ちるかを把握し、補間して、各プライマリの使用量を決定します。理論的には、おそらく二次補間を使用する必要がありますが、リニアで合理的にうまく取得できる可能性があります。

それを使用すると、90度（たとえば）は90/120 = 3/4ですths 赤から青まで、色相の16進数は0x00010003、または緑色のセットが0に、赤と青の1：3の比率がある他の数字になります。

色を正確に一致させる必要がありました。そこで、 @Stadt.Werkが提供するツール（http://googlemapscolorizr.stadtwerk.org/）を使用して近づきました。

しかし、その後、GoogleマップAPIがあなたのシェードにバリエーションを作成する@Bukzorによって説明された問題に出くわしましたが、どれも私が指定したものではないようです。

だから私はブラウザでマップを引き上げ、完全に一致していなかった2つの色合いのあるエリアのスクリーンショットを撮影し、画像エディター（私の場合はpixlr.com）でそれを開き、カラーサッカーを使用しましたシェードの飽和と軽さを得るためのツール、Google API呼び出しの飽和や軽さを1で調整し、完全に一致するように見えるものになるまで繰り返しました。

もちろん、Google Maps APIは、さまざまなデバイス/ブラウザ/などの色で異なることを行う可能性がありますが、これまでのところ非常に良いです。

退屈な、はい、しかしそれは機能します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top