java - 生成类似于一种颜色的可区分颜色

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;
}