/**
* 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.
* 转换公式参考自 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)+"%"];
} 原文地址:https://blog.csdn.net/u012761229/article/details/51958205

HSL与RGB颜色转换的更多相关文章

  1. iOS中RGB颜色转换

    iOS中RGB常用的色值,同时可将对颜色的设置定义成宏,方便开发应用,如: // RGB颜色转换(16进制->10进制) #define UIColorFromRGB(rgbValue) [UI ...

  2. 如何将24位RGB颜色转换16位RGB颜色

    有许多朋友第一次使用16位彩色显示屏会遇到如何将24位RGB颜色转换为对应的16位RGB颜色的问题, 通过查阅相关资料,就写一下其中的转换原理吧,希望对大家会有所帮助. 我们知道24位RGB是分别由8 ...

  3. js方法实现rgb颜色转换成16进制格式的代码的方法

    原文地址:http://www.cnblogs.com/vaal-water/archive/2013/04/08/3008880.html 自己试过很好用 function zero_fill_he ...

  4. RGB颜色转换算法C语言实现

    typedef unsigned short     TUINT16; #define RGB565(R, G, B) \ (((TUINT16) ((R) >> 3)) << ...

  5. IOS RGB颜色转换

    - (UIColor *)getColor:(NSString *)hexColor { unsigned int red,green,blue; NSRange range; range.lengt ...

  6. sass-RGB颜色函数-RGB()颜色函数

    在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 ...

  7. 颜色转换、随机、16进制转换、HSV

    颜色转换.随机.16进制转换.HSV: /** * * *-----------------------------------------* * | *** 颜色转换.随机.16进制转换.HSV * ...

  8. Atitit  从 RGB 到 HSL 或 HSV 的转换

    Atitit  从 RGB 到 HSL 或 HSV 的转换 1.1. 从 RGB 到 HSL 或 HSV 的转换公式与原理1 1.2. public static HSV RGB2HSV(Color ...

  9. javascript把RGB指定颜色转换成十六进制颜色(Converting R,G,B values to HTML hex notation)

    Prologue 看见一篇非常好的外国文章,Making annoying rainbows in javascript,事实上我当时非常想把它翻译下来的,可是对于一个连六级都没过的人确实有点难度,一 ...

随机推荐

  1. vue的事件

    vue的事件: vue事件简写: vue中事件是 v-on:click=' show()'    但是我嫌弃它写太长每次都要 v-on: 事件 vue中就有事件简写   @click='show()' ...

  2. 第6课 仿Siri机器人-语音朗读和语音识别

    一.功能设计 输入文本,单击“朗读”按钮,由手机读出该文本(如果没有输入文本,则弹出消息框警告“请输入文本):单击“识别”按钮,读入语音,从文本框中输出文字.(另,增加识别的视觉效果,如果读入的文本含 ...

  3. v1.0.2-2017.04.26

    v1.0.2-2017.04.26 增加支付宝.微信查询接口 增加订单轮询工程 增加网关下单后发起订单轮询业务流程 v1.0.1-2017.04.05 修复分页乱码bug 增加支付密码字段.商户服务器 ...

  4. Win10安装msi程序报错2503和2502错误解决方案

    刚升级了系统到win10,重新搭建开发环境,在安装scala的时候一直报2503.2502错误,如图 试了好几种办法都不好使,现在罗列依次用到的三种方法: 一.命令提示符(管理员)启动 "w ...

  5. 一个老IT产品管理者对于产品经理工作的经验总结

    一个老IT产品管理者对于产品经理工作的经验总结 1. 任何行业,包括IT行业,所谓产品管理.产品经理,其核心应该是企业产品管理制度,也就是说,只有企业存在相应的.合理的产品管理体系和制度,产品管理.产 ...

  6. July 06th 2017 Week 27th Thursday

    Knowledge is the antidote to fear. 知识可以解除恐惧. Fear always steps from unknown things. Once we know wha ...

  7. [EffectiveC++]item39:明智而审慎地使用private

    187页 private继承意味implementedin-terms-of(根据某物实现出).如果你让class D以private形式继承class B,你的用意为了采用class B内已经备妥的 ...

  8. Kafka与MQ的区别

    作为消息队列来说,企业中选择mq的还是多数,因为像Rabbit,Rocket等mq中间件都属于很成熟的产品,性能一般但可靠性较强, 而kafka原本设计的初衷是日志统计分析,现在基于大数据的背景下也可 ...

  9. Yii 不完全解决方案(一)

    此文意在记录 Yii 开发过程中的小问题解决方案 1. Yii 中 Js 和 Css 文件的引入. 我们就从最简单的问题开始吧,说起来也不是问题,只是语法罢了.假设我们的 js 文件都放在和 prot ...

  10. PHP读取文件内容的五种方式(转载)

    php读取文件内容的五种方式 分享下php读取文件内容的五种方法:好吧,写完后发现文件全部没有关闭.实际应用当中,请注意关闭 fclose($fp); php读取文件内容: -----第一种方法--- ...