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.
* 转换公式参考自 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颜色转换的更多相关文章
- iOS中RGB颜色转换
iOS中RGB常用的色值,同时可将对颜色的设置定义成宏,方便开发应用,如: // RGB颜色转换(16进制->10进制) #define UIColorFromRGB(rgbValue) [UI ...
- 如何将24位RGB颜色转换16位RGB颜色
有许多朋友第一次使用16位彩色显示屏会遇到如何将24位RGB颜色转换为对应的16位RGB颜色的问题, 通过查阅相关资料,就写一下其中的转换原理吧,希望对大家会有所帮助. 我们知道24位RGB是分别由8 ...
- js方法实现rgb颜色转换成16进制格式的代码的方法
原文地址:http://www.cnblogs.com/vaal-water/archive/2013/04/08/3008880.html 自己试过很好用 function zero_fill_he ...
- RGB颜色转换算法C语言实现
typedef unsigned short TUINT16; #define RGB565(R, G, B) \ (((TUINT16) ((R) >> 3)) << ...
- IOS RGB颜色转换
- (UIColor *)getColor:(NSString *)hexColor { unsigned int red,green,blue; NSRange range; range.lengt ...
- sass-RGB颜色函数-RGB()颜色函数
在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 ...
- 颜色转换、随机、16进制转换、HSV
颜色转换.随机.16进制转换.HSV: /** * * *-----------------------------------------* * | *** 颜色转换.随机.16进制转换.HSV * ...
- Atitit 从 RGB 到 HSL 或 HSV 的转换
Atitit 从 RGB 到 HSL 或 HSV 的转换 1.1. 从 RGB 到 HSL 或 HSV 的转换公式与原理1 1.2. public static HSV RGB2HSV(Color ...
- javascript把RGB指定颜色转换成十六进制颜色(Converting R,G,B values to HTML hex notation)
Prologue 看见一篇非常好的外国文章,Making annoying rainbows in javascript,事实上我当时非常想把它翻译下来的,可是对于一个连六级都没过的人确实有点难度,一 ...
随机推荐
- vue的事件
vue的事件: vue事件简写: vue中事件是 v-on:click=' show()' 但是我嫌弃它写太长每次都要 v-on: 事件 vue中就有事件简写 @click='show()' ...
- 第6课 仿Siri机器人-语音朗读和语音识别
一.功能设计 输入文本,单击“朗读”按钮,由手机读出该文本(如果没有输入文本,则弹出消息框警告“请输入文本):单击“识别”按钮,读入语音,从文本框中输出文字.(另,增加识别的视觉效果,如果读入的文本含 ...
- v1.0.2-2017.04.26
v1.0.2-2017.04.26 增加支付宝.微信查询接口 增加订单轮询工程 增加网关下单后发起订单轮询业务流程 v1.0.1-2017.04.05 修复分页乱码bug 增加支付密码字段.商户服务器 ...
- Win10安装msi程序报错2503和2502错误解决方案
刚升级了系统到win10,重新搭建开发环境,在安装scala的时候一直报2503.2502错误,如图 试了好几种办法都不好使,现在罗列依次用到的三种方法: 一.命令提示符(管理员)启动 "w ...
- 一个老IT产品管理者对于产品经理工作的经验总结
一个老IT产品管理者对于产品经理工作的经验总结 1. 任何行业,包括IT行业,所谓产品管理.产品经理,其核心应该是企业产品管理制度,也就是说,只有企业存在相应的.合理的产品管理体系和制度,产品管理.产 ...
- July 06th 2017 Week 27th Thursday
Knowledge is the antidote to fear. 知识可以解除恐惧. Fear always steps from unknown things. Once we know wha ...
- [EffectiveC++]item39:明智而审慎地使用private
187页 private继承意味implementedin-terms-of(根据某物实现出).如果你让class D以private形式继承class B,你的用意为了采用class B内已经备妥的 ...
- Kafka与MQ的区别
作为消息队列来说,企业中选择mq的还是多数,因为像Rabbit,Rocket等mq中间件都属于很成熟的产品,性能一般但可靠性较强, 而kafka原本设计的初衷是日志统计分析,现在基于大数据的背景下也可 ...
- Yii 不完全解决方案(一)
此文意在记录 Yii 开发过程中的小问题解决方案 1. Yii 中 Js 和 Css 文件的引入. 我们就从最简单的问题开始吧,说起来也不是问题,只是语法罢了.假设我们的 js 文件都放在和 prot ...
- PHP读取文件内容的五种方式(转载)
php读取文件内容的五种方式 分享下php读取文件内容的五种方法:好吧,写完后发现文件全部没有关闭.实际应用当中,请注意关闭 fclose($fp); php读取文件内容: -----第一种方法--- ...