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,事实上我当时非常想把它翻译下来的,可是对于一个连六级都没过的人确实有点难度,一 ...
随机推荐
- 使用JavaScript脚本控制媒体播放(顺序播放和随机播放)
在JavaScript脚本中获取<audio.../>元素对应的对象为HTMLAudioElement对象,<video.../>元素对应的对象为HTMLVideoElemen ...
- 如何使用eslint
npm i -g eslint 安装 eslint 即可看到基本的使用参数 eslint官网提供配置文件 eslint --env browser --global $ --rule "no ...
- 数据结构与算法C语言所有头文件汇总 —— 持续更新
header.h // 顺序表的结构定义 #define Maxsize 100 //const int Maxsize = 100; // 预先定义一个足够大的常数 typedef struct { ...
- 基础架构之日志管理平台及钉钉&邮件告警通知
接上一篇,我们继续解释如何把ELK跟钉钉及发送邮件功能结合起来,让我们及时的了解重要日志并快速反馈. Sentinel 安装,项目介绍在https://github.com/sirensolution ...
- HTML5+CSS3开发移动端页面
前提知识: 1.能够独立根据设计稿进行整套项目的需求.剖析及其开发: 2.对项目开发流程需要有一个基本的了解: 3.可以灵活运用切图.重构.前端的知识对项目进行灵活控制. 开发步骤之需求分析: 1.确 ...
- Windows ->> Windows下一代文件系统 -- Resilient file system(ReFS)
Comming soon!!! 参考文献: Building the next generation file system for Windows: ReFS ReFS: What you need ...
- Studying TCP's Throughput and Goodput using NS
Studying TCP's Throughput and Goodput using NS What is Throughput Throughput is the amount of data r ...
- Can't create new folder in windows7
First, please use System File Checker tool to troubleshoot(诊断) this issue. If the issue persists, im ...
- Oracle 内存使用建议性能视图
下面三个查询结果均可查询出随着内存参数设置的变化性能的变化情况,对oracle数据库内存的设置有一定的建议和指导作用. select t.SGA_SIZE,t.ESTD_DB_TIME_FACTOR ...
- NET对象的跨应用程序域
NET对象的跨应用程序域 转眼就到了元宵节,匆匆忙忙的脚步是我们在为生活奋斗的写照,新的一年,我们应该努力让自己有不一样的生活和追求.生命不息,奋斗不止.在上篇博文中主要介绍了.NET的AppDoma ...