Làm cách nào để tìm màu chữ đẹp nếu bạn biết màu nền? [đóng cửa]


86

Có vẻ như có rất nhiều ứng dụng web bánh xe màu, công cụ chọn màu và trình phối màu ngoài kia, nơi bạn đưa ra một màu và họ sẽ tìm thấy một vài màu khác sẽ tạo ra bố cục hài hòa khi được sử dụng kết hợp. Tuy nhiên, hầu hết chúng chỉ tập trung vào màu nền và bất kỳ văn bản nào được in trên mỗi màu nền (nếu văn bản được in ở bản xem trước) đều có màu đen hoặc trắng.

Vấn đề của tôi là khác. Tôi biết màu nền mà tôi muốn sử dụng cho một vùng văn bản. Điều tôi cần trợ giúp là chọn một vài màu (càng nhiều, càng hợp) mà tôi có thể sử dụng làm màu phông chữ trên nền này. Điều quan trọng nhất là màu sắc sẽ đảm bảo phông chữ có thể đọc được (độ tương phản không quá thấp, cũng có thể không quá cao để tránh gây căng thẳng cho mắt) và tất nhiên sự kết hợp giữa tiền cảnh và hậu cảnh trông đẹp.

Bất cứ ai nhận thức được một ứng dụng như vậy? Tôi thích một ứng dụng web hơn bất cứ thứ gì tôi phải tải xuống. Cảm ơn.

Câu trả lời:


39

Nếu bạn cần một thuật toán, hãy thử cách này: Chuyển đổi màu từ không gian RGB sang không gian HSV (Hue, Saturation, Value). Nếu khung giao diện người dùng của bạn không thể làm điều đó, hãy xem bài viết này: http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV

Huế là [0,360). Để tìm màu "đối lập" (nghĩ là colorwheel), chỉ cần thêm 180 độ:

h = (h + 180) % 360;

Đối với độ bão hòa và giá trị, hãy đảo ngược chúng:

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

Chuyển đổi trở lại RGB. Điều này sẽ luôn mang lại cho bạn độ tương phản cao mặc dù hầu hết các kết hợp sẽ trông xấu xí.

Nếu bạn muốn tránh phần "xấu", hãy xây dựng một bảng với một số kết hợp "tốt", tìm kết hợp có ít sự khác biệt nhất

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

và sử dụng nó.


4

Được rồi, đây vẫn không phải là giải pháp tốt nhất có thể, nhưng là một điểm tốt để bắt đầu. Tôi đã viết một ứng dụng Java nhỏ để tính toán tỷ lệ tương phản của hai màu và chỉ xử lý các màu có tỷ lệ 5: 1 trở lên - tỷ lệ này và công thức tôi sử dụng đã được W3C phát hành và có thể sẽ thay thế đề xuất hiện tại ( Tôi xem xét rất hạn chế). Nó tạo một tệp trong dir đang hoạt động hiện tại có tên là "selected-font-Colors.html", với màu nền bạn chọn và một dòng văn bản bằng mọi màu đã vượt qua bài kiểm tra W3C này. Nó mong đợi một đối số duy nhất, là màu nền.

Ví dụ bạn có thể gọi nó như thế này

java FontColorChooser 33FFB4

sau đó chỉ cần mở tệp HTML đã tạo trong trình duyệt bạn chọn và chọn một màu từ danh sách. Tất cả các màu được đưa ra đều vượt qua bài kiểm tra W3C cho màu nền này. Bạn có thể thay đổi phần cắt bỏ bằng cách thay thế số 5 bằng một số bạn chọn (các số thấp hơn cho phép độ tương phản yếu hơn, ví dụ: 3 sẽ chỉ đảm bảo độ tương phản là 3: 1, 10 sẽ đảm bảo ít nhất là 10: 1) và bạn cũng có thể cắt bỏ để tránh độ tương phản quá cao (bằng cách đảm bảo rằng nó nhỏ hơn một số nhất định), ví dụ như thêm

|| cDiff > 18.0

đối với mệnh đề if sẽ đảm bảo rằng độ tương phản sẽ không quá cực đoan, vì sự tương phản quá lớn có thể khiến mắt bạn căng thẳng. Đây là mã và vui chơi với nó một chút :-)

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

Thêm một, tính toán tương phản, chính xác những gì tôi đang tìm kiếm.
Max Kielland

2

Đây là một câu hỏi thú vị, nhưng tôi không nghĩ rằng điều này thực sự có thể. Hai màu có "phù hợp" làm màu nền và màu nền hay không phụ thuộc vào công nghệ hiển thị và đặc điểm sinh lý của thị giác con người, nhưng quan trọng nhất là phụ thuộc vào sở thích cá nhân được định hình bởi kinh nghiệm. Chạy nhanh qua MySpace cho thấy khá rõ ràng rằng không phải tất cả con người đều cảm nhận màu sắc theo cùng một cách. Tôi không nghĩ đây là một vấn đề có thể được giải quyết bằng thuật toán, mặc dù có thể có một cơ sở dữ liệu khổng lồ ở đâu đó về các màu phù hợp có thể chấp nhận được.


2

Tôi đã triển khai một thứ tương tự vì một lý do khác - đó là mã để cho người dùng cuối biết liệu màu nền trước và màu nền mà họ đã chọn có dẫn đến văn bản không thể đọc được hay không. Để làm điều này, thay vì kiểm tra các giá trị RGB, tôi đã chuyển đổi giá trị màu thành HSL / HSV và sau đó xác định bằng thử nghiệm xem điểm giới hạn của tôi là gì để có thể đọc được khi so sánh các giá trị fg và bg. Đây là điều bạn có thể muốn / cần xem xét.


2

Trong một ứng dụng gần đây mà tôi đã tạo, tôi đã sử dụng các màu đảo ngược. Với các giá trị r, g và b trong tay, chỉ cần tính toán (trong ví dụ này, dải màu thay đổi từ 0 đến 255):

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

1

Có thể hơi lạ khi trả lời câu hỏi của riêng tôi, nhưng đây là một công cụ chọn màu thực sự thú vị khác mà tôi chưa từng thấy trước đây. Nó cũng không giải quyết được vấn đề của tôi: - ((((tuy nhiên tôi nghĩ rằng nó mát mẻ hơn nhiều với những thứ tôi biết rồi.

http://www.colorjack.com/

Ở bên phải, bên dưới Công cụ, chọn "Color Sphere", một hình cầu rất mạnh mẽ và có thể tùy chỉnh (xem bạn có thể làm gì với cửa sổ bật lên ở trên cùng), "Color Galaxy", tôi vẫn không chắc cách này hoạt động, nhưng có vẻ mát mẻ và "Color Studio" cũng đẹp. Hơn nữa, nó có thể xuất sang tất cả các loại định dạng (ví dụ: Illustrator hoặc Photoshop, v.v.)

Còn điều này thì sao, tôi chọn màu nền của mình ở đó, để nó tạo ra một màu bổ sung (từ cửa sổ bật lên đầu tiên) - màu này phải có độ tương phản cao nhất và do đó dễ đọc nhất, bây giờ hãy chọn màu bổ sung làm màu chính và chọn màu trung tính? Hmmm ... cũng không quá tuyệt, nhưng chúng tôi đang trở nên tốt hơn ;-)


Không, không có gì lạ khi trả lời câu hỏi của riêng bạn, tôi đã tự mình làm vài lần và việc nhận được câu trả lời chỉ khiến cộng đồng hài lòng hơn.
Dillie-O

0

Bạn đã cân nhắc việc cho phép người dùng ứng dụng của mình chọn bảng màu của riêng họ chưa? Nếu không, bạn sẽ không thể làm hài lòng tất cả người dùng với lựa chọn của mình nhưng bạn có thể cho phép họ tìm thấy những gì làm hài lòng họ.


1
Không có gì sai khi để người dùng quyết định, nhưng ít nhất tôi vẫn nên bao gồm một chủ đề màu mặc định hữu ích, phải không? Nó không thể là nó không thể đọc được và xấu xí như địa ngục theo mặc định đến từng sửa chữa sử dụng nó ;-)
Mecki

0

Tương tự như đề xuất của @Aaron Digulla ngoại trừ việc tôi sẽ đề xuất một công cụ thiết kế đồ họa, chọn màu cơ bản, trong trường hợp của bạn là màu nền, sau đó điều chỉnh Hue, Saturation và Value. Sử dụng điều này, bạn có thể tạo các mẫu màu rất dễ dàng. Paint.Net là miễn phí và tôi sử dụng nó mọi lúc cho việc này và các công cụ trả phí cũng sẽ làm việc này.


0

Cá nhân tôi không nghĩ rằng chúng ta có thể tìm ra một thuật toán để tính toán màu văn bản phù hợp nhất bằng cách chỉ định màu nền.

Tôi nghĩ hiện tại họa sĩ nên có một danh sách các cặp màu có chất lượng đọc tốt, chúng tôi có thể thêm chúng vào bảng và đặt ngẫu nhiên một trong các cặp này làm chủ đề đọc của chúng tôi ...

điều này rất hợp lý, và chúng tôi sẽ không nhận được các cặp màu xấu xí ....

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.