js 正则判断颜色值，HEX转RGB，HSL转RGB

freecode 发布于2019-08-22 10:54 / 1156人阅读

摘要：颜色值判断颜色值转换为颜色值转换为为色相，饱和度，亮度。

颜色值判断

/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test("#009a61")
/^rgb/.test("rgb(0, 154, 97)")
/^hsl/.test("hsl(0, 0%, 20%)")

HEX颜色值转换为RGB

// Colors
function hexToRgb(hexValue) {
  const rgx = /^#?([a-fd])([a-fd])([a-fd])$/i;
  const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b );
  const rgb = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
  const r = parseInt(rgb[1], 16);
  const g = parseInt(rgb[2], 16);
  const b = parseInt(rgb[3], 16);
  return `rgb(${r},${g},${b})`;
}

HSL颜色值转换为RGB

HSL 为色相，饱和度，亮度。

function hslToRgb(hslValue) {
  const hsl = /hsl((d+),s*([d.]+)%,s*([d.]+)%)/g.exec(hslValue);
  const h = parseInt(hsl[1]) / 360;
  const s = parseInt(hsl[2]) / 100;
  const l = parseInt(hsl[3]) / 100;
  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;
  }
  let r, g, b;
  if (s == 0) {
    r = g = b = l;
  } else {
    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }
  return `rgb(${r * 255},${g * 255},${b * 255})`;
}

代码来源：https://github.com/juliangarn...

GPU云服务器云服务器 RGB颜色值 js 颜色转换rgb HEX和RGB转换 js判断正确跳转页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91418.html

自己动手写个颜色类库：掌握JS中的位运算符

摘要：在编写的过程中，涉及到了中的各种位运算符，对进制色值的处理不再是循环遍历了。只对位运算符感兴趣的建议直接阅读目录中的色值的快速转换。通过阅读类，可以知道最终属性均为一个或构造出来的对象，接下来就具体说说类中的这些位运算符起到了什么作用。从最近写的一个图表库中单独抽象出来了颜色类库，功能包括HEX、RGB/RGBA以及HSL/HSLA各种色值的转换以及颜色明暗变化。在编写的过程中，涉及...

yvonne 2019-08-20 10:24 评论0 收藏0
RGB、HSL、Hex网页色彩码，看完这篇全懂了

摘要：再来做个练习，如果我们想要黄色，那就是把红色光跟绿色光混合起来，所以我们就把红色光跟绿色光像这样开到最大，你就能够看到黄色了。网页使用到的色彩标示方法中，从古早时期大家都在用的16进位码（#000000）、RGB色值标示、HSL色彩标示，其中网页设计师最常使用的16进位色码标示法，而16进位码又是如何计算色彩的呢？有没有办法直接脑袋就把色彩算出来？HSL色彩该如何运用与记忆？有没有什...

hightopo 2019-08-02 16:18 评论0 收藏0
RGB、HSL、Hex网页色彩码，看完这篇全懂了

摘要：再来做个练习，如果我们想要黄色，那就是把红色光跟绿色光混合起来，所以我们就把红色光跟绿色光像这样开到最大，你就能够看到黄色了。网页使用到的色彩标示方法中，从古早时期大家都在用的16进位码（#000000）、RGB色值标示、HSL色彩标示，其中网页设计师最常使用的16进位色码标示法，而16进位码又是如何计算色彩的呢？有没有办法直接脑袋就把色彩算出来？HSL色彩该如何运用与记忆？有没有什...

miguel.jiang 2019-08-30 10:53 评论0 收藏0
CSS单位计算总结

摘要：单位总结公共部分长度像素，同一屏幕分辨率下是绝对单位。 CSS单位总结公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div>div { border: 1px solid cyan; padding: 10px; margin: 1...

zorpan 2019-08-02 11:52 评论0 收藏0
CSS单位计算总结

摘要：单位总结公共部分长度像素，同一屏幕分辨率下是绝对单位。 CSS单位总结公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div>div { border: 1px solid cyan; padding: 10px; margin: 1...

468122151 2019-08-29 17:06 评论0 收藏0