Arka plan rengi biliniyorsa iyi görünen yazı tipi rengi nasıl bulunur? [kapalı]


86

Orada çok sayıda renk çarkı, renk seçici ve renk eşleştirici web uygulaması var gibi görünüyor, burada bir renk veriyorsunuz ve kombinasyon halinde kullanıldığında harmonik bir düzen oluşturacak birkaç başka renk bulacaklar. Bununla birlikte, çoğu yalnızca arka plan renklerine odaklanır ve her bir arka plan rengine yazdırılan herhangi bir metin (önizlemede metin yazdırılıyorsa) siyah veya beyazdır.

Benim sorunum farklı. Bir metin alanı için kullanmak istediğim arka plan rengini biliyorum. Yardıma ihtiyacım olan şey, bu arka planda yazı tipi renkleri olarak kullanabileceğim birkaç renk seçmek (ne kadar çok olursa o kadar iyi olur). En önemlisi, rengin yazı tipinin okunabilir olmasını (kontrastın çok düşük olmaması, ayrıca gözlerin vurgulanmasını önlemek için çok yüksek olmaması) ve tabii ki ön plan ve arka plan kombinasyonunun iyi görünmesini sağlamasıdır.

Böyle bir uygulamadan haberdar olan var mı? İndirmem gereken her şeye bir web uygulamasını tercih ederim. Teşekkürler.

Yanıtlar:


39

Bir algoritmaya ihtiyacınız varsa şunu deneyin: Rengi RGB alanından HSV alanına (Ton, Doygunluk, Değer) dönüştürün. UI çerçeveniz bunu yapamazsa, şu makaleye bakın: http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV

Ton [0,360) 'dır. "Zıt" rengi bulmak için (renk çarkını düşünün), 180 derece eklemeniz yeterlidir:

h = (h + 180) % 360;

Doygunluk ve değer için bunları ters çevirin:

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

RGB'ye geri dönüştürün. Çoğu kombinasyon çirkin görünse bile bu size her zaman yüksek kontrast sağlamalıdır.

"Çirkin" kısımdan kaçınmak istiyorsanız, birkaç "iyi" kombinasyon içeren bir tablo oluşturun, en az farkı olanı bulun

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

ve bunu kullan.


4

Tamam, bu hala mümkün olan en iyi çözüm değil, ama başlamak için güzel bir nokta. İki rengin kontrast oranını hesaplayan ve renkleri yalnızca 5: 1 veya daha iyi bir oranla işleyen küçük bir Java uygulaması yazdım - bu oran ve kullandığım formül W3C tarafından yayınlandı ve muhtemelen mevcut önerinin yerini alacak (ki Çok sınırlı olduğunu düşünüyorum). Geçerli çalışma dizininde, seçtiğiniz arka plan rengiyle ve bu W3C testini geçen her renkte bir metin satırı ile "selected-font-colours.html" adlı bir dosya oluşturur. Arka plan rengi olan tek bir argüman bekler.

Örneğin buna böyle diyebilirsin

java FontColorChooser 33FFB4

daha sonra, oluşturulan HTML dosyasını seçtiğiniz bir tarayıcıda açın ve listeden bir renk seçin. Verilen tüm renkler bu arka plan rengi için W3C testini geçti. 5'i seçtiğiniz bir sayı ile değiştirerek kesmeyi değiştirebilirsiniz (daha düşük sayılar daha zayıf kontrastlara izin verir, örneğin 3 sadece kontrastın 3: 1 olmasını sağlar, 10 ise en az 10: 1 olmasını sağlar) ve ayrıca çok yüksek kontrastlardan kaçınmak için kesin (belirli bir sayıdan daha küçük olduğundan emin olarak), örneğin

|| cDiff > 18.0

if cümlesi, kontrastın çok aşırı olmamasını sağlar, çünkü çok aşırı kontrastlar gözlerinizi zorlayabilir. İşte kod ve onunla biraz oynamanın keyfini çıkarın :-)

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

Artı bir, Kontrast hesaplaması, tam olarak aradığım şey.
Max Kielland

2

Bu ilginç bir soru, ama bunun gerçekten mümkün olduğunu sanmıyorum. Arka plan ve ön plan renkleri olarak iki rengin "uyup uymadığı", görüntü teknolojisine ve insan görüşünün fizyolojik özelliklerine, ama en önemlisi deneyimle şekillenen kişisel zevklere bağlıdır. MySpace'de hızlı bir inceleme, oldukça açık bir şekilde tüm insanların renkleri aynı şekilde algılamadığını gösterir. Kabul edilebilir renklerle eşleşen bir yerde çok büyük bir veritabanı olsa da, bunun algoritmik olarak çözülebilecek bir sorun olduğunu sanmıyorum.


2

Benzer bir şeyi farklı bir nedenle uyguladım - bu, son kullanıcıya seçtikleri ön plan ve arka plan renklerinin okunamayan metinle sonuçlanıp sonuçlanmayacağını söyleyen koddu. Bunu yapmak için, RGB değerlerini incelemek yerine, renk değerini HSL / HSV'ye çevirdim ve daha sonra fg ve bg değerlerini karşılaştırırken kesme noktamın okunabilirlik açısından ne olduğunu deneme yoluyla belirledim. Bu, düşünmek isteyebileceğiniz / ihtiyaç duyabileceğiniz bir şeydir.


2

Yakın zamanda yaptığım bir uygulamada ters renkler kullandım. Elinizdeki r, g ve b değerleri ile hesaplayın (bu örnekte renk aralığı 0 ile 255 arasında değişir):

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

1

Kendi sorumu cevaplamak garip olabilir, ama işte daha önce hiç görmediğim gerçekten harika bir renk seçici. Sorunumu da çözmüyor: - ((((ancak zaten bildiğim bunlardan çok daha havalı olduğunu düşünüyorum.

http://www.colorjack.com/

Sağda, Araçlar'ın altında, çok güçlü ve özelleştirilebilir bir küre olan "Renk Küresi" ni seçin (üstteki açılır pencerelerle neler yapabileceğinizi görün), "Renk Gökadası", bunun nasıl çalıştığından hâlâ emin değilim, ama görünüyor havalı ve "Color Studio" da güzel. Ayrıca, her tür formata (örneğin Illustrator veya Photoshop, vb.)

Buna ne dersiniz, orada arka plan rengimi seçiyorum, tamamlayıcı bir renk oluşturmasına izin veriyorum (ilk açılır pencereden itibaren) - bu en yüksek kontrasta sahip olmalı ve bu nedenle en iyi okunabilir olmalıdır, şimdi ana renk olarak tamamlayıcı rengi seçin ve nötr seçin? Hmmm ... çok da iyi değil, ama daha iyiye gidiyoruz ;-)


Hayır, kendi sorunuzu cevaplamak hiç de tuhaf değil, bunu kendim birkaç kez yaptım ve cevapları orada almak sadece topluluk için daha iyi.
Dillie-O

0

Uygulamanızın kullanıcısının kendi renk şemasını seçmesine izin vermeyi düşündünüz mü? Başarısız olmadan, tüm kullanıcılarınızı seçiminizle memnun edemezsiniz, ancak onları neyin memnun ettiğini bulmalarına izin verebilirsiniz.


1
Kullanıcının karar vermesine izin vermede yanlış bir şey yok, ancak yine de en azından yararlı bir varsayılan renk teması eklemeliyim, değil mi? Varsayılan olarak her kullanıcı düzeltene kadar okunamaz ve çirkin
olamaz

0

@Aaron Digulla'nın önerisine benzer şekilde, bir grafik tasarım aracı öneriyorum, temel rengi seçiyorum, sizin durumunuzda arka plan rengini seçin, ardından Ton, Doygunluk ve Değer'i ayarlayın. Bunu kullanarak çok kolay bir şekilde renk örnekleri oluşturabilirsiniz. Paint.Net ücretsizdir ve bunun için her zaman kullanıyorum ve ayrıca araçlar için ödeme de bunu yapacak.


0

Kişisel olarak, arka plan rengini belirleyerek en çok eşleşen metin rengini hesaplamak için bir algoritma bulabileceğimizi sanmıyorum.

Bence şu anda sanatçının iyi okuma kalitesine sahip bir renk çiftleri listesi olması gerekiyor, bunları bir masaya ekleyebilir ve bu çiftlerden birini rastgele okuma temamız olarak ayarlayabiliriz. ...

bu çok makul ve çirkin renk çiftleri elde etmeyeceğiz ....

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.