十六进制颜色的转换（3位，4位，6位），生成色值渐变色，判断颜色值是深色还是浅色 |
您所在的位置：网站首页 › ps黑色渐变白色的数值 › 十六进制颜色的转换（3位，4位，6位），生成色值渐变色，判断颜色值是深色还是浅色 |
十六进制颜色的转换（3位，4位，6位），生成色值渐变色，判断颜色值是深色还是浅色
|
一、3、4位数字表示的16进制颜色转换成6位
3位转6位
3位数的 每一个数字表示6位数中的两位， 这个补全比较简单,直接举例子: #fff => #ffffff#123 => #112233#a2e => #aa22ee 4位转6位4位数的前三位和3转6一样，每一个数字表示6位数中的两位，多的第四位表示的是透明度 #ffff => #ffffff + 透明度 1 （F/16）#1234 => #112233 + 透明度 0.25 （4/16）#a2e8 => #aa22ee + 透明度 0.5 （8/16） 二、 生成颜色相近的渐变色：
通常我们给用户diy的颜色，如果是纯色的话效果不怎么好，需要向深一点或者浅一点进行线性渐变； export function getColor(color, amount) { // 是#开头的十六进制的色值 if (/^#[0-9A-Fa-f]?/.test(color)) { // 如果是4位数的色值，补全成6位，并且取出透明度值，要不计算num会有问题 const fourReg = /^#[0-9A-Fa-f]{4}$/; let alpa = 0; if (fourReg.test(color)) { const fourLengthReg = /^#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])/; const colorCopy = color; color = color.replace(fourLengthReg, `#$1$1$2$2$3$3`); alpa = colorCopy.replace(fourLengthReg, `$4`); } // 如果是3位数的色值，补全成6位， const threeReg = /^#[0-9A-Fa-f]{3}$/; if (threeReg.test(color)) { const testReg = /^#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])/; color = color.replace(testReg, `#$1$1$2$2$3$3`); } const fill = str => ('00' + str).slice(-2); const rgb = getRgb(color.substr(1), amount); const newColor = '#' + fill(rgb.red.toString(16)) + fill(rgb.green.toString(16)) + fill(rgb.blue.toString(16)); // 如果颜色有透明度，则生成的渐变色也加上一样的透明度 if (alpa) { return set16ToRgb(newColor, alpa / 16); } return newColor; // 如果色值是 rgba 形式的 } else if (/rgba\(/.test(color)) { return getColor16(color.replace(/;/, ''), amount); } } // rgba 格式的色值，取渐变色 export function getColor16(rgba, amount) { const deleteRegular = /((^rgba\()|(\)))/gi; // 去除开头的 'rgba(' 和后面的 '）' const newColor = rgba.replace(deleteRegular, ''); const rgbaList = newColor.split(','); const alpa = Number(rgbaList[3]); const color16 = `${Number(rgbaList[0]).toString(16)}${Number(rgbaList[1]).toString(16)}${Number( rgbaList[2] ).toString(16)}`; const fill = str => ('00' + str).slice(-2); const rgb = getRgb(color16, amount); const resolveColor = '#' + fill(rgb.red.toString(16)) + fill(rgb.green.toString(16)) + fill(rgb.blue.toString(16)); if (alpa) { const returnColor = set16ToRgb(resolveColor, alpa); return returnColor; } else { const returnColor = set16ToRgb(resolveColor, '0.1'); return returnColor; } } function getRgb(color, amount) { const clamp = val => Math.min(Math.max(val, 0), 0xff); const num = parseInt(color, 16); // 用>>不用考虑小于零 或者大于 ffffff 的情况 const red = clamp((num >> 16) + amount); const green = clamp(((num >> 8) & 0x00ff) + amount); const blue = clamp((num & 0x0000ff) + amount); return { red, green, blue }; } // 给十六进制颜色加上透明度，转换成rgba export function set16ToRgb(str, alpha) { const reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/; if (reg.test(str)) { let newStr = str.toLowerCase().replace(/#/g, ''); const len = newStr.length; if (len === 3) { let t = ''; for (let i = 0; i const s = newStr.slice(i, i + 2); arr.push(parseInt('0x' + s)); } return `rgba(${arr[0]},${arr[1]},${arr[2]},${alpha || '0'})`; } const rgbaReg = /^(rgba\()(\d+,?){3}/; if (rgbaReg.test(str)) { const deleteRegular = /((^rgba\()|(\)))/gi; const newColor = str.replace(deleteRegular, ''); const arr = newColor.split(','); const alpa = Number(arr[3]); return `rgba(${arr[0]},${arr[1]},${arr[2]},${(alpa * alpha).toFixed(3)})`; } } 三、 识别一个色值｜图片是深色还是浅色：因为RGB三种颜色对人眼的刺激程度不同，所以分别对RGB添加不同的权重。得出的平均值来判断色值是深色还是浅色，坚于红光有较长的波长，而绿光波长较短对视觉的刺激相对较小，(红光：625740nm，绿光：波长范围：492～577nm，蓝光：波长范围：440475nm)所以我们要有意的减小红光的权重而提升绿光的权重。 // 色值是否为浅色 export function isLight(rgb = [152, 152, 152]) { return 0.213 * rgb[0] + 0.715 * rgb[1] + 0.072 * rgb[2] > 255 / 2; } |
【本文地址】
今日新闻 |
推荐新闻 |