/**
* 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. The Willpower Instinct(自控力,意志力)

    下面是我这几天在读斯坦福大学麦格尼格尔教授的<自控力>这本书的过程中摘抄的部分经典句子,发人深思!有助于帮助我们更好的了解自己. 00 导言:欢迎进入意志力入门 意志力:控制自己的注意力. ...

  2. 参数化查询为什么能够防止SQL注入 (转)

    很多人都知道SQL注入,也知道SQL参数化查询可以防止SQL注入,可为什么能防止注入却并不是很多人都知道的. 本文主要讲述的是这个问题,也许你在部分文章中看到过这块内容,当然了看看也无妨. 首先:我们 ...

  3. Python爬虫教程-30-Scrapy 爬虫框架介绍

    从本篇开始学习 Scrapy 爬虫框架 Python爬虫教程-30-Scrapy 爬虫框架介绍 框架:框架就是对于相同的相似的部分,代码做到不出错,而我们就可以将注意力放到我们自己的部分了 常见爬虫框 ...

  4. strace for Android

    使用strace for Android跟踪系统调用过程方便后续的so文件分析 http://benno.id.au/blog/2007/11/18/android-runtime-stracehtt ...

  5. idea配置maven后提示 commond not found

    1.昨天换公司笔记本安装idea后,配置完maven后,发现自己配置的 responsity 里面没有jar包,还是在默认的.m2文件夹里面,之后发现原来是 配置的setting.xml里面的目录 这 ...

  6. 把IDEA中新建的项目提交到Github仓库中

    对于一个没有进行任何版本控制设置的idea工程,使其支持Github,设置步骤如下 到Git官网下载Git的安装包,安装好以后,Git的安装目录下的文件结构应该如下图所示 在IDEA开发工具中配置Gi ...

  7. Log4j的配置文件

    附:Log4j比较全面的配置 Log4j配置文件实现了输出到控制台.文件.回滚文件.发送日志邮件.输出到数据库日志表.自定义标签等全套功能. log4j.rootLogger=DEBUG,consol ...

  8. 【Leetcode】【Medium】Construct Binary Tree from Preorder and Inorder Traversal

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  9. Web博文目录

    前言 博客写的多了,自己翻起来也费劲,这里就进行一下整合. 以前设想自己做DBA,做运维,没想到最后还要走开发这条路,干一行就爱一行...学的扎实点,工作起来也会轻松.—— 送给奋斗的自己 1 Jav ...

  10. boost::intrusive_ptr原理介绍

    boost::intrusive_ptr一种“侵入式”的引用计数指针,它实际并不提供引用计数功能,而是要求被存储的对象自己实现引用计数功能,并提供intrusive_ptr_add_ref和intru ...