كيف يمكن العثور على لون خط جيد المظهر إذا كان لون الخلفية معروفًا؟[مغلق]

Question

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

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

هل هناك من يعرف مثل هذا التطبيق؟أفضّل تطبيق الويب على أي شيء يجب علي تنزيله.شكرًا.

Answer 1

إذا كنت بحاجة إلى خوارزمية، حاول هذا: تحويل لون من الفضاء RGB إلى HSV الفضاء (هوى، والتشبع، القيمة). إذا إطار UI الخاص بك لا تستطيع ان تفعل ذلك، تحقق هذا المقال: http://en.wikipedia.org / ويكي / HSL_and_HSV # Conversion_from_RGB_to_HSL_or_HSV

وهوى في [0360). للعثور على "الآخر" لون (اعتقد colorwheel)، وأضيف 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))

واستخدام ذلك.

Answer 2

حسنًا، لا يزال هذا ليس أفضل حل ممكن، ولكنه نقطة جيدة للبدء.لقد كتبت تطبيق Java صغيرًا يحسب نسبة التباين بين لونين ويعالج فقط الألوان بنسبة 5:1 أو أفضل - تم إصدار هذه النسبة والصيغة التي أستخدمها بواسطة W3C ومن المحتمل أن تحل محل التوصية الحالية (والتي أنا أعتبر محدودة للغاية).يقوم بإنشاء ملف في دليل العمل الحالي المسمى "chosen-font-colors.html"، مع لون الخلفية الذي تختاره وسطر نص بكل لون اجتاز اختبار W3C هذا.وتتوقع وسيطة واحدة، كونها لون الخلفية.

على سبيل المثاليمكنك تسميتها هكذا

java FontColorChooser 33FFB4

ثم افتح ملف HTML الذي تم إنشاؤه في متصفح من اختيارك واختر لونًا من القائمة.جميع الألوان المقدمة اجتازت اختبار W3C للون الخلفية هذا.يمكنك تغيير القطع عن طريق استبدال الرقم 5 برقم من اختيارك (الأرقام الأقل تسمح بتباينات أضعف، على سبيل المثال.3 سيتأكد فقط من أن التباين هو 3:1، وسيتأكد 10 من أنه لا يقل عن 10:1) ويمكنك أيضًا قطعه لتجنب التباينات العالية جدًا (من خلال التأكد من أنه أصغر من رقم معين)، على سبيل المثال.إضافة

|| cDiff > 18.0

إلى شرط if سيتأكد من أن التباين لن يكون متطرفًا جدًا، حيث أن التباينات الشديدة جدًا يمكن أن تضغط على عينيك.إليك الكود واستمتع باللعب به قليلاً :-)

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);
    }
}

Answer 3

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

Answer 4

ولقد نفذت شيئا من هذا القبيل لسبب مختلف - التي كانت متاحة لنقول للمستخدم النهائي سواء الأمامية والخلفية الألوان التي اختاروها من شأنه أن يؤدي في نص قابل للقراءة. للقيام بذلك، بدلا من دراسة القيم RGB، وتحويل قيمة اللون لHSL / HSV ومن ثم تحديدها من قبل التجريب ما كانت نقطة قطع بلدي من أجل قراءة عند مقارنة قيم FG وحرس الحدود. هذا شيء قد ترغب / تحتاج للنظر فيها.

Answer 5

في تطبيق الأخير الذي أدليت به، واستخدمت الألوان مقلوب. مع ص، ز، ب القيم في متناول اليد، وحساب فقط (في هذا المثال، ومجموعة اللون يختلف 0-255):

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

Answer 6

قد يكون من الغريب الإجابة على سؤالي، ولكن إليك منتقي ألوان رائع آخر لم أره من قبل.إنه لا يحل مشكلتي أيضًا :-(((( ومع ذلك أعتقد أنه أكثر برودة بكثير بالنسبة لأولئك الذين أعرفهم بالفعل.

http://www.colorjack.com/

على اليمين، ضمن الأدوات، حدد "Color Sphere"، وهي كرة قوية جدًا وقابلة للتخصيص (انظر ما يمكنك فعله باستخدام النوافذ المنبثقة في الأعلى)، و"Color Galaxy"، ما زلت غير متأكد من كيفية عمل ذلك، ولكن يبدو رائع و"Color Studio" جميل أيضًا.علاوة على ذلك، يمكنه التصدير إلى جميع أنواع التنسيقات (على سبيل المثال.المصور أو الفوتوشوب، الخ.)

ماذا عن هذا، أختار لون الخلفية الخاص بي هناك، وأسمح له بإنشاء لون مجاني (من النافذة المنبثقة الأولى) - يجب أن يكون هذا أعلى تباين وبالتالي يكون أفضل للقراءة، الآن حدد اللون التكميلي كلون رئيسي وحدد اللون المحايد؟أمم...ليست رائعة أيضًا، ولكننا نتحسن ;-)

Answer 7

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

Answer 8

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

Answer 9

وأنا شخصيا لا أعتقد أننا يمكن معرفة خوارزمية لحساب لون النص الأكثر مطابقة لتحديد لون الخلفية.

وأعتقد حاليا يجب أن يكون الفنان قائمة أزواج اللون الذي لديه نوعية القراءة جيدة، ويمكننا إضافتها إلى الجدول، ومجموعة واحدة من هذه الأزواج كما عشوائيا لدينا <م> قراءة موضوع ...

وهذا هو معقول من ذلك بكثير، ونحن لن تحصل على أزواج لون قبيح ....