यदि पृष्ठभूमि रंग ज्ञात हो तो अच्छा दिखने वाला फ़ॉन्ट रंग कैसे प्राप्त करें? [बन्द है]


86

ऐसा लगता है कि बहुत सारे रंग पहिया, रंग बीनने वाले, और रंग मिलान करने वाले वेब ऐप हैं, जहां आप एक रंग देते हैं और वे कुछ अन्य रंगों को खोजेंगे जो संयोजन में उपयोग किए जाने पर एक हार्मोनिक लेआउट बनाएंगे। हालाँकि, उनमें से अधिकांश केवल पृष्ठभूमि के रंगों पर ध्यान केंद्रित करते हैं और प्रत्येक पृष्ठभूमि रंग पर मुद्रित कोई भी पाठ (यदि पाठ पूर्वावलोकन में बिल्कुल मुद्रित होता है) या तो काला या सफेद होता है।

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

किसी को भी इस तरह के एक आवेदन के बारे में पता किया जा रहा है? मुझे जो कुछ भी डाउनलोड करना है उसके लिए मैं वेब एप्लिकेशन पसंद करूंगा। धन्यवाद।

जवाबों:


39

यदि आपको एक एल्गोरिथ्म की आवश्यकता है, तो यह कोशिश करें: आरजीबी अंतरिक्ष से एचएसवी अंतरिक्ष (ह्यू, संतृप्ति, मूल्य) के लिए रंग बदलें। यदि आपका UI फ्रेमवर्क ऐसा नहीं कर सकता है, तो इस लेख को देखें: http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV

ह्यू [0,360) में है। "विपरीत" रंग खोजने के लिए (रंगव्हील सोचो), बस 180 डिग्री जोड़ें:

h = (h + 180) % 360;

संतृप्ति और मूल्य के लिए, उन्हें उल्टा करें:

l = 1.0 - l;
v = 1.0 - v;

RGB में कनवर्ट करें। यह आपको हमेशा एक उच्च विपरीत देना चाहिए, भले ही अधिकांश संयोजन बदसूरत दिखेंगे।

यदि आप "बदसूरत" भाग से बचना चाहते हैं, तो कई "अच्छे" संयोजनों के साथ एक तालिका बनाएं, कम से कम अंतर के साथ एक को ढूंढें

def q(x):
    return x*x
def diff(col1, col2):
    return math.sqrt(q(col1.r-col2.r) + q(col1.g-col2.g) + q(col1.b-col2.b))

और उस का उपयोग करें।


4

ठीक है, यह अभी भी सबसे अच्छा संभव समाधान नहीं है, लेकिन शुरू करने के लिए एक अच्छा बिंदु है। मैंने थोड़ा जावा ऐप लिखा है जो दो रंगों के विपरीत अनुपात की गणना करता है और केवल 5: 1 या बेहतर के अनुपात के साथ रंगों को संसाधित करता है - यह अनुपात और मेरे द्वारा उपयोग किया गया सूत्र W3C द्वारा जारी किया गया है और संभवतः वर्तमान अनुशंसा को प्रतिस्थापित करेगा (जो मैं बहुत सीमित मानता हूं)। यह "चुनी-फॉन्ट-कलर्स.html" नाम के मौजूदा वर्किंग डायर में एक फाइल बनाता है, जिसमें आपकी पसंद का बैकग्राउंड कलर और हर कलर में टेक्स्ट की एक लाइन होती है जो इस W3C टेस्ट को पास करती है। यह एक ही तर्क की उम्मीद करता है, पृष्ठभूमि का रंग होना।

जैसे आप इसे इस तरह कह सकते हैं

java FontColorChooser 33FFB4

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

|| cDiff > 18.0

अगर क्लॉज सुनिश्चित करेगा कि कंट्रास्ट बहुत ज्यादा चरम नहीं होगा, क्योंकि बहुत ज्यादा कंट्रास्ट आपकी आंखों को तनाव दे सकता है। यहाँ कोड है और यह एक बिट के साथ चारों ओर खेल मज़ा है :-)

import java.io.*;

/* For text being readable, it must have a good contrast difference. Why?
 * Your eye has receptors for brightness and receptors for each of the colors
 * red, green and blue. However, it has much more receptors for brightness
 * than for color. If you only change the color, but both colors have the
 * same contrast, your eye must distinguish fore- and background by the
 * color only and this stresses the brain a lot over the time, because it
 * can only use the very small amount of signals it gets from the color
 * receptors, since the breightness receptors won't note a difference.
 * Actually contrast is so much more important than color that you don't
 * have to change the color at all. E.g. light red on dark red reads nicely
 * even though both are the same color, red.
 */


public class FontColorChooser {
    int bred;
    int bgreen;
    int bblue;

    public FontColorChooser(String hexColor) throws NumberFormatException {
        int i;

        i = Integer.parseInt(hexColor, 16);
        bred = (i >> 16);
        bgreen = (i >> 8) & 0xFF;
        bblue = i & 0xFF;
    }

    public static void main(String[] args) {
        FontColorChooser fcc;

        if (args.length == 0) {
            System.out.println("Missing argument!");
            System.out.println(
                "The first argument must be the background" +
                "color in hex notation."
            );
            System.out.println(
                "E.g. \"FFFFFF\" for white or \"000000\" for black."
            );
            return;
        }
        try {
            fcc = new FontColorChooser(args[0]);
        } catch (Exception e) {
            System.out.println(
                args[0] + " is no valid hex color!"
            );
            return;
        }
        try {
            fcc.start();
        } catch (IOException e) {
            System.out.println("Failed to write output file!");
        }
    }

    public void start() throws IOException {
        int r;
        int b;
        int g;
        OutputStreamWriter out;

        out = new OutputStreamWriter(
            new FileOutputStream("chosen-font-colors.html"),
            "UTF-8"
        );

        // simple, not W3C comform (most browsers won't care), HTML header
        out.write("<html><head><title>\n");
        out.write("</title><style type=\"text/css\">\n");
        out.write("body { background-color:#");
        out.write(rgb2hex(bred, bgreen, bblue));
        out.write("; }\n</style></head>\n<body>\n");

        // try 4096 colors
        for (r = 0; r <= 15; r++) {
            for (g = 0; g <= 15; g++) {
                for (b = 0; b <= 15; b++) {
                    int red;
                    int blue;
                    int green;
                    double cDiff;

                    // brightness increasse like this: 00, 11,22, ..., ff
                    red = (r << 4) | r;
                    blue = (b << 4) | b;
                    green = (g << 4) | g;

                    cDiff = contrastDiff(
                        red, green, blue,
                        bred, bgreen, bblue
                    );
                    if (cDiff < 5.0) continue;
                    writeDiv(red, green, blue, out);
                }
            }
        }

        // finalize HTML document
        out.write("</body></html>");

        out.close();
    }

    private void writeDiv(int r, int g, int b, OutputStreamWriter out)
        throws IOException
    {
        String hex;

        hex = rgb2hex(r, g, b);
        out.write("<div style=\"color:#" + hex + "\">");
        out.write("This is a sample text for color " + hex + "</div>\n");
    }

    private double contrastDiff(
        int r1, int g1, int b1, int r2, int g2, int b2
    ) {
        double l1;
        double l2;

        l1 = ( 
            0.2126 * Math.pow((double)r1/255.0, 2.2) +
            0.7152 * Math.pow((double)g1/255.0, 2.2) +
            0.0722 * Math.pow((double)b1/255.0, 2.2) +
            0.05
        );
        l2 = ( 
            0.2126 * Math.pow((double)r2/255.0, 2.2) +
            0.7152 * Math.pow((double)g2/255.0, 2.2) +
            0.0722 * Math.pow((double)b2/255.0, 2.2) +
            0.05
        );

        return (l1 > l2) ? (l1 / l2) : (l2 / l1);
    }

    private String rgb2hex(int r, int g, int b) {
        String rs = Integer.toHexString(r);
        String gs = Integer.toHexString(g);
        String bs = Integer.toHexString(b);
        if (rs.length() == 1) rs = "0" + rs;
        if (gs.length() == 1) gs = "0" + gs;
        if (bs.length() == 1) bs = "0" + bs;
        return (rs + gs + bs);
    }
}

इसके अलावा एक, इसके विपरीत गणना, वास्तव में मैं क्या देख रहा था।
मैक्स किंडल डेस

2

यह एक दिलचस्प सवाल है, लेकिन मुझे नहीं लगता कि यह वास्तव में संभव है। पृष्ठभूमि और अग्रभूमि रंगों के रूप में "फिट" दो रंग हैं या नहीं, यह मानवीय दृष्टि की प्रदर्शन तकनीक और शारीरिक विशेषताओं पर निर्भर है, लेकिन सबसे महत्वपूर्ण बात यह है कि अनुभव के आधार पर व्यक्तिगत स्वाद। माइस्पेस के माध्यम से एक त्वरित रन बहुत स्पष्ट रूप से दिखाता है कि सभी मनुष्य एक ही तरह से रंगों का अनुभव नहीं करते हैं। मुझे नहीं लगता कि यह एक ऐसी समस्या है जिसे एल्गोरिथ्म में हल किया जा सकता है, हालांकि स्वीकार्य मिलान रंगों का कहीं बड़ा डेटाबेस हो सकता है।


2

मैंने एक अलग कारण के लिए कुछ समान लागू किया है - यह अंत उपयोगकर्ता को यह बताने के लिए कोड था कि क्या उनके द्वारा चुने गए अग्रभूमि और पृष्ठभूमि के रंगों का परिणाम अपठनीय पाठ में होगा। ऐसा करने के लिए, आरजीबी मूल्यों की जांच करने के बजाय, मैंने एचएसएल / एचएसवी का रंग मूल्य बदल दिया और फिर प्रयोग द्वारा निर्धारित किया कि एफजी और बीजी मूल्यों की तुलना करते समय मेरी कटऑफ बिंदु पठनीयता के लिए क्या थी। यह ऐसी चीज है जिस पर आप विचार कर सकते हैं।


2

हाल ही में एक आवेदन में जो मैंने बनाया, मैंने उल्टे रंगों का उपयोग किया। हाथ में आर, जी और बी मानों के साथ, बस गणना करें (इस उदाहरण में, रंग सीमा 0 से 255 तक भिन्न होती है):

r = 127-(r-127) and so on.

1

मेरे खुद के सवाल का जवाब देने के लिए अजीब हो सकता है, लेकिन यहाँ एक और अच्छा रंग बीनने वाला है जो मैंने पहले कभी नहीं देखा था। यह या तो मेरी समस्या का समाधान नहीं करता है: - (((हालांकि, लेकिन मुझे लगता है कि यह मेरे लिए बहुत अच्छा है, मुझे पहले से ही पता है।

http://www.colorjack.com/

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

इसके बारे में, मैं वहां अपना बैकग्राउंड कलर चुनता हूं, इसे कॉम्प्लीमेंट कलर (पहले पॉप अप से) बनाने देता हूं - इसमें सबसे ज्यादा कंट्रास्ट होना चाहिए और इस तरह बेस्ट रीडेबल होना चाहिए, अब कॉम्प्लिमेंट्री कलर को मेन कलर के रूप में चुनें और न्यूट्रल का चयन करें? हम्मम ... या तो बहुत अच्छा नहीं है, लेकिन हम बेहतर हो रहे हैं ;-)


नहीं, यह आपके अपने सवाल का जवाब देने के लिए बिल्कुल भी अजीब नहीं है, मैंने इसे खुद से कुछ बार करने के लिए घाव किया है और वहां से जवाब मिलने पर केवल समुदाय को धोखा देता है।
15:29 बजे दिली-ओ

0

क्या आपने अपने एप्लिकेशन के उपयोगकर्ता को अपनी रंग योजना चुनने देने पर विचार किया है? बिना असफल आप अपने चयन के साथ अपने सभी उपयोगकर्ताओं को खुश नहीं कर पाएंगे, लेकिन आप उन्हें यह पता लगाने की अनुमति दे सकते हैं कि उन्हें क्या पसंद है।


1
उपयोगकर्ता को निर्णय लेने देने में कुछ भी गलत नहीं है, लेकिन मुझे अभी भी कम से कम एक उपयोगी डिफ़ॉल्ट रंग विषय शामिल करना चाहिए, क्या मुझे नहीं करना चाहिए? यह नहीं हो सकता है कि यह डिफ़ॉल्ट रूप से नरक के रूप में अपठनीय और बदसूरत है जब तक कि प्रत्येक उपयोगकर्ता इसे ठीक नहीं करता; ;-)
Mecki

0

@Aaron Digulla के सुझाव के समान, सिवाय इसके कि मैं एक ग्राफिक्स डिज़ाइन टूल का सुझाव दूंगा, आधार रंग का चयन करें, आपके मामले में पृष्ठभूमि का रंग, फिर ह्यू, संतृप्ति और मान समायोजित करें। इसके इस्तेमाल से आप बहुत आसानी से कलर स्वैच बना सकते हैं। पेंट.नेट मुफ्त है और मैं इसके लिए हर समय उपयोग करता हूं और पे-टू-टूल्स भी ऐसा करेंगे।


0

व्यक्तिगत रूप से मुझे नहीं लगता कि हम पृष्ठभूमि के रंग को निर्दिष्ट करके सबसे मिलान किए गए पाठ रंग की गणना करने के लिए एक एल्गोरिथ्म का पता लगा सकते हैं।

मुझे लगता है कि वर्तमान में कलाकार के पास रंग जोड़े की एक सूची होनी चाहिए, जिसमें अच्छी पठन गुणवत्ता हो, हम उन्हें एक तालिका में जोड़ सकते हैं, और इनमें से एक जोड़े को यादृच्छिक रूप से हमारे पढ़ने के विषय के रूप में सेट कर सकते हैं ...

यह बहुत ही उचित है, और हमें बदसूरत रंग जोड़े नहीं मिलेंगे ...।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.