Как найти красивый цвет шрифта, если цвет фона известен?

Ответ 1

Если вам нужен алгоритм, попробуйте это: Преобразуйте цвет из пространства RGB в пространство HSV (Hue, Saturation, Value). Если ваша инфраструктура пользовательского интерфейса не может этого сделать, проверьте эту статью: 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))

и используйте это.

Ответ 2

Я предлагаю вам попробовать некоторые цвета, которые выглядят хорошо для вас (используя один из инструментов, предложенных другими в ответах, если вы хотите), но не забывайте, что цветная слепота существует, поэтому проверьте свою страницу по этому адресу:

http://colorfilter.wickline.org/

Ответ 3

Отъезд kuler, это отличный ресурс для поиска цветов, которые хорошо сочетаются, просто выполните поиск цветового кода HTML ( например, FF9900). Он не будет ограничивать результат только наборами, которые включают высококонтрастные цвета с выбранным вами, но наборы обычно будут иметь комбинацию цветов с низкой и высокой контрастностью.

Ответ 4

Вы можете рассмотреть что-то вроде http://www.snook.ca/technical/colour_contrast/colour.html. Установите цвет фона, затем поиграйте с цветом переднего плана, пока не получите то, что выглядит хорошо (и в идеале соответствует рекомендациям W3C).

Ответ 5

Вы пробовали yaflacolor? Это не совсем то, что вы ищете (это не позволяет вам устанавливать цвет текста и фона), но он показывает бесплатные цвета и темные и светлые версии цветов вместе. Если кто-то не придумает то, что вам нужно, он может по крайней мере помочь вам выбрать ваши цвета.

Ответ 6

После того, как вы выбрали "красивый" цвет для текста, вы можете иметь цвета с доступными/wcag-совместимыми, используя Contrast-Finder Tanaguru.

Он также является открытым исходным кодом и доступен в Github https://github.com/Tanaguru/Contrast-Finder

(отказ от ответственности: я его создатель)

Ответ 7

Хорошо, это все еще не лучшее возможное решение, но хороший момент для начала. Я написал небольшое приложение 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);
    }
}

Ответ 8

Это интересный вопрос, но я не думаю, что это действительно возможно. Независимо от того, соответствуют ли два цвета "фоновым" и "передним" цветам, технологии дисплея и физиологические характеристики человеческого зрения, но, самое главное, на основе личных вкусов, сформированных опытом. Быстрый прогон через MySpace довольно ясно показывает, что не все люди воспринимают цвета одинаково. Я не думаю, что это проблема, которая может быть решена алгоритмически, хотя может быть огромная база данных где-то приемлемых цветов соответствия.

Ответ 9

Я реализовал что-то подобное по другой причине - это код, указывающий конечному пользователю, будут ли выбранные ими цвета переднего и заднего фона нечитаемым текстом. Чтобы сделать это, вместо того, чтобы анализировать значения RGB, я преобразовал значение цвета в HSL/HSV, а затем определил с помощью эксперимента, что моя точка отсечки была для читаемости при сравнении значений fg и bg. Это то, что вам может понадобиться/нужно рассмотреть.

Ответ 10

Отказ от ответственности: я автор. http://vanisoft.pl/~lopuszanski/public/colors/ - он генерирует предложения цветов, которые имеют хороший контраст с тем, который вы ввели, в соответствии с Рекомендация W3C

Ответ 11

Возможно, странно ответить на мой собственный вопрос, но вот еще один действительно классный выбор цвета, который я никогда раньше не видел. Это не решает мою проблему: - ((((но я думаю, что это намного круче, чем я уже знаю.

http://www.colorjack.com/

Справа в разделе "Инструменты" выберите "Color Sphere", очень мощную и настраиваемую сферу (посмотрите, что вы можете сделать с всплывающими окнами сверху), "Color Galaxy", я до сих пор не знаю, как это работает, но выглядит круто, и "Color Studio" тоже приятная. Кроме того, он может экспортироваться во все типы форматов (например, Illustrator или Photoshop и т.д.).

Как насчет этого, я выбираю свой фоновый цвет там, пусть он создает бесплатный цвет (от первого всплывающего окна) - это должно иметь самый высокий контраст и, следовательно, быть лучше читаемым, теперь выберите дополнительный цвет в качестве основного цвета и выберите нейтральный? Хм... не слишком хорошо, но мы становимся лучше, -)

Ответ 12

Другой сайт генерации схемы, но он включает опции, которые помогут справиться с слепотой цвета, основанной на проценте затронутой популяции.

Генератор схемы цветов Sytled

Ответ 13

Отъезд http://www.cattail.nu/newton/

Имеет класс Obj C для добавления в ваш UIColor

Fab!

Ответ 14

Лично я не думаю, что мы можем найти алгоритм для вычисления наиболее подходящего цвета текста, указав цвет фона.

Я думаю, что в настоящее время художник должен иметь список цветовых пар, который имеет хорошее качество чтения, мы можем добавить их в таблицу и установить одну из этих пар случайным образом в качестве темы для чтения...

это очень разумно, и мы не получим уродливые цветовые пары....

Ответ 15

Рассматривали ли вы возможность позволить пользователю вашего приложения выбрать свою собственную цветовую схему? В обязательном порядке вы не сможете порадовать всех своих пользователей своим выбором, но вы можете позволить им найти то, что им нравится.

Ответ 16

Подобно предложению @Aaron Digulla, за исключением того, что я предлагаю инструмент графического дизайна, выберите базовый цвет, в вашем случае цвет фона, а затем отрегулируйте оттенок, насыщенность и значение. Используя это, вы можете легко создавать цветовые образцы. Paint.Net является бесплатным, и я использую его все время для этого, а также оплачиваемые инструменты также будут делать это.

Ответ 17

Вот хорошая статья, которую я нашел по этому вопросу:

http://www.particletree.com/notebook/calculating-color-contrast-for-legible-text/

Он обеспечивает эффективный алгоритм для, учитывая цвет фона и светлый и темный цвет переднего плана, выбирая, какой из вариантов цвета переднего плана будет более читабельным.

Ответ 18

В недавнем приложении, которое я сделал, я использовал инвертированные цвета. С учетом значений r, g и b, просто вычислите (в этом примере диапазон цветов варьируется от 0 до 255):

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