使用jQuery或PHP检测更暗或更浅的背景颜色

Question

这个有点难。我为网站演示制作了一个样式切换器，它改变了特定的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);
    }
});

Answer 1

这对你有用吗？

  

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

     

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

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