摘要:颜色值判断颜色值转换为颜色值转换为为色相,饱和度,亮度。
颜色值判断
/(^#[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...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/91418.html
摘要:在编写的过程中,涉及到了中的各种位运算符,对进制色值的处理不再是循环遍历了。只对位运算符感兴趣的建议直接阅读目录中的色值的快速转换。通过阅读类,可以知道最终属性均为一个或构造出来的对象,接下来就具体说说类中的这些位运算符起到了什么作用。 从最近写的一个图表库中单独抽象出来了颜色类库,功能包括HEX、RGB/RGBA以及HSL/HSLA各种色值的转换以及颜色明暗变化。在编写的过程中,涉及...
摘要:再来做个练习,如果我们想要黄色,那就是把红色光跟绿色光混合起来,所以我们就把红色光跟绿色光像这样开到最大,你就能够看到黄色了。 网页使用到的色彩标示方法中,从古早时期大家都在用的16进位码(#000000)、RGB色值标示、HSL色彩标示,其中网页设计师最常使用的16进位色码标示法,而16进位码又是如何计算色彩的呢?有没有办法直接脑袋就把色彩算出来?HSL色彩该如何运用与记忆?有没有什...
摘要:再来做个练习,如果我们想要黄色,那就是把红色光跟绿色光混合起来,所以我们就把红色光跟绿色光像这样开到最大,你就能够看到黄色了。 网页使用到的色彩标示方法中,从古早时期大家都在用的16进位码(#000000)、RGB色值标示、HSL色彩标示,其中网页设计师最常使用的16进位色码标示法,而16进位码又是如何计算色彩的呢?有没有办法直接脑袋就把色彩算出来?HSL色彩该如何运用与记忆?有没有什...
阅读 1016·2021-11-18 10:02
阅读 1260·2021-09-23 11:22
阅读 2550·2021-08-21 14:08
阅读 1607·2019-08-30 15:55
阅读 1688·2019-08-30 13:45
阅读 3072·2019-08-29 16:52
阅读 3062·2019-08-29 12:18
阅读 1605·2019-08-26 13:36