You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.7 KiB
88 lines
2.7 KiB
/**
|
|
* color转rgb 获取颜色rgb值 用于计算
|
|
* @param {string} hexcolor
|
|
* @return {Array} rgb颜色值 数组
|
|
*/
|
|
const colorToRgb = hexcolor => {
|
|
let r
|
|
let g
|
|
let b
|
|
if (hexcolor.substr(0, 3) === 'rgb') {
|
|
const start = hexcolor.indexOf('(') + 1
|
|
const length = hexcolor.indexOf(')') - start
|
|
const rgb = hexcolor.substr(start, length).split(',')
|
|
r = parseInt(rgb[0])
|
|
g = parseInt(rgb[1])
|
|
b = parseInt(rgb[2])
|
|
} else {
|
|
hexcolor = hexcolor.substr(0, 1) === '#' ? hexcolor.substr(1) : hexcolor
|
|
if (hexcolor.length === 3) {
|
|
const rgb = hexcolor.split('')
|
|
hexcolor = `${rgb[0]}${rgb[0]}${rgb[1]}${rgb[1]}${rgb[2]}${rgb[2]}`
|
|
}
|
|
r = parseInt(hexcolor.substr(0, 2), 16)
|
|
g = parseInt(hexcolor.substr(2, 2), 16)
|
|
b = parseInt(hexcolor.substr(4, 2), 16)
|
|
}
|
|
return [r, g, b]
|
|
}
|
|
|
|
/**
|
|
* 颜色减淡
|
|
* @param {string} color hex颜色值
|
|
* @param {number} level 0-1
|
|
* @return {string} rgb颜色值
|
|
*/
|
|
const colorLighten = (color, level = 1) => {
|
|
const rgb = colorToRgb(color)
|
|
for (let i = 0; i < 3; i++) {
|
|
rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])
|
|
}
|
|
return `rgb(${rgb.join(',')})`
|
|
}
|
|
|
|
/**
|
|
* 颜色加深
|
|
* @param {string} color hex颜色值
|
|
* @param {number} level 0-1
|
|
* @return {string} rgb颜色值
|
|
*/
|
|
const colorDark = (color, level = 1) => {
|
|
const rgb = colorToRgb(color)
|
|
for (let i = 0; i < 3; i++) {
|
|
rgb[i] = Math.floor(rgb[i] * (1 - level))
|
|
}
|
|
return `rgb(${rgb.join(',')})`
|
|
}
|
|
|
|
/**
|
|
* 计算出具有较高对比度的颜色是白色还是黑色
|
|
* @param {string} hexcolor hex颜色 或者rgb颜色
|
|
* 传入一个hex颜色值会自动对比用这个颜色做为背景，文字应该用白色还是黑色
|
|
*/
|
|
const getContrastYIQ = hexcolor => {
|
|
let yiq
|
|
const [r, g, b] = colorToRgb(hexcolor)
|
|
yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000
|
|
return (yiq >= 128) ? 'black' : 'white'
|
|
}
|
|
|
|
/**
|
|
* 验证是否是合法的颜色值
|
|
* @param {string} color 颜色值
|
|
*/
|
|
const isColorString = color => {
|
|
const re1 = /^#([0-9a-f]{6}|[0-9a-f]{3})$/i
|
|
const re2 = /^rgb\(([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\)$/i
|
|
const re3 = /^rgba\(([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,(1|1.0|0.[0-9])\)$/i
|
|
return re2.test(color) || re1.test(color) || re3.test(color);
|
|
}
|
|
|
|
export {
|
|
colorToRgb,
|
|
colorLighten,
|
|
colorDark,
|
|
getContrastYIQ,
|
|
isColorString
|
|
}
|
|
|