js实现HSL与RGB色彩的相互转换功能

时间: 2018-06-29阅读: 3446标签: js技巧

HSL与RGB描述

RGB和HSL(也叫HSB/HSV)是两种色彩空间,即:红,绿,蓝(Red,Green,Blue)和色调,饱和度,亮度(Hue,Saturation,Lightness或Brightness或Value),前者适用于机器采样,目前的显示器颜色即由这三种基色构成,而后者更符合人类的直观感觉,比如人一般表达一个颜色会这样说:有点浓的暗红色。而不会说红色占多少,绿色占多少,蓝色占多少。  

HSL:
H:Hue 色调
S:Saturation 饱和度
L:Lightness 亮度
RGB:
R:Red 红色
G:Green 绿色
B:Blue 蓝色


HSL颜色值转换为RGB

/**
 * HSL颜色值转换为RGB. 
 * 换算公式改编自 http://en.wikipedia.org/wiki/HSL_color_space.
 * h, s, 和 l 设定在 [0, 1] 之间
 * 返回的 r, g, 和 b 在 [0, 255]之间
 *
 * @param   Number  h       色相
 * @param   Number  s       饱和度
 * @param   Number  l       亮度
 * @return  Array           RGB色值数值
 */
 function hslToRgb(h, s, l){
    var r, g, b;

    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        var hue2rgb = function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}


RGB 颜色值转换为 HSL

/**
 * RGB 颜色值转换为 HSL.
 * 转换公式参考自 http://en.wikipedia.org/wiki/HSL_color_space.
 * r, g, 和 b 需要在 [0, 255] 范围内
 * 返回的 h, s, 和 l 在 [0, 1] 之间
 *
 * @param   Number  r       红色色值
 * @param   Number  g       绿色色值
 * @param   Number  b       蓝色色值
 * @return  Array           HSL各值数组
 */
 function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
    return [Math.floor(h*100), Math.round(s*100)+"%", Math.round(l*100)+"%"];
}



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/902

(a ==1 && a== 2 && a==3) 有可能是 true 吗?

1. 利用松散相等运算符 == 的原理,自定义 toString 和 valueOf 返回对应值2. 利用半宽度韩文等特殊字符,玩“障眼法”,本质上其实并没有做到题设3. 劫持 JS 对象的 getter,不过这种方式对于严格相等 === 同样有效

js中~~和 | 的妙用

~~它代表双非按位取反运算符,如果你想使用比Math.floor()更快的方法,那就是它了。需要注意,对于正数,它向下取整;对于负数,向上取整;非数字取值为0,它具体的表现形式为:

三个实用的javascript小技巧

如果你想从后向前获取一个数组的元素,可以这样写:如果你想在某个条件逻辑值为true时,执行某个函数,就像这样:如果你必须给一个变量赋默认值,可以简单的这样写:

JavaScript 异步调用——从小小题目逐步走进 JavaScript 异步调用

async/await 语法让异步调用写起来像写同步代码,在编写代码的时候,可以避免逻辑跳跃,写起来会更轻松。

js语言中常见错误总汇

事实证明很多这些 null 或 undefined 的错误是普遍存在的。 一个类似于 Typescript 这样的好的静态类型检查系统,当设置为严格的编译选项时,能够帮助开发者避免这些错误。

通过原生js判断网页图片是否已加载成功的方法总汇

在写网页的程序的时候,经常碰到要在网页加载完全之后再去展现页面,加载中的时候通过显示loading...的样式。这时候我们会直接想到使用window.onload的方式,或者是img对象的complete属性

js实现浏览器:加入收藏、设为首页、保存到桌面的方法功能

在一些网页中我们可以常见的“设置为首页”和“ 收藏本站”,以及“保存到桌面”等功能,使用js是如何实现的呢?这里为大家分享下实现方法,完美兼容IE,chrome,ff等浏览器

js求数组的最大值--奇技淫巧和笨方法

js中有很多“奇技淫巧”,有时我会常常刻意去用这些“奇技淫巧”(注意,我不是在反对用它,只是有时其实没必要用)。比如,求数组中的最大值,js中Array没有原生的求最大值的方法,但是Math有呀

5个小技巧让你写出更好的 JavaScript 条件语句

使用 Array.includes 来处理多重条件,少写嵌套,尽早返回,使用函数默认参数和解构,相较于 switch,Map / Object 也许是更好的选择,使用 Array.every 和 Array.some 来处理全部/部分满足条件,让我们一起写出可读性更高的代码吧

js中实现sleep暂停/睡眠功能的多种方式

由于很多语言都有sleep函数,但是js中没有,下面介绍JavaScript实现类似sleep的多种方式:利用循环、Promise版本 、通过generate来实现、通过 Async/Await 封装、使用node-sleep

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!