برمجيا اختيار الألوان عالية التباين

Question

يجب أن يكون هذا السؤال البسيط, ولكن لم أكن قادرة على العثور على طريقة لجعلها تعمل.

أساسا أنا سخيفة localhost الصفحة التي يمكنني استخدامها في بلدي webdevelopment.وأنا عندما تصفح بين التنمية الخادم المحلي نسخة من التعليمات البرمجية C# (توجيه من ديف url بواسطة ملف المضيف) أنا قد عرفت أن في بعض الأحيان ننسى ما dev.foo.com' نقطة في المحلية أو الخادم.

لذلك أنا خلقت الصفحة التي سيتم تشغيل محليا الافتراضي صفحة ويب الافتراضي الصفحة لذا يمكن بسهولة تحديد localhost من الخادم.

هذه الصفحة يفعل الكثير من الأشياء بشكل عشوائي (بما في ذلك توليد حرف ابتداء احصائيات D&D) ، بما في ذلك تحديد عشوائي لون الخلفية.أنا القيام بذلك عن طريق إنشاء 3 أرقام عشوائية بين 0 و 255 و وضع لهم كما RGB قيمة للجسم لون الخلفية في CSS.

ونظرا 3 رجات R, G, B, كيف يمكنني تحديد R2, G2, و B2 مثل أن اللون الثاني سيكون عالية التباين مع الأول ؟ أنا مثل وجود صفحة عشوائية ألوان الخلفية (يبقى لي من التعود على مظهر الصفحة المقصودة) ولكن أود أيضا أن تكون قادرة على قراءة النص.

Answer 1

تحتاج الفرق في السطوع على النص المقروء ، رؤية الألوان نفسها لديها منخفضة جدا القرار.

وذلك خوارزمية أقترح ما يلي:

• اختيار عشوائي لون الخلفية.

• ثم تقرر ما إذا كانت خفيفة أو داكنة اللون.على سبيل المثال هل يمكن أن تحقق ما إذا كانت متوسط من الألوان الثلاثة الأساسية هي أكبر من أو تساوي 128.

• على ضوء استخدام اللون الأسود النص ، القاتم نص أبيض.

Answer 2

و"التباين" هي كلمة المحملة. إذا كنت فقط يهتمون التمكن من قراءة النص، ثم واحد هو طريقة سهلة للعمل في لون الفضاء على أساس الإنارة مثل الأعرج، واختيار الألوان الأمامية والخلفية مع وجود اختلافات كبيرة في الإنارة.

والتحويل بين HSL وRGB هو معروف - راجع ويكيبيديا للحصول على التفاصيل

.

إذا كنت تتحدث عن تباين الألوان الفعلي، انها ليست ما يقرب من قص والمجففة (هناك الكثير من العوامل الحسية التي، بقدر ما أعرف، لم يتم تخفيضها إلى مساحة الألوان واحد)، ولكن أظن أنك لا تحتاج إلى هذا المستوى من التطور.

Answer 3

وتحقق من هذا الحل PHP: حساب التباين اللون مع PHP عن طريق اندرياس Gohr. ويمكن تصديرها إلى أي لغة بطبيعة الحال.

وكما حصل على مظاهرة لطيفة جدا من له محلل النقيض حيث يمكنك أن تجد بعض مستويات التباين الحد الأدنى من التعامل معها.

Answer 4

ويمكنك استخدام طريقة GetBrightness() على الطبقة Color. تقوم بإرجاع قيمة تطفو من 0.0 (سطوع أسود) إلى 1.0 (أبيض). سيكون هناك حل بسيط هو:

var color1 = new Color.FromArgb(r1, g1, b1);
var brightness = color1.GetBrightness();

var color2 = brightness > 0.5 ? Color.Black : Color.White;

Answer 5

وفعلت شيئا من هذا القبيل في تطبيق نظام التشغيل بالم. هذا هو ما خطرت لي. أنها لا تعطيك "التباين العالي" الألوان لكنه يتيح لك لون الخلفية التي تختلف ما يكفي من لون النص لتكون قابلة للقراءة للغاية:

  // Black background is a special case.  It's fairly likely to occur and 
  // the default color shift we do isn't very noticeable with very dark colors.
  if (backColor.r < 0x20 && backColor.g < 0x20 && backColor.b < 0x20)
  {
      textColor.r = backColor.r + 0x20;
      textColor.g = backColor.g + 0x20;
      textColor.b = backColor.b + 0x20;
  }
  else
  {
      textColor.r = backColor.r + ((backColor.r < 128) ? 0x10 : -0x10);
      textColor.g = backColor.g + ((backColor.g < 128) ? 0x10 : -0x10);
      textColor.b = backColor.b + ((backColor.b < 128) ? 0x10 : -0x10);
  }

وأنت قد لا تحتاج إلى القيام الأسود كحالة خاصة لأغراضك - التعامل مع اللون بالم قليلا غير تقليدي (ألوان 16 بت)

Answer 6

وهناك بعض موارد جيدة (والخوارزميات) لمعالجة هذا على http://juicystudio.com/ المادة / luminositycontrastratioalgorithm.php

Answer 7

وهذه الإجابات هي أكثر أو أقل مما يشير إلى استخدام واحد من اثنين أو ثلاثة اختيارات اللون بناء على ما إذا كان اللون هو مشرق أو مظلم.

وأنا استخدم نهجا مختلفا بعض الشيء وانها عملت بشكل رائع في حالتي. هنا هو التنفيذ.

 int color = your_color;
 contrastColor = Color.rgb(255-(color >> 16)&0xFF, 255-(color >> 8)&0xFF, 255- color&0xFF);

وانها بسيطة ورائعة.

Answer 8

إذا كنت الوجه كل البتات، سوف تحصل على "الآخر" اللون الذي سيكون على النقيض جيدة.

واعتقد انها ~ المشغل في C #:

R2 = ~R1;
G2 = ~G1;
B2 = ~B1;

Answer 9

لأفضل النقيض استخدام هذا الرمز

function lumdiff($R1,$G1,$B1,$R2,$G2,$B2){

    $L1 = 0.2126 * pow($R1/255, 2.2) +
          0.7152 * pow($G1/255, 2.2) +
          0.0722 * pow($B1/255, 2.2);

    $L2 = 0.2126 * pow($R2/255, 2.2) +
          0.7152 * pow($G2/255, 2.2) +
          0.0722 * pow($B2/255, 2.2);

    if($L1 > $L2){
        return ($L1+0.05) / ($L2+0.05);
    }else{
        return ($L2+0.05) / ($L1+0.05);
    }
}

function get_the_contrast($c1, $c2) {
    return (lumdiff(hexdec(substr($c1,0,2)),
        hexdec(substr($c1,2,2)),hexdec(substr($c1,4,2)),
        hexdec(substr($c2,0,2)),hexdec(substr($c2,2,2)),
        hexdec(substr($c2,4,2))));
}

والأسلوب أعلاه (AVG (الأحمر والأخضر والأزرق)> 128) ليست جيدة حقا.

Answer 10

private Color GetContrastingColor(Color color)
{
    int r = color.R > 0 ? 256 - color.R : 255;
    int g = color.G > 0 ? 256 - color.G : 255;
    int b = color.B > 0 ? 256 - color.B : 255;
    return System.Drawing.Color.FromArgb(r, g, b);
}

Answer 11

شكرا @starblue !

هنا C# التعليمات البرمجية التي تستخدم

 public static string GetContrastBlackOrWhiteColorAsHtmlColorCode(Color c)
        {
            System.Drawing.Color color = System.Drawing.ColorTranslator.FromHtml("transparent");

            try
            {
                if (c.R >= 128 && c.G >= 128 && c.B >= 128)
                {
                    return System.Drawing.ColorTranslator.ToHtml(Color.Black);
                }
                else
                {
                    return System.Drawing.ColorTranslator.ToHtml(Color.White);
                }
            }
            catch (Exception)
            {
            }

            return System.Drawing.ColorTranslator.ToHtml(color);
        }