Js实现HSL&RGB互转

更新日期: 2019-12-05阅读: 2.3k标签: 颜色

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

在Windows的标准颜色对话框中均包含这两种表示方法。RGB的取值范围在0~255之间,HSL的取值在0~1之间,但Windows系统处理成了0~240取值范围,各种不同环境下的取值参照附表。另外还有CMY/CMYK颜色空间,常用于印刷行业,以后再将RGB-CMY-CMYK的转换算法贴出。  


hsl转rgb

/**
 *
 * @param {Number} H 色相 [0,360)
 * @param {Number} S 饱和度 [0,1]
 * @param {Number} L 亮度 [0,1]
 * @param {Boolean} stringMode 是否返回字符串模式
 */
function HSL2RGB(H = 0, S = 0, L = 0, stringMode = false) {
  const C = (1 - Math.abs(2 * L - 1)) * S
  const X = C * (1 - Math.abs(((H / 60) % 2) - 1))
  const m = L - C / 2
  const vRGB = []
  if (H >= 0 && H < 60) {
    vRGB.push(C, X, 0)
  } else if (H >= 60 && H < 120) {
    vRGB.push(X, C, 0)
  } else if (H >= 120 && H < 180) {
    vRGB.push(0, C, X)
  } else if (H >= 180 && H < 240) {
    vRGB.push(0, X, C)
  } else if (H >= 240 && H < 300) {
    vRGB.push(X, 0, C)
  } else if (H >= 300 && H < 360) {
    vRGB.push(C, 0, X)
  }
  const [vR, vG, vB] = vRGB
  const R = 255 * (vR + m)
  const G = 255 * (vG + m)
  const B = 255 * (vB + m)

  if (stringMode) {
    return `rgb(${R},${G},${B})`
  }

  return { R, G, B }
}


2.rgb转hsl

/**
 * @description rgb转化为hsl
 * @param {Number} R [0,255]
 * @param {Number} G [0,255]
 * @param {Number} B [0,255]
 * @param {Boolean} stringMode 是否返回字符串模式
 */
function RGB2HSL(R = 0, G = 0, B = 0, stringMode = false) {
  const _R = R / 255;
  const _G = G / 255;
  const _B = B / 255;
  const Cmax = Math.max(_R, _G, _B);
  const Cmin = Math.min(_R, _G, _B);
  const V = Cmax - Cmin;

  let H = 0;
  if (V === 0) {
    H = 0;
  } else if (Cmax === _R) {
    H = 60 * (((_G - _B) / V) % 6);
  } else if (Cmax === _G) {
    H = 60 * ((_B - _R) / V + 2);
  } else if (Cmax === _B) {
    H = 60 * ((_R - _G) / V + 4);
  }

  H = Math.floor(backCycle(H, 360));
  const L = numberFixed((Cmax + Cmin) / 2);
  const S = V === 0 ? 0 : numberFixed(V / (1 - Math.abs(2 * L - 1)));

  if (stringMode) {
    return `hsl(${H},${numberFixed(100 * S)}%,${numberFixed(100 * L)}%)`;
  }

  return { H, S, L };
}

// utils
function backCycle(num, cycle) {
  let index = num % cycle;
  if (index < 0) {
    index += cycle;
  }
  return index;
}
function numberFixed(num = 0, count = 3) {
  const power = Math.pow(10, count);
  return Math.floor(num * power) / power;
}



链接: https://fly63.com/article/detial/6716

css常用的颜色单位表示法

所有的颜色都可以由红、绿、蓝三原色调配而成。 CSS中用8位表示一个颜色,那么可以有28即256种颜色,所以总共可以表示256*256*256种颜色。CSS纵有多种颜色表示: 十六进制表示法、rgb表示法、hsl色相表示法、hsla色相表示法

css颜色模式hsla和rgba

在CSS3中可以使用RGBA和HSLA两种色彩模式,这两个都可以用来设置颜色以及指定透明度。RGBA无法直观看出是什么颜色。并且如果想要对颜色进行调整也无法简单做到

网页设计中的色彩心理学

我们大多数人没有意识到它是如何工作的,只有少数人可能会注意到。虽然颜色的影响可能被高估了,但是我们可以在某些情况下明显地感觉到它(想象你自己在一个暗红色的房间里或者在天空颜色的房间里)。

::after 1px 间隔线在 Safari 显示颜色不同于其它的问题

细找问题,找出来了,我在 ::after 内写的是 border-bottom ,也就是说,在纵向压缩的时候,压缩的是 border。换成用 background-color ,也就是用 after 的主体。

Js计算颜色对比度

某些网站和服务允许您通过上传图片,更改背景颜色或设计的其他方面来自定义您的个人资料。作为客户,此个性化将Web应用程序转换为您存储数据的小窝。

RGB、HSL、Hex网页色彩码,看完这篇全懂了

网页使用到的色彩标示方法中,从古早时期大家都在用的16进位码(#000000)、RGB色值标示、HSL色彩标示,其中网页设计师最常使用的16进位色码标示法,而16进位码又是如何计算色彩的呢?

CSS Color Adjust 速览

近来,各大平台的操作系统纷纷引入 Dark Mode 深色模式,包括 Windows、MacOS 以及 Android 甚至 iOS 13 也将引入该模式。深色模式引入的同时,同时允许我们基于用户的偏好设计特定的样式

HTML常用的颜色表【代码色彩表 】

以下是DIVCSS5整理常用的HTML颜色表,参考,直接找到自己需要的html颜色值拷贝颜色值代码即可使用(除了以下颜色表外,你还可以使用PS软件获取颜色值:http://www.divcss5.com/html/h635.shtml)。

常用颜色表之中国传统颜色

不知道大家觉得如何,舒适的颜色,很多人都会喜欢,但主要还是看实用性。今天给大家分享中国传统颜色有那些?中国传统的颜色之美,美如其名:蔚蓝、竹青、绯红、月白、石青、紫檀、霜色、黛绿、胭脂、藕荷、豆绿、宝蓝、秋香、玄色、牙色、黄栌、靛蓝、明黄、朱砂、石绿

css中颜色

假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了,就可以直接给定颜色的名称。CSS称这些有名称的颜色为命名颜色。命名颜色的关键字有限,css定义了17个标准色:浅绿色,黑色,蓝色

点击更多...

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