如果背景色已知，如何找到漂亮的字体颜色？[关闭]

86

那里似乎有很多色轮，颜色选择器和颜色匹配器Web应用程序，您在其中提供一种颜色，它们会找到其他两种颜色，当组合使用这些颜色时会产生谐波布局。但是，它们大多数只集中于背景色，并且在每种背景色上打印的任何文本（如果在预览中完全打印了文本）都是黑色或白色。

我的问题不同。我知道我要用于文本区域的背景色。我需要帮助的是选择几种可以用作此背景上的字体颜色的颜色（越多越好）。最重要的是，颜色将确保字体可读（对比度不会太低，也可能不会太高以避免眼睛受压），当然前景和背景的组合看起来也不错。

任何人都知道这样的应用程序吗？我更喜欢Web应用程序而不要下载任何内容。谢谢。

colors  accessibility  readability 
— 梅基
source

Answers:

39

如果需要算法，请尝试以下操作：将颜色从RGB空间转换为HSV空间（色相，饱和度，值）。如果您的UI框架无法做到，请查看以下文章：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))

并使用它。

— 亚伦·迪古拉（Aaron Digulla）
source
4

好的，这仍然不是最好的解决方案，而是一个不错的起点。我写了一个Java小应用程序，它计算两种颜色的对比度，并且只处理5：1或更高比率的颜色-这个比率和我使用的公式已由W3C发布，可能会替代当前的建议（我认为非常有限）。它将在当前工作目录中创建一个名为“ 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);
    }
}
— 梅基
source
再加上一个，对比度计算，正是我想要的。
— Max Kielland 2014年
2

这是一个有趣的问题，但我认为这实际上是不可能的。两种颜色是否“适合”为背景色和前景色取决于显示技术和人类视觉的生理特性，但最重要的是取决于经验塑造的个人品味。快速浏览MySpace非常清楚地表明，并非所有人都以相同的方式感知颜色。我不认为这是可以通过算法解决的问题，尽管可能存在一个可接受的匹配颜色的巨大数据库。

— 音乐发生
source
2

我出于不同的原因实施了类似的操作-该代码用于告诉最终用户他们选择的前景色和背景色是否会导致文本无法阅读。为此，我没有检查RGB值，而是将颜色值转换为HSL / HSV，然后通过实验确定比较fg和bg值时我的临界点是可读性。这是您可能需要/需要考虑的东西。

— RedFilter
source
1

回答我自己的问题可能很奇怪，但这是我从未见过的另一个非常酷的拾色器。它也不能解决我的问题：-（（（（（但是我认为对我已经知道的这些要酷得多。

http://www.colorjack.com/

在右侧的“工具”下，选择“ Color Sphere”（一个非常强大且可自定义的球体（请参见顶部弹出窗口的功能），“ Color Galaxy”，我仍然不确定这是如何工作的，但是看起来很酷，“ Color Studio”也很好。此外，它可以导出为各种格式（例如Illustrator或Photoshop等）。

怎么样，我在那里选择背景色，让它创建一个互补色（从第一个弹出窗口开始）-它应该具有最高的对比度，因此可读性最好，现在选择互补色作为主色并选择中性？嗯...也不太好，但是我们正在变得更好;-)

— 梅基
source
不，回答您自己的问题一点都不奇怪，我自己做了几次，而得到的答案只会改善社区。
— Dillie-O
0

您是否考虑过让应用程序的用户选择自己的配色方案？毫无疑问，您将无法取悦所有用户，但您可以允许他们找到令他们满意的东西。

— 焦炭
source
1
让用户决定没有错，但是我至少应该仍然包括一个有用的默认颜色主题，不是吗？除非每个用户都将其修复，否则默认情况下它
— 不可能是难以理解
0

与@Aaron Digulla的建议类似，不同之处在于我建议使用一种图形设计工具，选择基色（在您的情况下为背景色），然后调整色相，饱和度和值。使用此功能，您可以非常轻松地创建色样。Paint.Net是免费的，为此我一直使用它，并且付费工具也将这样做。

— 摩托威廉斯
source
0

我个人认为我们无法通过指定背景颜色来找到一种算法来计算最匹配的文本颜色。

我认为目前艺术家应该有一个具有良好阅读质量的颜色对列表，我们可以将它们添加到表中，并随机将其中一对作为我们的阅读主题...

这是很合理的，我们不会得到难看的颜色对。

— 飞猪
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.