قيمة RGB إلى محول HSL

Question

تتيح Google Maps API V3 تطبيق "أنماط" على الخريطة ، بما في ذلك إعداد لون الميزات المختلفة. ومع ذلك ، فإن تنسيق اللون الذي يستخدمه هو HSL (أو ما يبدو عليه):

• Hue (سلسلة Hex RGB)
• الخفة (قيمة نقطة عائمة بين -100 و 100)
• التشبع (قيمة نقطة عائمة بين -100 و 100)

(من مستندات)

تمكنت من العثور على RGB إلى محولات HSL عبر الإنترنت ، لكنني غير متأكد من كيفية تحديد القيم المحولة بطريقة تقبل خرائط Google. على سبيل المثال ، ستكون قيمة HSL النموذجية المقدمة من المحول: 209° 72% 49%

كيف يتم خريطة قيمة HSL إلى المعلمات التي حددتها من واجهة برمجة تطبيقات خرائط Google؟ أي كيف يمكن لخريطة قيمة درجة الصبر لسلسلة Hex RGB وكيف يمكن لخريطة النسبة المئوية قيمة نقطة عائمة بين 100 و 100؟

ما زلت غير متأكد من كيفية القيام بالتحويل. أحتاج إلى ، بالنظر إلى قيمة RGB ، تحويلها بسرعة إلى ما تتوقعه خرائط Google بحيث يكون اللون متطابقًا ...

Answer 1

نظرًا لأن وسيطة Hue تتوقع 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 غاما من .5. للحصول على اللون الدقيق الذي تريده ، استخدم الحسابات أعلاه ، وأضف ذلك .5 Gamma.

مثل:

{
  featureType: "water",
  elementType: "geometry",
  stylers: [
    { hue: "#2800e2" },
    { saturation: 100 },
    { lightness: -11 },
    { gamma: 0.5 },
  ]
}

Answer 2

قمنا بترميز أداة تريدها بالضبط. يستغرق قيم RGB سداسي عشري ويولد رمز HSL المطلوب. إنه يأتي مع إخراج رمز JavaScript API V3 معاينة وخريطة Google. استمتع ؛ د

http://googlemapscolorizr.stadtwerk.org/

Answer 3

من الصفحة المرتبطة:

ملاحظة: على الرغم من أن Hue يأخذ قيمة لون HTML Hex ، فإنه يستخدم فقط هذه القيمة لتحديد اللون الأساسي (اتجاهه حول عجلة الألوان) ، وليس تشبعها أو خفة ، والتي يشار إليها بشكل منفصل كتغييرات مئوية. على سبيل المثال ، يمكن تعريف Hue for Green Pure على أنه "#00FF00" أو "#000100" داخل خاصية Hue وستكون كلتا الأشكال متطابقة. (تشير كلتا القيمتين إلى اللون الأخضر النقي في نموذج لون HSL.) قيم Hue RGB التي تتكون من أجزاء متساوية باللون الأحمر والأخضر والأزرق - مثل "#000000" (أسود) و "#ffffff" (أبيض) وجميع الظلال النقية من الرمادي - لا تشير إلى درجة عالية من ذلك ، حيث لا تشير أي من هذه القيم إلى اتجاه في مساحة إحداثيات HSL. للإشارة إلى الأسود أو الأبيض أو الرمادي ، يجب عليك إزالة كل التشبع (اضبط القيمة على -100) وضبط الخفة بدلاً من ذلك.

على الأقل عندما أقرأها ، هذا يعني أنك بحاجة إلى تحويل زاويةك بناءً على عجلة الألوان. على سبيل المثال ، لنفترض أن 0 درجة حمراء نقية ، و 120 درجة زرقاء نقية و 240 درجة خضراء نقية. كنت ستأخذ زاويةك ، واكتشف أي تمهيديتين تقع بينهما ، ويتابعون لتحديد مقدار كل ما يتمتع به كل من الاستخدام. من الناحية النظرية ، ربما يجب أن تستخدم استيفاء تربيعي - ولكن هناك احتمالات أن تتمكن من الحصول عليها بشكل جيد مع الخطية.

باستخدام ذلك ، 90 درجة (على سبيل المثال) هي 90/120 = 3/4^ths من الطريق من اللون الأحمر إلى الأزرق ، لذلك سيكون رقم سداسي عشري في اللون هو 0x00010003 - أو أي رقم آخر تم تعيينه الأخضر إلى 0 ، ونسبة 1: 3 بين الأحمر والأزرق.

Answer 4

كنت بحاجة لمطابقة الألوان بالضبط. لذلك استخدمت الأداة التي تقدمها @stadt.werk (http://googlemapscolorizr.stadtwerk.org/) للاقتراب.

ولكن بعد ذلك واجهت المشكلة التي أوضحها Bukzor حيث تقوم API لـ Google Maps بإنشاء اختلافات على ظلالك ، والتي يبدو أن أيًا منها هو ما حددته بالضبط.

لذا قمت بسحب الخريطة في متصفح ، وأخذت لقطة شاشة للمنطقة فقط مع الظلتين اللذين لم يكن مطابقًا تمامًا ، وفتحتها في محرر صور (Pixlr.com ، في حالتي) ، استخدمت لعبة Sucker أداة للحصول على التشبع والخفة للظل ، وتعديل التشبع و/أو الخفة في مكالمة Google API من قبل 1 ، وتكرار حتى حصلت على شيء يبدو أنه يتطابق تمامًا.

من الممكن ، بطبيعة الحال ، أن تقوم Google Maps API بأشياء مختلفة مع الألوان على الأجهزة/المتصفحات/إلخ ، ولكن حتى الآن ، جيدة جدًا.

مملة ، نعم ، لكنها تعمل.