Question

在我的应用程序中，我希望用户为要在日历上显示的元素选择基色。从用户选择的基色，我需要能够自动设置合适的边框颜色和适当的文本颜色。

当我的意思合适时，我的意思是边框的颜色或阴影变暗

是否有任何jquery插件已经执行此操作，或者实际上是否有其他javascript库的其他插件？

如果没有，人们可以提供有关如何进行计算的建议吗？我在色彩理论方面没有太多经验。

谢谢。

Answer 1

你可以试试这个：

http://www.javascriptrules.com/2009/08/05/css-color-brightness-contrast-using-javascript/

或者你可以尝试这个片段：

function lighten(color, factor) {
    factor = factor || 0.4;
    var lighter = '#';
    for(var i = 1; i < 6; i += 2) {
        var part = parseInt(color.substr(i, 2), 16);
        part += Math.round((255 - part) * 0.4);
        lighter += (part < 16 ? '0' : '') + part.toString(16);
    }
    return lighter;
}
lighten('#ececec'); // returns '#f4f4f4'

或使用此代码段：

function LightenColor(rgbtext, delta) {
      var r, g, b, txt;
      r= parseInt(rgbtext.substr(1, 2), 16),
      g= parseInt(rgbtext.substr(3, 2), 16),
      b= parseInt(rgbtext.substr(5, 2), 16),

      r+= delta;  if (r> 255) r= 255;  if (r< 0) r= 0;
      g+= delta;  if (g> 255) g= 255;  if (g< 0) g= 0;
      b+= delta;  if (b> 255) b= 255;  if (b< 0) b= 0;
      txt= b.toString(16);       if (txt.length< 2) txt= "0"+ txt;
      txt= g.toString(16)+ txt;  if (txt.length< 4) txt= "0"+ txt;
      txt= r.toString(16)+ txt;  if (txt.length< 6) txt= "0"+ txt;

      return "#"+ txt;
    }
    function DarkenColor(rgbtext, delta) {
      return LightenColor(rgbtext, delta* -1);
    }
LightenColor('#AF0000', 50);
DarkenColor('#AF0000', 50);

Answer 2

我手边没有具体的代码示例，但这里有关于如何使用数学的想法。将0 - 9设置为它们的值，将A - F设置为10 - 15，如下所示（您还需要将这些值乘以16，在一秒钟内有意义）：

0 : 0 : 0
1 : 1 : 16
2 : 2 : 32
...
A : 10 : 160
B : 11 : 176
C : 12 : 192
...
F : 15 : 240

完成此设置后，您可以（假设您的颜色为HEX）将3个分组分开，并将每个分组转换为十六进制等效值。两者的第一个字符乘以16，第二个字符乘以1：

FF = (16 * 15) + (15 * 1) = 255
AE = (16 * 10) + (14 * 1) = 174
0F = (16 * 0 ) + (15 * 1) = 15

一旦你有了用户选择的颜色的十六进制数字，你就可以根据公式将每个十六进制数加倍。

下面是一个例子，我使用较浅的红色，我想找到一个更深的红色。我的起始HEX是DB4658，我将按.5将我的值加倍，以得到我更深的红色：

分为3组：DB 46 58

计算每个的十六进制值：

  D = 13   B = 11   4 = 4   6 = 6   5 = 5   8 = 8
  DB = 219 = 13 * 16 + 11 * 1
  46 = 70 = 4 * 16 + 6 * 1
  58 = 88 = 5 * 16 + 8 * 1

现在将它们计算到较暗的十六进制中（我将数字置于其中）：
```
  219 * .5 = 109
  70 * .5 = 35
  88 * .5 = 44
```
将此转换回我们的3个分组，第一个角色看你的您在16乘以列中构建的表：
```
  109 = 96 + 13 = 6D
  35 = 32 + 3 = 23
  44 = 32 + 12 = 2C
```
你现在有了深红色。

如果您希望对比度更接近，如果您选择的颜色已经很暗，则可以将.5调整为.75，然后调整应为1.25x或1.5x。

希望你觉得这很有帮助。如果您需要澄清，请告诉我。

Answer 3

你可以想象一种颜色就像一个3D矢量，角落里有黑色，而对面则是白色：

function color_to_vector(color) {
    return {
        r : parseInt(color.substr(1, 2), 16),
        g : parseInt(color.substr(3, 2), 16),
        b : parseInt(color.substr(5, 2), 16)
    }
}

function vector_to_color(vector){
    return "#"+
        (vector.r < 16 ? '0' : '') + vector.r.toString(16)+
        (vector.g < 16 ? '0' : '') + vector.g.toString(16)+
        (vector.b < 16 ? '0' : '') + vector.b.toString(16);
}

那么，你想要一个更深的颜色？然后：

function darker(color){
    var vector = color_to_vector(color);
    vector.r /= 2;
    vector.g /= 2;
    vector.b /= 2;
    return vector_to_color(vector);
}

较轻的？

function lighter(color){
    var vector = color_to_vector(color);
    vector.r += (255 - vector.r) / 2;
    vector.g += (255 - vector.g) / 2;
    vector.b += (255 - vector.b) / 2;
    return vector_to_color(vector);
}

一个“蓝色”的？

function lighter(color){
    var vector = color_to_vector(color);
    vector.b += (255 - vector.b) / 2;
    return vector_to_color(vector);
}

等等。

Javascript / jQuery Plugin插件来改变边框颜色，相对于元素的背景颜色

3 个答案: