以编程方式选择高对比度的颜色 [英] Programmatically choose high-contrast colors

问题描述

这应该是一个简单的问题，但我还没有找到一种方法使它工作。

基本上，我有一个愚蠢的localhost页面我在我的web开发中使用。当我在我们的开发服务器和我的本地版本的C＃代码（从dev url通过主机文件重定向）之间冲浪时，我已经知道有时忘记了什么'dev.foo.com'指向本地或服务器。 p>

所以我创建了一个页面，它将作为默认网页的默认页面在本地运行，所以我可以从服务器轻松地识别我的localhost。

这个页面随机（包括生成一个角色的D& D的起始统计数据），包括设置一个随机的背景颜色。我通过在0和255之间生成3个随机数，并将它们设置为CSS中的主体背景颜色的RGB值。

给定3个整数R，G ，和B，我如何确定R2，G2和B2，使第二种颜色将具有高对比度的第一？我喜欢页面有随机的背景颜色（它让我不习惯着陆页的外观），但我也喜欢能够阅读文本。

解决方案

由于颜色视觉本身的分辨率太低，因此文本的亮度需要有所不同。

算法我建议如下：

• 选择随机背景颜色。




• 然后决定它是浅色还是深色。例如，您可以检查三种基色的平均值是大于还是等于128.




• 对于浅色使用黑色文本，文本。

This should be a simple question, but I haven't been able to find a way to make it work.

Essentially, I have a silly localhost page that I use in my webdevelopment. When I am surfing between our development server and my local version of the C# code (redirected from the dev url via host file) I have been known to sometimes forget what 'dev.foo.com' points at - local or server.

So I created a page which will run locally as my default web page's default page, so I can easily identify my localhost from the server.

This page does a lot of things randomly (including generating a character's starting stats for D&D), including setting a random background color. I do this by generating 3 random numbers between 0 and 255, and setting them as the RGB value for the body background color in CSS.

Given the 3 ints R, G, and B, how do I determine R2, G2, and B2 such that the second color will have high contrast with the first? I like having the page have random background colors (it keeps me from getting used to the look of the landing page) but I also like to be able to read the text.

解决方案

You need a difference in brightness for text to be readable, as color vision itself has too low resolution.

So as an algorithm I'd suggest the following:

• Pick a random background color.

• Then decide whether it is a light or a dark color. For example you could check whether the average of the three primary colors is greater or equal 128.

• For a light color use black text, for a dark one white text.

这篇关于以编程方式选择高对比度的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！