Bagaimana menemukan warna font yang bagus jika warna latar belakang diketahui? [Tutup]

Tampaknya ada begitu banyak aplikasi web roda warna, pemilih warna, dan pencocokan warna di luar sana, di mana Anda memberi satu warna dan mereka akan menemukan beberapa warna lain yang akan menciptakan tata letak yang harmonis saat digunakan dalam kombinasi. Namun kebanyakan dari mereka fokus pada warna latar belakang saja dan teks yang dicetak pada setiap warna latar belakang (jika teks sama sekali dicetak dalam pratinjau) berwarna hitam atau putih.

Masalah saya berbeda. Saya tahu warna latar belakang yang ingin saya gunakan untuk area teks. Yang saya perlukan bantuannya adalah memilih beberapa warna (semakin banyak, semakin meriah) yang bisa saya gunakan sebagai warna font pada latar belakang ini. Yang paling penting adalah bahwa warna akan memastikan font dapat dibaca (kontras tidak terlalu rendah, juga mungkin tidak terlalu tinggi untuk menghindari mata tertekan) dan tentu saja kombinasi latar depan dan latar belakang terlihat bagus.

Adakah yang tahu tentang aplikasi seperti itu? Saya lebih suka aplikasi web daripada apa pun yang harus saya unduh. Terima kasih.

Jika Anda memerlukan algoritme, coba ini: Ubah warna dari ruang RGB ke ruang HSV (Hue, Saturation, Value). Jika kerangka UI Anda tidak dapat melakukannya, periksa artikel ini: http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV

Rona dalam [0,360). Untuk menemukan warna "berlawanan" (pikirkan roda warna), tambahkan saja 180 derajat:

h = (h + 180) % 360;

Untuk saturasi dan nilai, balikkan:

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

Ubah kembali ke RGB. Ini harus selalu memberi Anda kontras yang tinggi meskipun sebagian besar kombinasi akan terlihat jelek.

Jika Anda ingin menghindari bagian yang "jelek", buat tabel dengan beberapa kombinasi yang "baik", temukan satu dengan perbedaan terkecil

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

dan gunakan itu.

Oke, ini masih bukan solusi terbaik, tapi titik bagus untuk memulai. Saya menulis aplikasi Java kecil yang menghitung rasio kontras dua warna dan hanya memproses warna dengan rasio 5: 1 atau lebih baik - rasio ini dan rumus yang saya gunakan telah dirilis oleh W3C dan mungkin akan menggantikan rekomendasi saat ini (yang mana Saya anggap sangat terbatas). Ini membuat file di direktori kerja saat ini bernama "selected-font-colors.html", dengan warna latar pilihan Anda dan baris teks di setiap warna yang lulus tes W3C ini. Ini mengharapkan satu argumen, menjadi warna latar belakang.

Misalnya Anda bisa menyebutnya seperti ini

java FontColorChooser 33FFB4

kemudian cukup buka file HTML yang dihasilkan di browser pilihan Anda dan pilih warna dari daftar. Semua warna yang diberikan lulus uji W3C untuk warna latar ini. Anda dapat mengubah batas dengan mengganti 5 dengan nomor pilihan Anda (angka yang lebih rendah memungkinkan kontras yang lebih lemah, misalnya 3 hanya akan memastikan kontras adalah 3: 1, 10 akan memastikan setidaknya 10: 1) dan Anda juga bisa potong untuk menghindari kontras yang terlalu tinggi (dengan memastikan nilainya lebih kecil dari angka tertentu), misalnya menambahkan

|| cDiff > 18.0

ke klausa if akan memastikan kontras tidak terlalu ekstrem, karena kontras yang terlalu ekstrem dapat membuat mata Anda stres. Ini kodenya dan bersenang-senang sedikit dengannya :-)

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

Ini adalah pertanyaan yang menarik, tetapi menurut saya ini tidak mungkin. Apakah dua warna "cocok" atau tidak sebagai warna latar belakang dan latar depan bergantung pada teknologi tampilan dan karakteristik fisiologis penglihatan manusia, tetapi yang terpenting pada selera pribadi yang dibentuk oleh pengalaman. Sekilas tentang MySpace menunjukkan dengan cukup jelas bahwa tidak semua manusia melihat warna dengan cara yang sama. Saya tidak berpikir ini adalah masalah yang dapat diselesaikan secara algoritme, meskipun mungkin ada database besar di suatu tempat dengan warna pencocokan yang dapat diterima.

Saya telah menerapkan sesuatu yang serupa untuk alasan yang berbeda - itu adalah kode untuk memberi tahu pengguna akhir apakah warna latar depan dan latar belakang yang mereka pilih akan menghasilkan teks yang tidak dapat dibaca. Untuk melakukan ini, daripada memeriksa nilai RGB, saya mengonversi nilai warna menjadi HSL / HSV dan kemudian menentukan dengan eksperimen apa titik potong saya untuk keterbacaan ketika membandingkan nilai fg dan bg. Ini adalah sesuatu yang mungkin ingin / perlu Anda pertimbangkan.

Dalam aplikasi terbaru yang saya buat, saya menggunakan warna terbalik. Dengan nilai r, g dan b di tangan, hitung saja (dalam contoh ini, rentang warna bervariasi dari 0 hingga 255):

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

Mungkin aneh untuk menjawab pertanyaan saya sendiri, tetapi ini adalah pemilih warna lain yang sangat keren yang belum pernah saya lihat sebelumnya. Itu juga tidak menyelesaikan masalah saya: - ((((Namun saya pikir ini jauh lebih keren untuk ini, saya sudah tahu.

http://www.colorjack.com/

Di sebelah kanan, di bawah Tools pilih "Color Sphere", bidang yang sangat kuat dan dapat disesuaikan (lihat apa yang dapat Anda lakukan dengan pop-up di atas), "Color Galaxy", saya masih tidak yakin bagaimana ini bekerja, tapi terlihat keren dan "Color Studio" juga bagus. Selanjutnya dapat mengekspor ke semua jenis format (misalnya Illustrator atau Photoshop, dll.)

Bagaimana dengan ini, saya memilih warna latar belakang saya di sana, membiarkannya membuat warna pelengkap (dari pop-up pertama) - ini harus memiliki kontras tertinggi dan karenanya paling mudah dibaca, sekarang pilih warna pelengkap sebagai warna utama dan pilih netral? Hmmm ... tidak terlalu bagus juga, tapi kami menjadi lebih baik ;-)

Sudahkah Anda mempertimbangkan untuk mengizinkan pengguna aplikasi Anda memilih skema warna mereka sendiri? Tanpa gagal, Anda tidak akan dapat menyenangkan semua pengguna dengan pilihan Anda, tetapi Anda dapat mengizinkan mereka menemukan apa yang menyenangkan mereka.

Mirip dengan saran @Aaron Digulla kecuali bahwa saya akan menyarankan alat desain grafis, pilih warna dasar, dalam kasus Anda warna latar belakang, lalu sesuaikan Hue, Saturation, dan Nilai. Dengan menggunakan ini, Anda dapat membuat contoh warna dengan sangat mudah. Paint.Net gratis dan saya menggunakannya setiap saat untuk ini dan juga alat bayar-untuk-juga akan melakukan ini.

Secara pribadi saya rasa kita tidak dapat menemukan algoritma untuk menghitung warna teks yang paling cocok dengan menentukan warna latar belakang.

Saya pikir saat ini artis harus memiliki daftar pasangan warna yang memiliki kualitas bacaan yang baik, kita dapat menambahkannya ke tabel, dan mengatur salah satu pasangan ini secara acak sebagai tema bacaan kita ...

ini sangat masuk akal, dan kami tidak akan mendapatkan pasangan warna yang jelek ....