生成类似于一种颜色的可微分颜色

generate differentiable colors similar to one color

本文关键字：颜色 一种 类似于      更新时间：2023-09-26

假设我有一个网络应用程序，我需要显示一些不同颜色的文本，这些文本肉眼可见，但都类似于例如红色，例如一个粉红色和另一个深红色，以及。。。

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

代码如下

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

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

我该如何解决这个问题？（我也同意jquery解决方案）

这是我的建议：

  • 使用DOM元素的jQueryCSS检索RGB值
  • 将其转换为HSL值
  • 使用"亮度"值（0,1）进行颜色变化（相同颜色）

演示：JSnippet演示

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

/**
* 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;
}
相关文章：