【前端】文字颜色随背景颜色亮度改变

听仲

于 2024-05-21 14:26:24 发布

阅读量352

点赞数 1

文章标签：前端 vue.js javascript css

本文链接：https://blog.youkuaiyun.com/2201_76056523/article/details/139091798

版权

文字的颜色会根据背景颜色的亮度自动调整，以保证文字在任何背景颜色下都能清晰地显示。

传入的cor是背景颜色它是一个十六进制颜色码

返回的是文字颜色

export function setTextColor(cor) {
	const color = cor
	const r = parseInt(color.slice(1, 3), 16)
	const g = parseInt(color.slice(3, 5), 16)
	const b = parseInt(color.slice(5, 7), 16)
	const brightness = 0.299 * r + 0.587 * g + 0.114 * b
	return brightness > 128 ? '#666' : '#fff'
}