使用JavaScript实现计算颜色的相对亮度并确定相应的文本颜色
作者：日升
这篇文章主要为大家详细介绍了如何使用JavaScript实现计算颜色的相对亮度并确定相应的文本颜色,感兴趣的小伙伴可以跟随小编一起学习一下
一、需求内容
需求点：给出一组颜色列表，渲染对应的颜色以及颜色值，但是要保证文本颜色和背景色不冲突，文本颜色保持 black 和 white 两种即可
示例如下：每个模块背景色为当前颜色，文案内容为当前颜色值，文案颜色为当前颜色通过计算后的 'black' 或 'white'
二、实现方案
思路
背景颜色与文本颜色不能冲突，亮的背景色展示黑色文案，深的背景色展示白色文案
使用 YUV 与 RGB 颜色转化公式
判断 a 的值，也就是透明度，透明度越小颜色越浅
实现流程
先把颜色转化成 rgba
根据计算公式 (r * 299 + g * 587 + b * 114) / 1000 将RGB颜色转换为YUV颜色
判断计算出来的值在判断 a 的值来确定文本颜色的值
三、代码实现
/**
* 把十六进制颜色值转成 rgba 颜色值
* @param {string} hex
* @returns {string} rgba 颜色值
*/
const hexToRgba = (hex: string): string => {
const rgba = []
hex = hex.replace('#', '').padEnd(8, 'F')
for (let i = 0; i < hex.length; i+=2) {
rgba.push(parseInt(hex.slice(i, i+2), 16))
}
return rgba.reduce((prev, item, index) => {
return prev += index >= rgba.length - 1 ? Number((item / 255).toFixed(2)) : `${item}, `
}, 'rgba(') + ')'
}
/**
* 计算文本颜色值
* @param {string} hexColor
* @returns {'black' | 'white'} 文本颜色值
*/
const determineTextColor = (hexColor: string): 'black' | 'white' => {
// 将十六进制颜色值转换为 RGB 格式
const rgbColor = hexToRgba(hexColor);
// 获取颜色的 RGB 分量
const [r, g, b, a] = (rgbColor.match(/\d+(\.\d+)?/g) || []).map(Number);
// 计算颜色的相对亮度
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
// 根据相对亮度确定文本颜色
return brightness > 125 ? 'black' : (a < 0.4 ? 'black' : 'white')
}
四、案例效果展示
案例
const colorList = [
"#FAFAFAA6",
"#000000FF",
"#000000EE",
"#000000AA",
"#00000088",
"#00000066",
"#00000033",
"#00000022",
"#00000011",
"#00000000",
"#333333FF",
"#FFFFFFFF",
"#FFFFFFEE",
"#FFFFFFBB",
"#FFFFFFAA",
"#FFFFFF99",
"#FFFFFF88",
"#FFFFFF66",
"#FFFFFF33",
"#FFFFFF22",
"#FFFFFF11",
"#344258FF",
"#4CAF50DE",
"#364FBBFF",
"#00000040",
"#FF4D4FFF",
"#233494FF",
"#0505050F",
"#00000005",
"#E7E8EAFF",
"#F5F7FAFF",
"#7A7A7AFF",
"#1677FFFF",
"#69B1FFFF",
"#0958D9FF",
"#00000014",
"#0000001E",
"#0000000C",
"#52C41AFF",
"#FAAD14FF",
"#00000073",
"#0000000F",
"#001529FF",
"#002140FF",
"#FFFFFF33",
"#722ED1FF",
"#13C2C2FF",
"#EB2F96FF",
"#F5222DFF",
"#FA8C16FF",
"#FADB14FF",
"#FA541CFF",
"#2F54EBFF",
"#A0D911FF",
"#000000D9",
"#ADBBE0FF",
"#5A71C7FF",
"#FFF2F0FF",
"#FFFFFFA6",
"#FFFFFF00",
"#FFFFFF40",
"#FF7875FF",
"#000C17FF",
"#0543C014",
"#0000000A",
"#FFA39EFF",
"#FF26050F",
"#FFD666FF",
"#FFD70519",
"#D9363EFF",
"#00000026",
"#DDE2EDFF",
"#F5F5F5FF",
"#F0F0F0FF",
"#D9D9D9FF",
"#000FFFFF",
"#000000A6",
"#EBF0FAFF",
"#8196D4FF",
"#F6FFEDFF",
"#D9F7BEFF",
"#B7EB8FFF",
"#95DE64FF",
"#389E0DFF",
"#73D13DFF",
"#FFF1F0FF",
"#FFCCC7FF",
"#FFFBE6FF",
"#FFF1B8FF",
"#FFE58FFF",
"#D48806FF",
"#FFC53DFF",
"#E6F4FFFF",
"#BAE0FFFF",
"#91CAFFFF",
"#4096FFFF",
"#FAFAFAFF",
"#EDEDEDFF",
"#E0E0E0FF",
"#D4D4D4FF",
"#C7C7C7FF",
"#A1A1A1FF",
"#545454FF",
"#2E2E2EFF"
]
let html = '<ul>'
colorList.forEach((item) => {
const data = determineTextColor(item)
html += `<li style="background: ${item}; color: ${data}; border: 1px solid ${data};">${item}</li>`
})
html += '</ul>'
document.body.innerHTML = html
图片展示
到此这篇关于使用JavaScript实现计算颜色的相对亮度并确定相应的文本颜色的文章就介绍到这了,更多相关JavaScript计算颜色相对亮度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！