2011-07-20 24 views
13

के लिए फ़ॉन्ट रंग के आधार पर पृष्ठभूमि रंग कैसे चुनें, मुझे रंग संरचना के बारे में बहुत कुछ पता नहीं है, इसलिए मैं इस एल्गोरिदम के साथ आया जो परीक्षण पर फ़ॉन्ट रंग के आधार पर पृष्ठभूमि रंग उठाएगा आधार:उचित रंग

public class BackgroundFromForegroundColorConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     if (!(value is Color)) 
      return value; 
     Color color = (Color)value; 
     if (color.R + color.G + color.B > 550) 
      return new SolidColorBrush(Colors.Gray); 
     else if (color.R + color.G + color.B > 400) 
      return new SolidColorBrush(Colors.LightGray); 
     else 
      return new SolidColorBrush(Colors.White); 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

मैं कुछ इस बारे में googling किया था, लेकिन मैं अलग अलग तरीकों से एक पृष्ठभूमि रंग फ़ॉन्ट रंग के साथ एक अच्छा विपरीत असर पाने के लिए गणना की जा सकती के बारे में बहुत औपचारिक कुछ भी नहीं मिला है।

तो मेरा सवाल यह है: क्या एक अच्छा विपरीत पाने के लिए एक अच्छी पृष्ठभूमि लेने के लिए एक और "औपचारिक" दृष्टिकोण है? वैकल्पिक रूप से, आप अपना टेक्स्ट रंग जितना संभव हो उतना पठनीय जितना संभव हो उतना पाठ रखने के एकमात्र इरादे से पृष्ठभूमि रंग चुनने को कैसे संभालेंगे?

त्वरित अद्यतन

थोड़ा अधिक संदर्भ: मैं बस (उदाहरण के लिए "जल्दी भूरी लोमड़ी आलसी कुत्ते पर कूदता है") कुछ पाठ के एक पूर्वावलोकन जहां उपयोगकर्ता उठाता फ़ॉन्ट रंग दिखाने के लिए कोशिश कर रहा हूँ , वजन, फ़ॉन्ट इत्यादि। हालांकि मुझे यह देखने में दिलचस्पी है कि क्या किया जा सकता है, चाहे वह बहुत आसान हो या अधिक जटिल हो।

अंतिम संपादित

मैं H.B. क्या सुझाव के साथ जाने का फैसला किया: यह सभी रंग मैं अपने पिछले एल्गोरिथ्म के साथ विपरीत कोशिश की अग्रभूमि हमेशा पृष्ठभूमि के साथ ठीक से विपरीत नहीं होता के साथ ठीक से काम करने लगता है। मैं यह देखने के लिए उत्सुक था कि क्या सूत्र है जो आपको किसी दिए गए अग्रभूमि के लिए "इष्टतम" पृष्ठभूमि देता है, लेकिन मुझे काले/सफेद कामों की आवश्यकता के लिए बस ठीक है। यह मेरा कोड वर्तमान स्वरूप में है:

public class BackgroundFromForegroundColorConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     if (!(value is Color)) 
      return value; 
     Color color = (Color)value; 
     double Y = 0.2126 * color.ScR + 0.7152 * color.ScG + 0.0722 * color.ScB; 
     return Y > 0.4 ? Brushes.Black : Brushes.White; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     throw new NotSupportedException(); 
    } 
} 
+1

इसी तरह की जमीन यहां शामिल है: [पृष्ठभूमि के आधार पर अग्रभूमि रंग काला या सफेद बनाएं] (http://stackoverflow.com/questions/2241447/make-foregroundcolor-black-or-white-depending-on-background), [अच्छा किसी दिए गए पृष्ठभूमि रंग के लिए पाठ अग्रभूमि रंग] (http://stackoverflow.com/questions/946544/good-text-foreground-color-for-a-given-background-color) और [सी # के लिए आपके पसंदीदा एक्सटेंशन विधियां क्या हैं ?] (http://stackoverflow.com/questions/271398/what-are-your-favorite-extension-methods-for-c-codeplex-com-extensionoverflow/6031710#6031710) – takrl

+0

एक साइड नोट के रूप में, 'कनवर्टबैक 'एक तरफ कनवर्टर्स को' NotSupportedException' फेंकना चाहिए क्योंकि कोई कार्यान्वयन नहीं होगा। –

उत्तर

15

रंग की चमक की गणना करने के कुछ तरीके हैं, इस पर आधारित कि आप केवल एक काला या सफेद पृष्ठभूमि ले सकते हैं और आपको एक सभ्य पठनीयता मिल जाएगी। उदाहरण के लिए luma देखें

वाई = 0.2126 आर + 0.7152 जी + 0।0722 बी

मुझे लगता है कि सीमा 0.5 हो सकता है अगर आप सामान्यीकृत इनपुट मानों (0.0 - 1.0) का उपयोग करें, लेकिन जब से मैं इस प्रयोग किया जाता है यह एक समय हो गया है ...

संपादित करें: उदाहरण परिवर्तित कार्यान्वयन स्केच:

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
{ 
    var c = (Color)value; 
    var l = 0.2126 * c.ScR + 0.7152 * c.ScG + 0.0722 * c.ScB; 

    return l < 0.5 ? Brushes.White : Brushes.Black; 
} 

सीमा वास्तव में प्रदर्शन और व्यक्तिगत पसंद पर थोड़ा निर्भर करता है, एक काले रंग की पृष्ठभूमि के एक बड़े हिस्से में जिसके परिणामस्वरूप कम कुछ पसंद करेंगे के लिए हो सकता है मैं।

+0

काला या सफेद चुनना ऐसा लगता है जैसे यह काम करेगा; अब आप इसे पोस्ट करते समय लुमा फॉर्मूला का उपयोग कर रहे हैं, वाई 0 और 255 के बीच बदल जाएगा; इस बारे में कोई विचार है कि मैं रेत में रेखा खींचूंगा? –

+0

मुझे लगता है कि मैं समझता हूं कि आप 0.5: 0.5 * 255 = 127.5 के साथ क्या मतलब है; अगर> फिर काला पृष्ठभूमि का उपयोग करें, अन्यथा सफेद का उपयोग करें। यादृच्छिक रंगों की एक श्रृंखला के साथ AFAICT, यह बहुत अच्छा काम करता प्रतीत होता है! –

+0

यह देखने का एक तरीका है (आप सभी चैनलों को 255.0, या परिणाम भी विभाजित कर सकते हैं); यह काम करता है, यही कारण है कि मैंने इसे पहले इस्तेमाल किया (दो साल पहले)। –

3

मुझे लगता है कि यह 'औपचारिक' तरीके से एक डिजाइन मुद्दे से अधिक है। तो यह आपके अपने निर्णय के लिए थोड़ा सा है। क्या आप कुछ उदाहरणों को दिखा सकते हैं जो आप प्राप्त करने के लिए तैयार हैं? मैं इन दिनों आपकी समस्या के समान कुछ भी काम कर रहा हूं (ऑनलाइन गैलरी बनाना जो गैलरी में फ़ोटो में रंगों के रंगों के अनुसार अपने बीजी को बदलता है), और मुझे लगता है कि मैं बहुत अच्छी तरह से जा रहा हूं, मेरी सलाह यह है कि, जो भी आप पृष्ठभूमि के रूप में चुनें, पृष्ठभूमि में काले या सफेद की एक परत बनाएं, अपने अग्रभूमि रंग (इसके विपरीत चमक) के आधार पर, और इस तरह आप बीजी को सीमित 'सीमित' कर रहे हैं, उदाहरण के लिए बीजी को काला पर सेट किया जा सकता है, और आपका टेक्स्ट भी काला है, लेकिन बीजी के शीर्ष पर एक सफेद परत है जो टेक्स्ट को पठनीय बनाता है। परत की अस्पष्टता आपको छोड़ दी गई है, कोशिश करें और देखें कि सबसे अच्छा मूल्य क्या है। और आप मूल्य कनवर्टर में पूरी चीज को कार्यान्वित कर सकते हैं, और बीजी + 'परत' संरचना रंग मान से अधिक कुछ नहीं है।

1

एक परियोजना में मैं काम करता हूं जिस पर हमने एक सूत्र पर फैसला किया है जो लाल ग्रीन ब्लू मानों द्वारा रंग को अलग करता है और 255 से लाल हरे और नीले को घटा देता है ताकि निकटतम पूर्ण रंग हो सके।

हालांकि ... ग्रे उन रंगों में से एक है जो इस सूत्र के साथ काम नहीं करेंगे। आप यह देखने के लिए सरल जांच सकते हैं कि घटाव करने से पहले रंग ग्रे है या नहीं। रंगीन स्पेक्ट्रम के दोनों सिरों पर कुछ अन्य रंग हैं जहां आपको एक पठनीय कंक्रास्टिंग रंग प्राप्त करने के लिए अपना हाथ पकड़ना पड़ सकता है।

+0

मुझे नहीं लगता कि यह दृष्टि से आकर्षक होगा, जैसे कि साइन पर लाल, या मैजेंटा पर हरा, आईएमओ देखने के लिए वास्तव में अच्छा नहीं होगा। लेकिन अन्यथा वैसे भी विपरीत बनाने के लिए अच्छा है जब तक कि रंग के करीब भूरे रंग में रंग न हो। –

+0

@can poyrazoğlu - लेखक ने स्पेक्ट्रम के दूसरे छोर पर रंग के विपरीत को खोजने के लिए एक अच्छी विधि मांगी है। इस विधि का उपयोग कर लाल के लिए विपरीत रंग वास्तव में बहुत अच्छा है। हरा पीला; मैं भूल जाता हूं कि यह वास्तव में क्या रंग है। –

3

रामाउंड की आत्मा पूरी तरह से मूल्य 128 के पास प्रत्येक घटक वाले रंगों के लिए असफल हो जाती है (सभी भूरे रंग के सुझाव के अनुसार नहीं) - तो आपको लगभग एक ही रंग मिलता है!

किसी भी रंग आप ग के लिए सबसे विषम (भिन्न) रंग बस

new Color(c.R > .5 ? 0 : 1, c.G > .5 ? 0 : 1, c.B > .5 ? 0 : 1) 

से जाते हैं या यदि आप 0-255 रेंज की जरूरत

new Color(c.R > 127 ? 0 : 255, c.G > 127 ? 0 : 255, c.B > 127 ? 0 : 255) 

दिया पृष्ठभूमि पर यही पाठ दृश्यता allways है सबसे अच्छा, लेकिन हमेशा अच्छा नहीं है। यदि आप पागल रंगों से परेशान नहीं होना चाहते हैं तो आप स्वीकार किए गए उत्तर द्वारा सुझाए गए काले/सफेद का उपयोग करके समाप्त हो जाते हैं।