จะค้นหาสีตัวอักษรที่ดูดีได้อย่างไรหากทราบสีพื้นหลัง? [ปิด]


86

ดูเหมือนจะมีวงล้อสีตัวเลือกสีและแอปพลิเคชันเว็บตัวจับคู่สีมากมายที่คุณให้สีเดียวและพวกเขาจะพบสีอื่น ๆ อีกสองสามสีที่จะสร้างเลย์เอาต์ฮาร์มอนิกเมื่อใช้ร่วมกัน อย่างไรก็ตามส่วนใหญ่เน้นที่สีพื้นหลังเท่านั้นและข้อความใด ๆ ที่พิมพ์บนพื้นหลังแต่ละสี (หากพิมพ์ข้อความทั้งหมดในภาพตัวอย่าง) จะเป็นสีดำหรือสีขาว

ปัญหาของฉันแตกต่างออกไป ฉันรู้สีพื้นหลังที่ต้องการใช้สำหรับพื้นที่ข้อความ สิ่งที่ฉันต้องการความช่วยเหลือคือการเลือกสีสองสี (ยิ่งมากยิ่งมีมากขึ้น) ฉันสามารถใช้เป็นสีตัวอักษรบนพื้นหลังนี้ได้ สิ่งสำคัญที่สุดคือสีจะช่วยให้แน่ใจว่าฟอนต์สามารถอ่านได้ (คอนทราสต์ไม่ต่ำเกินไปและอาจจะไม่สูงเกินไปเพื่อไม่ให้ดวงตาเครียด) และแน่นอนว่าการผสมผสานระหว่างฉากหน้าและพื้นหลังก็ดูดี

ใครทราบแอปพลิเคชันดังกล่าว? ฉันต้องการเว็บแอปพลิเคชันอะไรก็ได้ที่ต้องดาวน์โหลด ขอบคุณ.

คำตอบ:


39

หากคุณต้องการอัลกอริทึมให้ลองทำดังนี้: แปลงสีจากสเปซ RGB เป็นสเปซ HSV (เว้, ความอิ่มตัว, ค่า) หากกรอบ 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

โอเคนี่ยังไม่ใช่วิธีแก้ปัญหาที่ดีที่สุด แต่เป็นจุดเริ่มต้นที่ดี ฉันเขียนแอป Java เล็กน้อยที่คำนวณอัตราส่วนคอนทราสต์ของสองสีและประมวลผลเฉพาะสีที่มีอัตราส่วน 5: 1 หรือดีกว่า - อัตราส่วนนี้และสูตรที่ฉันใช้ได้รับการเผยแพร่โดย W3C และอาจจะแทนที่คำแนะนำปัจจุบัน (ซึ่ง ฉันถือว่า จำกัด มาก) มันสร้างไฟล์ในไดรฟ์ที่ทำงานปัจจุบันชื่อ "selected-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);
    }
}

บวกหนึ่งการคำนวณคอนทราสต์สิ่งที่ฉันกำลังมองหา
Max Kielland

2

นี่เป็นคำถามที่น่าสนใจ แต่ฉันไม่คิดว่าจะเป็นไปได้จริง การ "พอดี" สองสีในฐานะพื้นหลังและสีพื้นหน้านั้นขึ้นอยู่กับเทคโนโลยีการแสดงผลและลักษณะทางสรีรวิทยาของการมองเห็นของมนุษย์หรือไม่ แต่ที่สำคัญที่สุดขึ้นอยู่กับรสนิยมส่วนตัวที่เกิดจากประสบการณ์ การวิ่งอย่างรวดเร็วผ่าน MySpace แสดงให้เห็นอย่างชัดเจนว่าไม่ใช่มนุษย์ทุกคนที่รับรู้สีในลักษณะเดียวกัน ฉันไม่คิดว่านี่เป็นปัญหาที่สามารถแก้ไขได้โดยอัลกอริทึมแม้ว่าอาจจะมีฐานข้อมูลขนาดใหญ่ที่มีสีที่เข้ากันได้


2

ฉันได้ใช้สิ่งที่คล้ายกันด้วยเหตุผลอื่นนั่นคือรหัสเพื่อบอกผู้ใช้ปลายทางว่าสีพื้นหน้าและพื้นหลังที่พวกเขาเลือกจะส่งผลให้ข้อความไม่สามารถอ่าน ในการทำเช่นนี้แทนที่จะตรวจสอบค่า RGB ฉันแปลงค่าสีเป็น HSL / HSV แล้วพิจารณาจากการทดลองว่าจุดตัดของฉันคืออะไรเพื่อให้อ่านได้ง่ายเมื่อเปรียบเทียบค่า fg และ bg นี่คือสิ่งที่คุณอาจต้องการ / จำเป็นต้องพิจารณา


2

ในแอปพลิเคชันล่าสุดที่ฉันทำฉันใช้สีกลับหัว ด้วยค่า r, g และ b ในมือให้คำนวณ (ในตัวอย่างนี้ช่วงสีจะแตกต่างกันไปตั้งแต่ 0 ถึง 255):

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

1

อาจจะแปลกที่จะตอบคำถามของตัวเอง แต่นี่เป็นอีกตัวเลือกสีที่ยอดเยี่ยมที่ฉันไม่เคยเห็นมาก่อน มันไม่ช่วยแก้ปัญหาของฉันด้วย: - (((แต่ฉันคิดว่ามันเจ๋งกว่ามากสำหรับสิ่งเหล่านี้ที่ฉันรู้อยู่แล้ว

http://www.colorjack.com/

ทางด้านขวาภายใต้เครื่องมือให้เลือก "Color Sphere" ซึ่งเป็นทรงกลมที่ทรงพลังและปรับแต่งได้มาก (ดูสิ่งที่คุณสามารถทำได้จากป๊อปอัปด้านบน) "กาแล็กซี่สี" ฉันยังไม่แน่ใจว่ามันทำงานอย่างไร แต่ดู เจ๋งและ "Colour Studio" ก็ดีด้วย นอกจากนี้ยังสามารถส่งออกไปยังทุกรูปแบบ (เช่น Illustrator หรือ Photoshop เป็นต้น)

เกี่ยวกับเรื่องนี้ฉันเลือกสีพื้นหลังของฉันที่นั่นปล่อยให้มันสร้างสีฟรี (จากป๊อปอัปแรก) - สิ่งนี้ควรมีความเปรียบต่างสูงสุดและอ่านได้ดีที่สุดตอนนี้เลือกสีเสริมเป็นสีหลักและเลือกสีกลาง? อืม ... ก็ไม่มากเหมือนกัน แต่เราจะดีขึ้นเรื่อย ๆ


ไม่แปลกเลยที่จะตอบคำถามของคุณเองฉันเคยทำแบบนี้มาสองสามครั้งแล้วและได้รับคำตอบที่ดีกว่าชุมชนเท่านั้น
Dillie-O

0

คุณได้พิจารณาให้ผู้ใช้แอปพลิเคชันของคุณเลือกโทนสีของตนเองหรือไม่? หากไม่ล้มเหลวคุณจะไม่สามารถทำให้ผู้ใช้ทุกคนพอใจด้วยการเลือกของคุณ แต่คุณสามารถอนุญาตให้พวกเขาค้นหาสิ่งที่พวกเขาพอใจได้


1
ไม่มีอะไรผิดในการปล่อยให้ผู้ใช้ตัดสินใจ แต่อย่างน้อยฉันก็ควรใส่ธีมสีเริ่มต้นที่มีประโยชน์ด้วยใช่ไหม เป็นไปไม่ได้ที่มันจะอ่านไม่ออกและน่าเกลียดเป็นค่าเริ่มต้นจนกว่าผู้ใช้แต่ละคนจะแก้ไข ;-)
Mecki

0

คล้ายกับคำแนะนำของ @Aaron Digulla ยกเว้นว่าฉันจะแนะนำเครื่องมือออกแบบกราฟิกให้เลือกสีพื้นฐานในกรณีของคุณเป็นสีพื้นหลังจากนั้นปรับเฉดสีความอิ่มตัวและค่า ใช้สิ่งนี้คุณสามารถสร้างแถบสีได้อย่างง่ายดาย Paint.Net ฟรีและฉันใช้มันตลอดเวลาสำหรับสิ่งนี้และเครื่องมือที่ต้องจ่ายเงินก็จะทำเช่นนี้ด้วย


0

โดยส่วนตัวแล้วฉันไม่คิดว่าเราจะหาอัลกอริทึมในการคำนวณสีข้อความที่ตรงกันมากที่สุดได้โดยการระบุสีพื้นหลัง

ฉันคิดว่าตอนนี้ศิลปินควรมีรายการคู่สีที่มีคุณภาพการอ่านที่ดีเราสามารถเพิ่มลงในตารางและตั้งค่าคู่เหล่านี้แบบสุ่มเป็นธีมการอ่านของเรา...

มันสมเหตุสมผลมากและเราจะไม่ได้คู่สีที่น่าเกลียด ....

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.