首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >生成类似于一种颜色的可微颜色

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

Stack Overflow用户
提问于 2014-10-21 01:40:44
回答 1查看 157关注 0票数 1

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

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

代码如下

代码语言:javascript
运行
复制
for(int i=0;i<10;i++)
{
  "FF0000".subSring(0,6-3)+i*100
}

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

我如何解决这个问题?(我也同意jquery解决方案)

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-10-21 03:58:45

以下是我的建议:

  • 使用DOM元素的jQuery CSS检索RGB值。
  • 将其转换为HSL值。
  • 播放轻值(0,1)的颜色变化(相同的颜色)。

DEMOJSnippet演示

下面是我使用的主要函数(转换函数在演示中):

代码语言:javascript
运行
复制
/**
* 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;
}
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26477625

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档