如果已知背景颜色,如何find好看的字体颜色?
似乎有这么多的颜色轮,颜色select器和颜色匹配networking应用程序在那里,你给一种颜色,他们会发现一些其他颜色,将创build一个谐波布局,当组合使用。 然而,其中大多数只关注背景颜色,任何印在每种背景颜色上的文本(如果在预览中都打印文本)是黑色或白色。
我的问题是不同的。 我知道我想用于文本区域的背景颜色。 我需要帮助的是select一些颜色(越多越好),我可以在这个背景上使用字体颜色。 最重要的是,颜色将确保字体是可读的(对比度不能太低,也可能不太高,以避免眼睛受到压力),当然,前景和背景的组合看起来不错。
任何人都知道这样的应用程序? 我更喜欢一个Web应用程序,我必须下载任何东西。 谢谢。
如果你需要一个algorithm,试试这个:将颜色从RGB空间转换为HSV空间(Hue,Saturation,Value)。 如果您的UI框架无法执行此操作,请参阅以下文章: http : //en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV
色相在[0,360]。 要find“相反”的颜色(想想colorwheel),只需添加180度:
h = (h + 180) % 360;
对于饱和度和数值,请将其反转:
l = 1.0 - l; v = 1.0 - v;
转换回RGB。 即使大多数组合看起来很丑,这也应该总能给你一个高对比度。
如果你想避免“丑陋”的部分,build立一个表与几个“好”的组合,find一个最小的差异
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))
并使用它。
我build议你尝试一些对你来说看起来不错的颜色(如果你愿意的话,可以使用其他人在答案中build议的一种工具),但是不要忘记存在色盲 ,所以请在这个地址testing你的页面 :
检查库勒 ,这是一个很好的资源,find一起合作的颜色,只需要searchHTML颜色代码(如FF9900)。 它不会将结果限制为只包含所选对象的高对比度颜色的集合,但集合通常会包含低对比度和高对比度颜色的组合。
你可以考虑像http://www.snook.ca/technical/colour_contrast/colour.html 。 设置背景颜色,然后使用前景颜色进行游戏,直到获得看起来不错的东西(理想情况下符合W3C指南)。
你尝试过yaflacolor吗? 这不是你正在寻找的东西(它不会让你设置文本和背景颜色),但它确实显示了颜色和颜色的深色和浅色版本。 除非有人提出你所需要的东西,否则至less可以帮助你select你的颜色。
一旦你select了一个“好看”的文字颜色,你可以使用Tanaguru Contrast-Finder获得兼容/符合wcag的颜色。
它也是开源的,可在Github https://github.com/Tanaguru/Contrast-Finder上find
(声明:我是它的创造者)
好的,这仍然不是最好的解决scheme,但一个好的开始。 我写了一个小的Java应用程序,计算两种颜色的对比度,只处理比例为5:1或更好的颜色 – 这个比例和我使用的公式已经被W3C公布了,可能会取代当前的build议我认为非常有限)。 它会在当前工作目录中创build一个名为“chosen-font-colors.html”的文件,其中包含您select的背景颜色以及通过此W3Ctesting的每种颜色的文本行。 它期望一个单一的论点,作为背景颜色。
比如你可以这样称呼它
java FontColorChooser 33FFB4
然后只需在您select的浏览器中打开生成的HTML文件,然后从列表中select一种颜色。 所有给出的颜色都通过了W3Ctesting的背景颜色。 你可以通过用你select的数字代替5来改变截断(数字越小,对比度越弱,例如3只会确保对比度是3:1,10会确保至less10: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. Eg 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( "Eg \"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); } }
这是一个有趣的问题,但我不认为这实际上是可能的。 两种颜色是否适合作为背景和前景颜色取决于显示技术和人类视觉的生理特征,但最重要的是依赖于经验塑造的个人品味。 通过MySpace快速浏览显示,并不是所有的人都以同样的方式感知颜色。 我不认为这是一个algorithm可以解决的问题,虽然可能有一个巨大的数据库在可接受的匹配颜色的地方。
我已经实现了一些类似的原因 – 这是代码告诉最终用户他们select的前景和背景颜色是否会导致不可读的文本。 要做到这一点,我不是检查RGB值,而是将颜色值转换为HSL / HSV,然后通过实验确定我的截止点是否可比较fg和bg值的可读性。 这是你可能想/需要考虑的事情。
免责声明:我是作者。 http://vanisoft.pl/~lopuszanski/public/colors/ – 根据W3C推荐标准 ,它会生成与您所input的颜色形成鲜明对比的颜色的命题
回答我自己的问题可能很奇怪,但这里是另一个我从未见过的非常酷的颜色select器。 它也不能解决我的问题: – ((((但是我认为这些我已经知道的更酷了。
在右侧的工具下,select“颜色球体”,一个非常强大和可定制的领域(看看你能用上面的popup窗口做什么),“彩色银河”,我还不确定这是如何工作的,但看起来酷和“色彩工作室”也不错。 此外,它可以导出到各种格式(例如Illustrator或Photoshop等)
怎么样,我select背景颜色,让它创build一个免费的颜色(从第一个popup) – 这应该有最高的对比度,因此是最好的可读性,现在select补色作为主要颜色,并select中性? 嗯…不是太好,但我们正在变得更好;-)
另一个计划生成网站,但它包括基于受影响人口的百分比来帮助处理色盲的选项。
良好的色彩scheme生成器
就个人而言,我不认为我们可以通过指定背景颜色来找出algorithm来计算最匹配的文本颜色。
我认为目前艺术家应该有一个具有良好阅读质量的颜色对列表,我们可以将它们添加到一个表格,并随机设置其中的一个作为我们的阅读主题 …
这是非常合理的,我们不会得到丑陋的颜色对….
你有没有考虑让你的应用程序的用户select自己的配色scheme? 没有失败,你将无法取悦所有的用户与您的select,但你可以让他们find什么让他们喜欢。
类似于@Aaron Digulla的build议,除了我会build议一个graphicsdevise工具,select基本颜色,在你的情况下背景颜色,然后调整色相,饱和度和价值。 使用这个,你可以很容易地创build颜色色板。 Paint.Net是免费的,我一直在使用它,而付费工具也会这样做。
这里有一篇关于这个主题的文章:
http://www.particletree.com/notebook/calculating-color-contrast-for-legible-text/
它提供了一个有效的algorithm,给定一个背景颜色和一个光线和一个黑暗的前景色,select哪个前景色变体将更具可读性。
在我最近的一个应用程序中,我使用了发现的颜色。 用r,g和b值来计算(在本例中,颜色范围从0到255):
r = 127-(r-127) and so on.