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

86
задан Yvette Colomb 19 November 2018 в 15:16
поделиться

7 ответов

При необходимости в алгоритме попробуйте это: Преобразуйте цвет от пространства RGB до пространства HSV (Оттенок, Насыщенность, Значение). Если Ваша платформа UI не может сделать этого, проверьте эту статью: http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV

Оттенок находится в [0,360). Для нахождения "противоположного" цвета (думают colorwheel) просто добавьте 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))

и использование это.

39
ответ дан Aaron Digulla 24 November 2019 в 08:07
поделиться

Хорошо, это все еще не самое лучшее решение, но хорошая точка для запуска. Я записал немного приложения Java, которое вычисляет коэффициент контрастности двух цветов и только обрабатывает цвета с отношением 5:1 или лучше - это отношение и формула, которую я использую, был выпущен W3C и вероятно заменит текущую рекомендацию (который я считаю очень ограниченными). Это создает файл в текущем рабочем dir, названном "chosen-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);
    }
}
4
ответ дан Mecki 24 November 2019 в 08:07
поделиться

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

2
ответ дан MusiGenesis 24 November 2019 в 08:07
поделиться

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

2
ответ дан RedFilter 24 November 2019 в 08:07
поделиться

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

0
ответ дан billcoke 24 November 2019 в 08:07
поделиться

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

http://www.colorjack.com/

Справа, под выбором Инструментов "Цветная Сфера", очень мощная и настраиваемая сфера (см. то, что можно сделать со всплывающими окнами на вершине), "Цветная Галактика", я все еще не уверен, как это работает, но смотрит, прохладный и "Цветной Studio" также хорош. Далее это может экспортировать в весь вид форматов (например, Illustrator или Photoshop, и т.д.)

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

1
ответ дан Mecki 24 November 2019 в 08:07
поделиться

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

0
ответ дан MotoWilliams 24 November 2019 в 08:07
поделиться
Другие вопросы по тегам:

Похожие вопросы: