Question

假设我有一个网络应用程序，我需要显示一些不同颜色的文字，这些文字很明显是眼睛，但都类似于红色，例如一个粉红色和另一个深红色... ...

我使用服务器端，在我的servlet中，我删除了我的颜色FF0000的最后3部分并添加例如100

代码如下

for(int i=0;i<10;i++)
{
  "FF0000".subSring(0,6-3)+i*100
}

但问题是所有颜色都是一样的，没有人可以区分它们

我该如何解决这个问题？（我也可以使用jquery解决方案）

Answer 1

这是我的建议：

使用DOM元素的jQuery CSS检索RGB值。
将其转换为HSL值。
使用亮度值（0,1）播放颜色变化（相同颜色）。

<强>样本：JSnippet Demo

以下是我使用的主要功能（转换功能在演示中）：

/**
* Gets any CSS color value and returns an array of variation
* With objects that holds the variations rgb values.
*
* @param   String  cssColor  The CSS color
* @param   Number  vars      How Many variation
* @return  Array             Array of objects - first is the original rgb.
*/

function getColorReturnVar(cssColor, vars) {
    results_rgb = [];
    results_hsl = [];
    inc = 0;
    $test = $("<div />").css({ 
       background:cssColor, 
       width:'1px', 
       height:'1px' 
    });
    $('body').append($test);
    rgb = $test.css('backgroundColor');
    $test.remove();
    rgb = rgb.replace(/rgb\(|rgba\(| |\).*/gi,"").split(',');
    results_rgb[0] = {r:parseInt(rgb[0]),g:parseInt(rgb[1]),b:parseInt(rgb[2])};
    results_hsl[0] = rgbToHsl(results_rgb[0].r, results_rgb[0].g, results_rgb[0].b);
    if (results_hsl[0].l < 0.5) 
       inc = Math.floor(((1-results_hsl[0].l)/(vars+3)) * 100) / 100;
    else 
       inc = (Math.floor(((results_hsl[0].l-0)/(vars+3)) * 100) / 100)*-1;
    for (var i=1; i< vars+1; i++) {
        results_hsl[i] = { h:results_hsl[i-1].h,s:results_hsl[i-1].s,l:results_hsl[i-1].l + inc };
        results_rgb[i] = hslToRgb(results_hsl[i].h,results_hsl[i].s,results_hsl[i].l);
    }
    return results_rgb;
}

产生类似于一种颜色的可分辨颜色

1 个答案: