使用 jQuery 或 PHP 检测较深或较浅的背景颜色答案

【问题标题】：Detect darker or lighter background colors using jQuery or PHP使用 jQuery 或 PHP 检测较深或较浅的背景颜色
【发布时间】：2013-07-21 19:50:07
【问题描述】：

这个有点难。我为网站演示制作了一个样式切换器，可以更改特定的 div 背景颜色。一切正常，但由于该 div 还包含文本和标题，如果访问者将背景更改为白色，标题和文本就消失了。

因此，不是为该容器添加标题或文本的开关，而是 id 检测背景颜色的变化，这样会影响里面的文本。

通过使用 Tyny color jQuery 插件，我将标题和段落的颜色设置为浅 30% 并且几乎可以正常工作，但是一旦你变成白色或任何接近白色的地方，我需要它切换到深色。

有没有办法通过使用 jQuery TinyColor 和 Colorpicker 插件或 php 来检测更深/更浅的颜色代码？我还要求使用 php 的原因是因为我将该演示也移植到了 php，因此任何一个都可以为我工作。

我在这里设置了一个小演示供您测试 http://jsfiddle.net/mwVz6/12/

代码非常简单，对于演示和我的切换器，我使用的是来自 http://www.eyecon.ro/colorpicker/

$('#colorSelector').ColorPicker({
    color: '#0000ff',
    onShow: function (colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
        $('#container').css('backgroundColor', '#' + hex);
    }
});

【问题讨论】：

这里是完整的 jquery/php 版本以防万一其他人需要它themergency.com/…

标签： php jquery colors

【解决方案1】：

这对你有用吗？

https://github.com/joggink/jquery-colorcontrast

http://24ways.org/2010/calculating-color-contrast/

您最好的选择可能是开发一个函数来计算 2 种特定颜色彼此之间的接近程度的 delta（差异）。如果增量低于某个阈值，则将文本颜色增加到该阈值。挑战在于确定颜色应该更深还是更浅。

【讨论】：